Recipes

At a glance

The job of the at a glance panel is to highlight key information in a prominent way and give users high-level context of the information that will be on that page.

Ingredients

1. Content panel
2. Grid (stretch)
3. FAQ carousel

Considerations

• This is the ‘bite’ sized content.
• This is just a panel with a collection of other components – you can customize this however you’d like! Your content should guide what you add here.
• Don’t add more than two rows of cards.

Banner panel

The job of the banner panel is to give landing pages a strong visual distinction with succinct copy and compelling photography.

Considerations

• There’s no need to optimize your images before hand – Sitecore does that for you!
• Level one pages get a background of midnight.
• Level two pages get a background of dusty blue.
• Listing pages (our stories, speeches, facts), and certain landing pages (our history, purpose and values) get a background of dusk.
• Aim to use photography to bring the messaging to life. The connection between photography and content should be clear and compelling.

Image sizes

• Vertical page banner: 1664px × 1108px
• Horizontal page banner (only used on level one pages): 2624px × 1312px

Diagram

The job of the diagram is to create visual interest so that visitors are compelled to read on and more deeply understand the subject.

Ingredients

1. Content panel
2. Grid (stretch)
3. Grid cell

Considerations

• When you have a complex process that you want to explain, this is a great way to explain it in a visual way.
• For each step, limit the amount of text you use. These should be bite-sized chunks of information.
• SVG files are preferred!

FAQ carousel

The job of the FAQ carousel is to highlight commonly asked questions about a particular subject and their answers.

Ingredients

1. Content panel
2. FAQ carousel

Considerations

• Don’t add too many of these cards (four is ideal) – focus on the most common questions your users have.
• As with all content panels, you can add an optional button at the bottom.
• The panel title should be ‘[page name] FAQs’ (e.g. "Commerce City FAQs")

Quick links

The job of quick links is to show the user what they to explore next.

Ingredients

1. Content panel
2. Grid (stretch)
3. Grid cell

Considerations

• Use icons to show users what they can expect after clicking on this link (e.g. forward arrow for a link within the site, PDF icon for PDF documents, etc.)
• The panel background should always be white.

Variations

• Although you can showcase one to four cards, try to fill your grid!
  • Example: have three cards in a three column grid, and four cards in a four column grid. It looks the best that way!
• Try not to go over two rows of cards.

Related stories

The job of related stories is to highlight interesting follow-up articles and ensure there are no dead ends.

Ingredients

1. Content panel
2. Stories curator

Considerations

• The panel title should be ‘More [page name] stories’ (e.g. "More renewable fuels stories")
• Although you can showcase one to four cards, four is preferrable (and looks the best)
• The stories are manually curated
• The View all stories button is optional but recommended