With Sidebar
Callouts
on Pages with SidebarView a variety of potential layouts for callouts on pages with sidebar.
Card Groups
on Pages with SidebarCard Groups
A card group is a collection of modular cards. Cards can be contextualized with an optional overarching heading and description in a section intro.
Card Groups with Inline Featured Cards
A card group with an inline featured card works the same way as a card group, but with one card featured in a visually prominent way. This component’s featured card is horizontally oriented, and the other cards can either be vertically oriented (standard layout) or horizontally oriented (inline layout).
Custom Content Options
The custom content component is the most flexible component. It provides access to a WYSIWYG editor where you can lightly format text as bold and italic, create different heading levels, create lists and link text. Most other components do not allow for formatting text in this way. The “with sidebar” version also allows you to add a special component next to the custom content area.
View Custom Content layout options on pages with sidebar.
View Custom Content with Sidebar layout options on pages with sidebar.
Factoid Collection
Icon List Collection – Single and Multiple List
This is an example of an Icon List Collection Single List with a one column layout.
- List Item 1Use icon list collections to list out information that’s meaning can be enhanced with the presence of icons, such as a list of things to do (checks) and not to do (x marks).
- List Item 2An icon list collection with a single list is a variation of an icon list collection. It contains one HTML list that can span over one, two or three columns. You can use a section heading and description to contextualize content.
- List Item 3This is an optional description for a list item. If you add a description for one list item in an icon list collection, we recommend adding descriptions for all list items in that icon list collection.
Link List Collection – Single and Multiple Lists
This is an example of a Link List Collection Multiple Lists with a two column layout.
Single List Options
- Link List Collection Single List Options
A link list collection with one list is a variation of a link list collection. It contains one HTML list with linked list items that can span over one, two or three columns. You can use a section heading and description to contextualize content.
Multiple List Options
- Link List Collection Multiple Lists Options
A link list collection with multiple lists is a variation of a link list collection. It contains two-to-four HTML lists with linked list items. You can use a section heading and description to contextualize content. When using multiple link lists, you must use a heading over each list.
Link Slab Options
A link slab features a list of links with an overarching heading and optional description, button and icon. The links can either be displayed in one or two columns on pages without sidebars; on pages with sidebars, the links will display in one column.
Q&A Collections
What alignment style does this example use?
This example Q&A pair is left-aligned.
Q&A Collections Link ExampleWhat CTA option does this example use?
This example Q&A pair has a CTA.
Q&A Collections Link ExampleTestimonial Collection Options
Gig ’em!
Use a testimonial collection to highlight 2-3 quotations at once. This is ideal for testimonial content such as reviews.
Standalone block quotes are for quotations with citations that can be used outside of custom content.