Our components are the pieces that enable us to create page layouts. We have a collection of full width components, internal components, and structural containers called frames.

Requesting a new component or update

If you have an idea for a new component, find a bug/issue with a current component or would like to discuss any other updates, please create a new card on the Backlog Trello board. When creating a new card in Trello, please be as detailed as possible by providing details such as:

- The current bug/issue or new request

- What problem does your new request solve?

- Detailed examples if applicable 

Don't have access to the Trello board? Reach out to Kyle Wagner to request access. For urgent issues, please reach out to someone on the Foundation team with details.

Full width components

Full width components are allowed to be added directly to a page and cannot be used inside of a frame. All full width components will sit flush with each other, meaning no vertical margin is applied when the components are a sibling to another full width component. The following components are full width components:

  • Content Image Banner (CIB)
  • Hero Banner
  • Callout Banner
  • Video Banner
  • Audience Page Banner
  • Form Banner
  • Carousel / Slider
  • Generic Banner
  • Header
  • Footer
  • Breadcrumbs
  • Split Action Banner
  • Card Deck
  • Slider
  • Highlight Section (can also be used as an internal component)
  • Overlap

Internal components

Internal components that must be placed inside a frame or other specified placeholder to work. The following components are internal components:
  • Accordion
  • Cards
  • File Download
  • Icon List
  • New Content
  • Sidebar Navigation
  • Table
  • Video
  • Highlight Section (can also be used as a full width component)

Color palette

Please see the Colors page for more color option details.