Components

Accordions

Requires JavaScript accordion Use whenever you want to toggle additional or related information in a sibling <div>. Built to be stacked or nested. You can also manually toggle this by adding the active class to accordion__content.

Learn More »

Blockquotes

blockquote Similar to the browser default, we added a left border which can be colored using border color utilities. To attribute someone in the blockquote, add a <footer>. If you’re referencing a specific creative work, wrap it in a <cite> tag.

Learn More »

Buttons

button The default button style is white with a dark outline and has a salmon background color on hover. See the modifiers table for more options! Demo Button Markup <button class="button">Button</button> Modifiers Modifier † Behavior button--lg A larger button.

Learn More »

Cards

card Cards can be great for separating blocks of content. A card comes standard with a white background, light grey border, and some padding. Demo Card Header Button Markup <div class="card"> <div class="card__header"> <!

Learn More »

Drawers

Requires JavaScript drawer A drawer is content meant to be toggled with the active class and then slide into view from any direction. The default orientation is bottom.

Learn More »

Figures

figure hover A way to stylishly add captions to images/figures on hover. Demo Figcaption goes here. Markup <figure class="figure-hover"> <img src="..." alt="Figcaption goes here."> <figcaption>Figcaption goes here.</figcaption> </figure>

Learn More »

Images

Round An easy way to create round images. Demo Markup <div class="image--round-small"> <img src="..." alt="pretty"> </div> <div class="image--round-medium"> <img src="..." alt="pretty"> </div> <div class="image--round-large"> <img src="..." alt="pretty"> </div>

Learn More »

Info Boxes

Requires JavaScript Info Box Click the button to toggle the info box. You can also manually toggle this by adding the active class to info-box__content. Demo Open Info Box Close Markup <div class="info-box"> <!

Learn More »

Lists

Default Our default unordered list has margin: 0 and padding-left: 1rem applied. List items have margin-bottom: .5rem. Dogs Cats Birds First Second Third <!-- Unordered List --> <ul> <li>Dogs</li> <li>Cats</li> <li>Birds</li> </ul> <!

Learn More »

Loaders

Default It’s a 1.4rem loader. Demo Markup <div class="loader"></div> Modifiers Modifier † Behavior loader--sm Small .9rem loader--lg Large 2rem † The base class is always required.

Learn More »

Messages

message Messages can be used to display important information that will stand out on the screen. Demo Markup <div class="message message--info"> <!-- Content goes here --> </div> <div class="message message--warning"> <!

Learn More »

Modals

Requires JavaScript Default A modal will display over the screen when toggled with the active class. A modal can easily be opened by setting data-modal with the matching id of the desired modal on a button with the modal__open class.

Learn More »

Pills

pill A rounded, pill-shaped badge. A pill can support color by adding a text or background modifier. Pills have no hover state. Demo Active Active Active Active Markup <div class="pill"> Active </div> <div class="pill text--white background--navy"> Active </div> <div class="pill text--white background--skyblue"> Active </div> <div class="pill text--white background--salmon"> Active </div> split Demo Left: Right Left: Right Left Middle Right Markup <div class="pill pill--split"> <div class="pill__label">Left:</div> <div class="pill__content">Right</div> </div> <div class="pill pill--split text--white background--peach"> <div class="pill__label text--brown">Left:</div> <div class="pill__content">Right</div> </div> <div class="pill pill--split text--white background--navy"> <div class="pill__content background--salmon">Left</div> <div class="pill__content background--olive">Middle</div> <div class="pill__content background--skyblue">Right</div> </div> circle Pills can be circular.

Learn More »

Tables

table Our default table is simple and uncluttered without vertical borders. Platform UI tables are built to be responsive at all screen sizes! Make them responsive by adding a data-label on every <td> to match the column header label.

Learn More »

Tabs

Tab Our tabs are based on radio inputs. Content for a tabbed section needs to live inside the tabs container and the input id and corresponding label for need to match.

Learn More »

Tooltips

tooltip Add your text to a data-tooltip attribute on any item you want to provide with a tooltip. Demo hover me! Markup <div data-tooltip="Tooltip goes here!"> <!-- Content goes here!

Learn More »