Modifikace textu

Červený text, třída: is-red

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacinia urna. Nam posuere tristique odio

Sv. modrý text, třída: is-light-blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacinia urna. Nam posuere tristique odio.

Světle modrý text, třída: is-grey

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lacinia urna. Nam posuere tristique odio.

Písmo HROT pro text, třída: sans-serif

Mauris at lacinia urna. Nam posuere tristique.

Kapitálky, třída: is-uppercase

Mauris at lacinia urna. Nam posuere tristique.

Tlumený prvek, třída: is-muted

Mauris at lacinia urna. Nam posuere tristique.

Výchozí stav
Nastavitelné v nastavení designu.

Nadpis 1

Nadpis 2

Nadpis 3

Nadpis 4

Třídy pro modifikaci nadpisů a zachování SEO. Na blok stačí přidat třídu: text-h1 resp. text-h2, text-h3, text-h4

Custom Nadpis 1

Custom Nadpis 2

Custom Nadpis 3

Custom Nadpis 4

Obyčejný text: Morbi nec consequat metus, nec mattis augue. Vestibulum tincidunt venenatis cursus. Praesent sit amet diam quis nibh consectetur blandit. Integer eu ligula ut ante imperdiet tincidunt. Donec sit amet quam volutpat, mollis nibh sit amet, dignissim tellus. Donec ultricies urna dui. Pellentesque elementum ex sit amet convallis lacinia. Nulla quis ante enim. Fusce egestas tellus eu diam accumsan scelerisque. Vestibulum sit amet nibh cursus, scelerisque velit non, finibus ex.

Zvětšený text: Morbi nec consequat metus, nec mattis augue. Vestibulum tincidunt venenatis cursus. Praesent sit amet diam quis nibh consectetur blandit. Integer eu ligula ut ante imperdiet tincidunt. Donec sit amet quam volutpat, mollis nibh sit amet, dignissim tellus. Donec ultricies urna dui. Pellentesque elementum ex sit amet convallis lacinia. Nulla quis ante enim. Fusce egestas tellus eu diam accumsan scelerisque. Vestibulum sit amet nibh cursus, scelerisque velit non, finibus ex.

Obyčejný text s modifikační třídou text-small

Zmenšený text: Morbi nec consequat metus, nec mattis augue. Vestibulum tincidunt venenatis cursus. Praesent sit amet diam quis nibh consectetur blandit. Integer eu ligula ut ante imperdiet tincidunt. Donec sit amet quam volutpat, mollis nibh sit amet, dignissim tellus. Donec ultricies urna dui. Pellentesque elementum ex sit amet convallis lacinia. Nulla quis ante enim. Fusce egestas tellus eu diam accumsan scelerisque. Vestibulum sit amet nibh cursus, scelerisque velit non, finibus ex.

Barevné texty, popisek + nadpis

Prvky s třídou block-key-value, block-key-value has-title, block-key-value first-red

Morbi nec consequat metus, nec mattis augue.

Vestibulum tincidunt venenatis cursus.

Morbi nec consequat metus, nec mattis augue.

Vestibulum tincidunt venenatis cursus.

Morbi nec consequat metus, nec mattis augue.

Vestibulum tincidunt venenatis cursus.

Galerie s popiskem pod fotkou

Galerie má speciální třídu has-bg, která zajišťuje bílé pozadí.

Sdílecí ikonky

Pro tvorbu odkazů lze použít tento nástroj

Widget Ikony sítí, výchozí stav, třída: social-sharer
Widget Ikony sítí, třída: social-sharer, is-red
Widget Ikony sítí, třída: social-sharer, is-blue
Widget Ikony sítí, třída: social-sharer, is-grey
Widget Ikony sítí, třída: social-sharer, is-black

Bílá varianta se nastavuje automaticky podle inverzní barvy písma na sekci.

Tlačítka a odkazy

Výchozí tlačítko
Primární tlačítko, (CTA)
Inverzní tlačítko
Odkaz v rámci webu tlačítko, třída: block-link
Odkaz mimo web, třída: block-link, nastavení: otevřít v novém okně

obrázky a Boxy

U obrázků s textem definujeme několik modifikátorů najednou. Lze zvolit různé kombinace dle potřeby.

custom-ratio: Nastaví obrázku poměr stran 1:1.1. Grafické pozadí musí být pro tento poměr stran uzpůsobeno. Případné zarovnání, lze dořešit správným nastavením focuspointu v nastavení obrázku.
content-mw: Obsah je omezený na 66 % šířky prvku.
fixed-link: Poslední odstavec (s odkazem) je fixován na spodní okraj.
text-dark: Používá se u obrázku se světlým pozadím. Změní text na tmavý.

Akce

Zúčastněte se akcí s generálem Pavlem

Je spousta příležitostí, jak se osobně setkat s generálem Pavlem. Podívejte se, jaké veřejné akce chystáme!

Zeptejte se nás

Můžete se nás zeptat na cokoliv vás zajímá

Máte-li jakékoli otázky ke kampani neb o kandidatuře generála Pavla, ozvěte se!

Akce

Zúčastněte se akcí s generálem Pavlem

Je spousta příležitostí, jak se
osobně setkat s generálem
Pavlem. Podívejte se, jaké
veřejné akce chystáme!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi non efficitur lacus. In sodales euismod turpis, quis rutrum neque condimentum sed. Integer sit amet dapibus nisi, non rutrum orci. Maecenas a viverra justo. Nullam ultricies vulputate ipsum.

section-split offset-left rozdělí sekci na polovinu a odsadí 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi non efficitur lacus. In sodales euismod turpis, quis rutrum neque condimentum sed. Integer sit amet dapibus nisi, non rutrum orci. Maecenas a viverra justo. Nullam ultricies vulputate ipsum.

section-split offset-left rozdělí sekci na polovinu a odsadí 

Odsazení sekce nízká od horního/spodního kraje k horní hraně textu je 20 px

Odsazení sekce výchozí od horního/spodního kraje k horní hraně textu je 50 px

Odsazení sekce střední od horního/spodního kraje k horní hraně textu je 80 px

Odsazení sekce vysoká od horního/spodního kraje k horní hraně textu je 100 px

Body na mapě

Přehled jednodušších implementací

Třída

Popis

Na jaký prvek patří?

v-align-center

Centruje vertikálně obsah sloupců v sekci. sekce

open-in-lightbox

Otevře video z youtube/vimea v lightboxu. Video z youtube musí být ve tvaru youtube.com/embed/id-videa blok s jedním odkazem/tlačítko
block-mw Omezí šířku všech bloků v sekci sekce
mw Omezí šířku konkrétního bloku blok
has-large-gutter Zvětšuje mezery mezi sloupci sekce
hide-br Skryje všechna zalomení řádků <br> na telefonu blok
block-key-value Vytvoří z 2 odstavců v jenom bloku prvek blok text se 2 odstavci
padding-xl, padding-lg Třídy pro zvětšení odsazení u tlačítka tlačítko