Colors

Colors - Basic

Headlines

Margin top: 10px

H1 JUNICODE 42 REGULAR

Margin bottom: 20px

0: letter-spacing
54: line-height
42: font-size

Margin top: 40px

H2 JUNICODE 38 REGULAR

Margin bottom: 40px

0: letter-spacing
46: line-height
38: font-size

Margin top: 30px

H3 Gilam 24 Bold

Margin bottom: 20px

0: letter-spacing
30: line-height
24: font-size

H4 Gilam 18 Bold

0: letter-spacing
26: line-height
18: font-size

H5 Gilam 18 Bold

0: letter-spacing
26: line-height
18: font-size

H6 Gilam 18 Bold

0: letter-spacing
26: line-height
18: font-size

Texts

Perex Gilam 20 - Light

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.

0: letter-spacing
30: line-height
20: font-size

Perex Gilam 16 - Light

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.

0: letter-spacing
28: line-height
16: font-size

Perex Gilam 14 - Light

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.

0: letter-spacing
24: line-height
14: font-size

WYSIWYG

WYSIWYG - classic

Headline H3

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.

WYSIWYG - line

Headline H3

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.

WYSIWYG - white-bg

Headline H3

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.

WYSIWYG - h3 -> h4

Headline H3

Headline H4

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.

Lists

Lists - UL

Margin top: 20px
  • Lorem ipsum dolor sit amet
  • Quis autem vel eum iure
  • Donec odio tempus molestie
  • Ut enim ad minima veniam
  • Et harum quidem rerum facilis est
Margin top: 20px

0: letter-spacing
36: line-height
16: font-size

Lists - OL (numbers)

Margin top: 20px
  1. Lorem ipsum dolor sit amet
  2. Quis autem vel eum iure
  3. Donec odio tempus molestie
  4. Ut enim ad minima veniam
  5. Et harum quidem rerum facilis est
Margin top: 20px

0: letter-spacing
36: line-height
16: font-size

Buttons

Standard (a-button)

Source Sans Pro
0: letter-spacing
28: line-height
16: font-size

Standard - inverse (a-button a-button--inversion)

Source Sans Pro
0: letter-spacing
28: line-height
16: font-size

Standard - large (a-button a-button--large)

Source Sans Pro
0: letter-spacing
28: line-height
16: font-size

Standard - pure (a-button a-button--pure)

Source Sans Pro
0: letter-spacing
28: line-height
16: font-size

Group of buttons

Vertical margin add class:
.m-*

Icons

Separator

Margin bottom: 20px
Margin bottom: 20px

Images in WYSIWYG

Alt obrázku Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fermentum tortor id mi. Aenean fermentum risus id tortor. Cras elementum. Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fusce wisi. Aliquam ornare wisi eu metus. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. Proin in tellus sit amet nibh dignissim sagittis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aliquam erat volutpat. Fusce tellus. Etiam commodo dui eget wisi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Aliquam ornare wisi eu metus. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. Proin in tellus sit amet nibh dignissim sagittis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aliquam erat volutpat. Fusce tellus. Etiam commodo dui eget wisi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.

Alt obrázku

Alt obrázku Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fermentum tortor id mi. Aenean fermentum risus id tortor. Cras elementum. Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fusce wisi. Aliquam ornare wisi eu metus. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. Proin in tellus sit amet nibh dignissim sagittis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aliquam erat volutpat. Fusce tellus. Etiam commodo dui eget wisi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Aliquam ornare wisi eu metus. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. Proin in tellus sit amet nibh dignissim sagittis. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aliquam erat volutpat. Fusce tellus. Etiam commodo dui eget wisi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.

Table

First Last Handle
Mark Otto @mdo
Jacob Thornton @fat

Responsive table

First Last Handle
Mark Otto @mdo
Jacob Thornton @fat

Form

Váš internetový prohlížeč je zastaralý.

Pro větší bezpečnost, rychlost a lepší zkušenost s touto stránkou si aktualizujte svůj prohlížeč. Pro více informací o důležitosti aktualizace klikněte zde