inlude globals ?>
Index
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.
What are display headings?
Display headings are huge headings meant for hero sections (page banners).
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
See the URL for [example] at the bottom of
pages/editor-styleguide.md
.
The
{ .full-width }
image modifier works on buttons too :)
See the URL for [example] at the bottom of
pages/editor-styleguide.md
.
this starts with an image
This has an image in the middle
-
Item body 1
Item body 2
Item body 3
Danger: bla bla bla
Warning: bla bla bla
Info: bla bla bla
This is aligned start
This is aligned centerp
This is aligned end
This is aligned start
So is this
This is aligned center
So is this
This is aligned end
So is this
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:
.mb2
m (margin) + b (bottom) + 2 (space * 2).ph1
p (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
Thin container
Very thin container
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
Light grey
Dark grey
Black
Red
Gold
Blue
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
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.