Buttons
Button Group
Forms
Dropdown
Combobox
Tooltips
Tooltips are based on hint.css. Currently they don't support html content.
Tabnavs
Search Input
Modals
Use a javascript sprinkle to show the modal by simply adding a class of .--visible to the .ui-modal.
Your Modal Title
Your Modal Description
Your Modal Title
Your Modal Description
Your Modal Title
Your Modal Description
Your Modal Title
Your Modal DescriptionToasts
Toasts are a simple way to display a message to the user.
Eyebrow
Eyebrows are capitalised section headings.
Switch
Chips
Title Pairs & Titles
Title pairs are a simple way to display a title and description.
An extra large title
An extra large description
A large title
A large description
A normal title
A normal description
You can also use titles on their own
An extra large title
A large title
A normal title
Boxes
Boxes tend to make up the skeleton of any UI. They can be used to contain content, or as a container for other UI elements.
A box with a Title Pair
Title Pair Description
A box with a Top section
Title Pair Description
Expander
An expander is a simple way to animate the height of a content container.
Shimmer
Styled Text
Wrap prose-like content in .ui-styled-text to get clean, pretty formatting.
This is a heading 1
This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
This is a heading 2
This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
This is a heading 3
This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- This is a list item in a
ul. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- This is a list item in a
ul. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- This is a list item in a
- This is a list item in a
ol. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
This is a blockquote. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Tables
| Pos | Team | Pld | W | D | L | GF | GA | GD | Pts | Notes |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Manchester United (C) | 38 | 28 | 5 | 5 | 86 | 43 | +43 | 89 | Qualification for the Champions League group stage |
| 2 | Manchester City | 38 | 23 | 9 | 6 | 66 | 34 | +32 | 78 | Qualification for the Champions League group stage |
| 3 | Chelsea | 38 | 22 | 9 | 7 | 75 | 39 | +36 | 75 | Qualification for the Champions League group stage |
| 4 | Arsenal | 38 | 21 | 10 | 7 | 72 | 37 | +35 | 73 | Qualification for the Champions League play-off round |
| 5 | Tottenham Hotspur | 38 | 21 | 9 | 8 | 66 | 46 | +20 | 72 | Qualification for the Europa League group stage |
| 6 | Everton | 38 | 16 | 15 | 7 | 55 | 40 | +15 | 63 | |
| 7 | Liverpool | 38 | 16 | 13 | 9 | 71 | 43 | +28 | 61 | |
| 8 | West Bromwich Albion | 38 | 14 | 7 | 17 | 53 | 57 | -4 | 49 | |
| 9 | Swansea City | 38 | 11 | 13 | 14 | 47 | 51 | -4 | 46 | |
| 10 | West Ham United | 38 | 12 | 10 | 16 | 45 | 53 | -8 | 46 |