Buttons
Add the .ui-button class to links or buttons.
Button Group
Use .ui-button-group to display buttons or links together.
Forms
Add .ui-form to any form to make it look great.
Dropdown
Use .ui-dropdown with an internal .--trigger and .--drawer. Add or remove .--open to show and hide the items.
Combobox
Use .ui-combobox when you need more than a simple select or dropdown. Use Combobox.js for behaviour.
Tooltips
Tooltips are based on hint.css. Currently they don't support html content.
Tabnavs
Use .ui-tabnav to create simple tabs.
Search Input
Search inputs are a simple way to search for content.
Modals
Modals are a simple way to display a modal.
Your Modal Title
Your Modal DescriptionToasts
Toasts are a simple way to display a message to the user.
Use a javascript sprinkle to show the modal by simply adding a class of .--visible to the .ui-modal.
Eyebrow
Eyebrows are capitalised section headings.
Switch
Switches are a simple way to toggle a boolean value.
Chips
Chips are a simple way to display a list of tags.
Titles
Titles are a simple way to display a title.
Coffee
Coffee
Coffee
Title Pairs
Title pairs are a simple way to display a title and description.
Coffee
Size: Xl
Coffee
Size: Lg
Coffee
Default Size
Boxes
Boxes are a simple way to display content.
Expander
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 |