Components
Components are the building blocks of any website. They structure content on pages, provide critical information, and encourage users to take action.
The components below are grouped based on their intended purpose and content. Click on each component to see what it looks like, best practices for using it, and technical information for developers and designers.
To see example page layouts with components, visit the Templates section.
Heroes
A Hero is the first section users see on a page. It provides visual appeal and context for a page’s content.
Cards
Cards contain bits of information on a single topic. They can also encourage users to take a specific action, such as registering for an event, reading related content, or exploring pages deeper within a site.
A visual card where text overlays the bottom of an image. Also available as a plain card with no image.
Showcases important content and can lead users to deeper pages in a site. An option featuring statistics is available
Image and text combination that allows for long text. Image sticks in place while a user scrolls through text.
Carousels
Events
Promote events and important dates to users in a variety of ways.
Use in groups of 2 or more to show multiple events in a standard or staggered layout
Shows multiple, equally-weighted events in a vertical list. Can be used with event feeds.
Text Highlight
Sometimes messaging needs to stand out - whether it’s on a single page or across an entire website.
Organized Content
When a page has large amounts of text, putting content into contained blocks helps users quickly move through information to find what they need. Chunking information also reduces clutter on a page.
Stats
Stats show statistics, rankings, or other numerical data.
Navigation
Navigation components appear in many places on a website, including the main navigation, sidebar navigation, and footer. Navigation helps users find content and move through multiple levels of a site without getting lost.
Links
Links encourage users to take specific actions with a single click (such as downloading content, registering for an event, or going to a different page or website).
