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

Checkbox

It's my tick in a box, tick in a box

Chunky buttons

Radio buttons in disguise

FAQs

This is how we show popular questions to our members

Focus panel

Focus. NOUN. A centre of interest or activity

Form input

These nifty inputs allow our members to send us information

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

Input field with button

Actionable Inputs

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

Radio input

Select only one

Search input

Looking for something?

Select list

Select one and only one

Select

Allowing our members the freedom to choose

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

Striped Table

Show us your data

Tiles

These clickable areas are how we show a grid of options

Video

Moving pictures