Custom elements
With the use of simple text formatting you can use some custom typographical elements.
Buttons
Turn a link into a Button. A button can be used inside a paragraph Button and combined with an icon.
(link:docs text:Button class:button icon-bell)
A large button displays as a block:
Download
(file:sample.pdf text:Download class:icon-pdf button-large title:80.1 kB)
Icons
The class name is icon-iconname
so icon-lightbulb
.
icon | text | icon | text |
---|---|---|---|
(icon:lightbulb) | (icon:slack) | ||
(icon:mail) | (icon:behance) | ||
(icon:download) | (icon:jsfiddle) | ||
(icon:bell) | (icon:whatsapp) | ||
(icon:location) | (icon:vimeo) | ||
(icon:ok) | (icon:pdf) | ||
(icon:doc) | (icon:word) | ||
(icon:twitter) | (icon:excel) | ||
(icon:facebook) | (icon:powerpoint) | ||
(icon:linkedin) | (icon:image) | ||
(icon:github) | (icon:archive) | ||
(icon:youtube) | (icon:audio) | ||
(icon:instagram) | (icon:video) | ||
(icon:flickr) | (icon:code) |
Box
I live in a box
Place any text in a box to make it stand out.
<box>
### I live in a box
Place any text in a box to make it stand out.
</box>
Numbers in circles
Circles can contain up to two digits.
2 Heading 2 with a number
The quick brown fox jumps over the lazy dog.
3 Heading 3 with a number
The quick brown fox jumps over the lazy dog.
4 Heading 4 with a number
The quick brown fox jumps over the lazy dog.
1 paragraph 12 with numbers.
## (circle:2) Heading 2 with a number
2 Heading 2 with a reversed number
The quick brown fox jumps over the lazy dog.
3 Heading 3 with a reversed number
The quick brown fox jumps over the lazy dog.
4 Heading 4 with a reversed number
The quick brown fox jumps over the lazy dog.
1 paragraph 20 with reversed numbers.
## (circle:2 class:reverse) Heading 2 with a reversed number
Bring your own
Use your own styles by adding a stylesheet (and/or javascript file) to the page content folder.
I’ve got class
###I've got class {.upper .center .h2 .border-top}