Editor Styleguide
Index
Headings
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Releveled headings
Why relevel headings?
Every heading creates a subsection. If you want to create a smaller heading without creating a subsection then you can use these classes.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Display headings
What are display headings?
Display headings are huge headings meant for hero sections (page banners).
Heading level 1
Heading level 2
Heading level 3
Text
This is lead text
This is strong
This is emphasized
HTML is an abbreviation.
Footnote link 1. Footnote link 2.
Inline code
Blocks
of
code
This is separated by a
Horizontal rule.
This is a blockquote
This is a nested blockquote
Links
Reference style links
See the URL for [example] at the bottom of
pages/editor-styleguide.md.
Button style links
The
{ .full-width }image modifier works on buttons too :)
Images
Reference style images
See the URL for [example] at the bottom of
pages/editor-styleguide.md.
Images in text
this starts with an image
This has an image in the middle
Full-width images
lists
Unordered lists
- Create a list by starting a line with
- - Sub-lists are made by indenting 4 spaces:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
Ordered lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
Definition lists
- Term 1
- Definition 1
- Term 2
- Definition 2
Unstyled lists
- Item 1
- Item 2
Item 3 (with image at start)
Item 4 (with image at start)
Accordions
Item body 1
Item body 2
Item body 3
Alerts
Danger: bla bla bla
Warning: bla bla bla
Info: bla bla bla
Alignment
Align individual blocks
This is aligned start
This is aligned centerp
This is aligned end
Align multiple blocks
This is aligned start
So is this
This is aligned center
So is this
This is aligned end
So is this
Spacing
Class format
.(m|p)(t|r|b|l|v|h)(0|1|2|3|4):
(m|p)margin (space around) or padding (space inside)(t|r|b|l|v|h)top/right/bottom/left/vertical/horizontal(0|1|2|3|4)exponential multiple of space (1,2,4,8)Examples:
.mb2m (margin) + b (bottom) + 2 (space * 2).ph1p (padding) + h (horizontal) + 1 (space * 1)
This has no space below.
This has a little space below
This has a medium amount of space below
This has a large amount of space below
This has a very large amount of space below
Containers
Thin container
Very thin container
Columns
column 1
column 2
column 1
column 2
column 3
column 1
column 2
column 3
column 4
one third
two thirds
one fourth
two forths
one fourth
one fourth
three fourths
Backgrouds
Individual block background
Light grey
Dark grey
Black
Red
Gold
Blue
Mutliple block background
Light grey
bla bla bla
Dark grey
bla bla bla
Black
bla bla bla
Red
bla bla bla
Gold
bla bla bla
Blue
bla bla bla
Cards
Light cards
Heavy cards
Big feature heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.