Style guide
For full details on all available styles, components and utilities, please refer to the Spectre documentation. Pages are built using blocks.
Logo
Colours
Core brand colours
Control colours
Grey colours
Typography
Headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Paragraphs
Lead paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Text elements
Bold
Italic
Strikethrough
Underline
Hello World!
Blockquotes
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates
Lists
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
- description list term 1
- description list description 1
- description list term 2
- description list description 2
- description list term 3
- description list description 3
Tables
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
Code blocks
<p><a href="#">Hello world!</a></p>
.foo {
color: red;
}
Buttons
Button sizes
Icon buttons
Forms
Input
Textarea
Select
Radio
Checkbox
Validation
Chips
Labels
Pagination
Media
Responsive images
