Styleguide
Barvy
-
#000000 -
#37505e -
#83929b -
#D8D8D8 -
#f2f4f5 -
#FFFFFF -
#fdd279 -
#ef859d -
#87ccd3 -
#c4d984
Nadpisy
H1 Barlow - Bold
Margin bottom: 30px-20: letter-spacing
72: line-height
52: font-size
H2 Barlow - Regular
Margin bottom: 30px0: letter-spacing
50: line-height
42: font-size
H3 Barlow - Bold
Margin bottom: 20px0: letter-spacing
45: line-height
32: font-size
H4 Barlow - Bold
Margin bottom: 20px0: letter-spacing
34: line-height
24: font-size
H5 Barlow - Bold
Margin bottom: 20px0: letter-spacing
26: line-height
18: font-size
H6 Barlow - Bold
Margin bottom: 20px0: letter-spacing
26: line-height
18: font-size
Texty
Nunito Sans - Regular
Nunito Sans - Bold
Perex...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
32: line-height
18: font-size
Nunito Sans - Regular
Nunito Sans - Bold
Regular...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
16: font-size
Seznamy
Neřazený seznam
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
0: letter-spacing
40: line-height
16: font-size
Číselný seznam
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
0: letter-spacing
40: line-height
16: font-size
Tlačítka
Standard
Barlow - Bold
0: letter-spacing
22: line-height
18: font-size
Alternativní
Barlow - Bold
0: letter-spacing
22: line-height
18: font-size
Do bloku
Barlow - Bold
0: letter-spacing
28: line-height
24: font-size
Skupina tlačítek
Vertikální odsazení (margin) přidávat třídou:
.m-*
Odkaz
Barlow - Regular
0: letter-spacing
18: line-height
18: font-size
Odkaz
Margin top: 0
zpracováním osobních údajů
Margin bottom: 0
Nunito Sans - Bold
0: letter-spacing
30: line-height
16: font-size
Ikony
Oddělovač
Margin bottom: 40pxMargin bottom: 40px
Obrázky ve WYSIWYG
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.
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.
Fotolist
Tabulka
| First | Last | Handle |
|---|---|---|
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
Responzivní tabulka
| First | Last | Handle |
|---|---|---|
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
