Wide page options

This is a collection of ways to use various components on pages that have wider layouts. 

It is critical to be aware of the context of the elements that you place on a page. Some layouts don't work on narrow spaces, and some get washed out at full width. Please follow the examples laid out here for how you can use the elements on landing pages or basic pages where the side bar is hidden.

Related articles

Related articles is the component to use when selecting specific articles. Only show them as "Card", "Card small" or "Teaser." all of these view modes will work on a larger layout. Card and Teaser do not look good on a narrow view.

Related articles as card

Related articles as card small

Related articles as teaser

Related people

The related people component allows you to manually build lists of people that are tagged with your department or program. They can be shown as "Card" "Card small" or "List."

Related people as card

Image of Linda Glaser

Linda Glaser

News and Media Relations Manager

Carl Sagan Institute, Communications

Related people as card small

Image of Linda Glaser

Linda Glaser

News and Media Relations Manager

Carl Sagan Institute, Communications

Related people as list

Image of Linda Glaser

Linda Glaser

News and Media Relations Manager

Carl Sagan Institute, Communications

Related pages

screenshot of the edit basic page admin screen, showing the button to click to add an image

You can create a create a selected list of pages. This is very useful if you are using basic pages for non-faculty/staff bio pages.

The image comes from the images tab on the basic page form.

Related pages as cards

Related pages as list

Photo and text blocks

Photo and text blocks are used for featuring content. There are a few options for display. A single item as a spotlight, an alternating stack of items, or as a carousel.

Image showing photo sizes and small image thumbnails
Just a taste of what's available for images.

Eyebrow here as hook

This is a heading 2

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

Eyebrow here as hook

Another topic (this is Heading 2)

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Screenshot showing different heading examples
Neat image showing examples of headings. Really the caption is here for the gallery.

Eyebrow here as hook

Third fake item

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Image showing photo sizes and small image thumbnails
Just a taste of what's available for images.

Eyebrow here as hook

This is a heading 2

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Image with shapes representing the different aspect ratios avaiable
A nifty image showing how different aspect ratios are declared.

Eyebrow here as hook

Another topic (this is Heading 2)

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Screenshot showing different heading examples
Neat image showing examples of headings. Really the caption is here for the gallery.

Eyebrow here as hook

Third fake item

Only use the eyebrow as a hook or subtitle for the main Heading 2 title for the text block. Eyebrow should only be used here.

Should have button to feature

Top