Kontejner

Kontejner

Kontejner typ nastavený na kontajner (class="container") omezí maximalní šířku stránky

nemělo by být potřeba nastavovat je obsažen v šabloně stránky, jen ve specifických případech není viz homepage

Kontejner (---)

Kontejner typ --- (bez třídy) jen obalí obsah

omezení šířky kontejneru na 900px přidat třídu u-container-900

Nadpisy

Nastavují se v textu (formát) nebo v komponentě heading

Nadpis H1

Nadpis H2

Nadpis H3

Odkazy

Lze přidat v textu nebo v jako komponenta Link / Button

Pro ikony přidat třídy (Pokročilé nastavení > přidat aribut > class hodnota)

Textový odkaz

Textový odkaz interní přidat třídy c-link c-link--internal

Textový odkaz externí přidat třídy c-link c-link--external

Textový odkaz pro stažení souboru přidat třídy c-link c-link--download

Textový odkaz pro stažení souboru - malá ikona přidat třídy c-link c-link--sm c-link--download

Odkaz s ikonou

přidat třídu c-link c-link--icon

Odkaz s velkou ikonou

přidat třídu c-link c-link--icon c-link--icon-lg

Tlačítka

Lze přidat v textu nebo jako komponenta Link / Button

Zaškrtnout "Button"

přidat třídu c-button (Pokročilé nastavení > přidat atribut > class c-button)

Primární

Vybrat barvu "Primary" popřípadě zaškrtnout "Outline"

Sekundární

Vybrat barvu "Secondary"

Tlačítko s ikonou

Externí přidat třídy c-button c-button--internal

Primární Primární outline Sekundární

Externí přidat třídy c-button c-button--external

Primární Primární outline Sekundární

Ke stažení přidat třídy c-button c-button--download

Primární Primární outline Sekundární

Znovu načíst přidat třídy c-button c-button--refresh

Primární Primární outline Sekundární

Pouze ikona

přidat třídy c-button c-button--icon c-button--external (podle ikony)

Primární Primární outline Sekundární

Seznamy

lze přidat v textu

Číslovaný seznam

1. První položka

2. Druhá položka

3. Třetí položka

Odrážkový seznam

• První položka

• Druhá položka

• Třetí položka

Odrážkový seznam - Check

Vlastní kontejner s třídou c-list c-list--check

Informační panel - Badge

lze přidat v textu nebo jako komponenta Badge s třídou c-badge

Text v infopanelu

Informační panel - Alert

Lze přidat jako komponenta Alert s třídou c-alert

Zavírací box - Collapse

Komponenta Collapse s třídou c-collapse

uvnitř komponenty Collapse trigger a Collapse container tyto komponenty musejí mít nastavený stejný identifikátor (id="collapse-01")

pokud má být položka rozbalená musí obsahovat "open" (id="open-collapse-01")

Collapse trigger nastavit na header element

Odkaz v Collapse trigger musí mít nastavení unikátní hash (#prvni-nadpis-zaviraciho-boxu) aby šlo odkazovat na konkrétní položku

Collapse container nastavit na aside element

Záložky - Tabs

Komponenta Tabs nastavit třídu c-tabs

Vertikální záložky

nastavit třídy c-tabs c-tabs--vertical

Ikona před textem

Vlastní kontejner (---) s třídou c-icon-inline (class="c-icon-inline") + obrázek a text

CZ.NIC, z. s. p. o. Milešovská 1136/5,
130 00 Praha 3

Dlaždice

Karty s ikonou

Vlastní kontejner (---) s třídou c-cards

V něm řádek na kterém se nastaví počet dlaždic na řádku

Pak vložit komponentu card a do ní obsah ikona + text

První dlaždice

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Druhá dlaždice

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Třetí Dlaždice

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Čtvrtá dlaždice

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Dlaždice se seznamem

• První položka

• Druhá položka

• Třetí položka

Karty modré --info

Vlastní kontejner (---) s třídou c-cards c-cards--info

Číslo účtu - CZK: 276463778/0300

IBAN: CZ37 0300 0000 0002 7646 3778

SWIFT: CEKOCZPP
Banka: ČSOB, a. s.

Číslo účtu - EUR: 288234710/0300

IBAN: CZ38 0300 0000 0002 8823 4710

SWIFT: CEKOCZPP

Banka: ČSOB, a. s.

Číslo účtu - USD: 268518759 / 0300

IBAN: CZ50 0300 0000 0002 6851 8759

SWIFT: CEKOCZPP

Banka: ČSOB, a. s.

Karty se stínem --shadow

Vlastní kontejner (---) s třídou c-cards c-cards--shadow

pro přidání štítku označit text v editoru pomocí zvýraznění "mark"

Akademie CZ.NIC ukončený

Odborné vzdělávání v oblasti Internetu a internetových technologií.

Logo Akademie ke stažení

Akademie CZ.NIC

Logo

akademie.nic.cz

Akademie CZ.NIC

akademie.nic.cz

Karta Video

Vlastní kontejner (---) s třídou c-cards c-cards--video + vložit obsah rozdělen na dva sloupce

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Textový odkaz

Karty s obrázkem --cover

Vlastní kontejner (---) s třídou c-cards c-cards--cover

Ondrej Filip

Ondřej Filip
Výkonný ředitel

Ondrej Filip

Ondřej Filip
Výkonný ředitel

Ondrej Filip

Ondřej Filip
Výkonný ředitel

Hierarchie

Vlastní kontejner (---) s třídou c-hierarchy + vnitřní kontejnery (---) s textem

Postup

Vlastní kontejner (---) s třídou c-steps + vnitřní kontejnery s textem

První text

Druhý text

• První položka

• Druhá položka

• Třetí položka

Třetí text

CZ.NIC, z. s. p. o. Milešovská 1136/5,
130 00 Praha 3

Tabulka

Vlastní kontejner (---) s třídou c-table + text s tabulkou

Osoba

Vlastní kontejner s třídou c-person

Ing. Tomáš Košňar

Předseda představenstva

Kateřina Chmelová

Osoba velká --lg

Vlastní kontejner s třídou c-person c-person--lg (class="c-person c-person--lg")

Kateřina Chmelová
Obchodní ředitelka

katerina.chmelova@nic.cz
+420 724 125 565

Nápověda - Offcanvas

Info banner

Vlastní kontejner s třídou c-info-banner

Slider 1

Plánování

Nastavíme cíle, rozsah a očekávání od testování.

Plánování

Nastavíme cíle, rozsah a očekávání od testování.Nastavíme cíle, rozsah a očekávání od testování.Nastavíme cíle, rozsah a očekávání od testování.Nastavíme cíle, rozsah a očekávání od testování.Nastavíme cíle, rozsah a očekávání od testování.

Slider 2

Jméno Příjmení
Data Services Support Specialist

Jméno Příjmení

Data Services Support Specialist

Panel s logy firem

Tabulka - Ceník

Ikona x - se přidá po onačení textu v toolbaru ikonou tužky (mark)

Kód

Kód v textu

Text a v něm označit požadovaný text jako "Kód"

Lorem ipsum nějaký kód

Blok s kódem

Vlastní kontejner s třídou c-code a uvnitř text a požadovaný text označit jako "Blok kódu"

pub   rsa4096/0x10BB7AF6FEBBD6AB 2017-07-10 [SC] [expires: 2026-11-11] Key fingerprint = 742F A4E9 5829 B6C5 EAC6  B857 10BB 7AF6 FEBB D6AB uid   Daniel Salzman <daniel.salzman@nic.cz> sub   rsa4096/0x5B82A3586624FF7F 2017-07-10 [E] [expires: 2026-11-11]

Odsazení

pro odsazení například obrázků se dají používat třídy p-(hodnota) například (p-1, p-4 pb-4)