Components for web

Accordions

This handy graphical display is how we show collapsable info to members

Alerts

Box

A simple div with a strip of color at the top

Breadcrumbs

Used to help members find where they are on the website

Buttons

These cute clickable dials are how we let members know what action they should take

Cards

Pick a card, any card

FAQs

This is how we show popular questions to our members

Focus panel

Focus. NOUN. A centre of interest or activity

Form inputs

goodybags

Links

Lists

Loading icon

You spin me right round, right round round round

Markdown

A class to style markdown generated HTML

Masthead

Creating a website header? This is the masthead for you

Media object

So here we're specifically talking about how we position images on the left of text

Modal

Delightful pop-ups

Page section

These are used to divide up the page

Pagination

All of the pages

Search input

Looking for something?

Share buttons

Buttons to share the current page to social networks

Side nav

Navigation links to put on the side of a page

Spots

Icons that are clickable, with a little bit of text at the bottom

Toggle Switch

On or Off?

Striped Table

Show us your data

Tiles

These clickable areas are how we show a grid of options

Video

Moving pictures

Wonky Box

Like boxes, but wonky