Design System Components

50/50 Card Component

A 50/50 Card is a horizontal element that displays an image on one side and information on the other.

Icon showing shapes of hills and the sun representing an image on one side and lines representing text on the other.

Accordion

An Accordion component is a vertical stack of content panels that can be opened and closed.

Icon showing a rectangle with multiple lines representing text and an up-pointing arrow, followed by two rectangles each with a line representing text and a down-pointing arrow.

Button-Style Cards

A Button-Style Card is a clickable card that displays an icon, link, and short description.

Icon showing the cards arranged in a row, each with a home icon followed by lines representing text.

Columns

A Columns component is a two-column layout used to place content side by side, often for comparison or to present related information in parallel.

Columns component

Hero

A Hero component is a banner element that displays an image and information at the top of a page.

Icon showing shapes of hills and the sun representing an image followed by lines representing text.

List Component

A List component is a dynamic content block that displays items from a specific content type, such as news, resources, or people, in a summary format and layout.

Icon showing a list of rectangular cards, each with shapes of hills and the sun representing an image on the left and lines representing text on the right.

Media Gallery

A Media Gallery component displays a collection of media items (images, audio, video, or externally hosted media). 

Media Gallery Component

Quote Card

A Quote Card is a horizontal element that displays an image on the left side and a formatted and attributed quote on the right side. 

Icon showing shapes of hills and the sun representing an image on the left and a text panel starting with an open quote icon followed by lines representing text on the right.

Stats Cards

A Stats Card is a card that displays a data point with a short description.

Icon showing three cards, each with two lines and a percent character representing data followed by lines representing text.

Tabs

A Tabs component is a set of layered content panels with tab controls to support navigation between panels.

Icon showing a row of four small rectangles, each with a line representing text, followed by a wide rectangle containing lines representing text.

Vertical Cards

A Vertical Card is a vertical element that displays an image on top and information below. 

Icon showing three cards, each with shapes of hills and the sun representing an image followed by lines representing text.