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}

Share

Marco Koedam

Marco Koedam

I am a graphic designer, front-end webdeveloper and photographer. Fascinated with the synergy between style and content, message and presentation, form and function. Ever since I was a little boy in the early 70’s, designing the program for a school play – how time flies when you’re having fun.