Accordions
This handy graphical display is how we show collapsable info to members
Components for web
-
-
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
-
This component is deprecated and will be removed in a future release!
Form error
This is how we show an error for a whole form
-
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
-
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