Components for web

Accordions

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

Alert

This is how we bring urgent information to our members

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

goodybag meters

This handsome little devil is how we let members know what's left in their goodybag

goodybag with details

This little beauty shows what comes with a goodybag

goodybags

Bundles of joy

Link Button

A link that looks a bit like a button

Links

Connected items

Lists

Connected items, one below another

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

Minor alert

Alerts

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

Social Links

Icons that link to giffgaff's social media accounts. This component is included in the footer

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