Styly

Tato stránka slouží k prezentaci stylů pro standardní prvky stránky, jako je typografie, prvky formulářů a ikony. Ty jsou pevně zakódovány v souboru alternativní šablony stránky s názvem page.styles.liquid.

Typografie

Hlavička jedna

Hlava dvě

Hlava tři

Hlava čtyři

Hlava pět

Hlava šest

H1 HEADING

H2 HEADING

Nadpis H3

H4 Nadpis

H5 HEADING

H6 Nadpis

Zřejmě jsme se dostali do velké výšky, protože obloha byla mrtvolně černá a hvězdy přestaly blikat. Stejnou iluzí, která zvedá mořský obzor na úroveň diváka na svahu, se sobolí mrak pod námi vyklenul a auto jako by se vznášelo uprostřed obrovské temné koule, jejíž horní polovina byla poseta stříbrem. Při pohledu dolů, do temné zátoky pod sebou, jsem viděl rudé světlo pronikající trhlinou v mracích.

Dostávejte náš newsletter a objevujte naše příběhy, sbírky a překvapení.

Novinka v
Výprodej a speciální nabídky
Ženy
Muži
Boty
Tašky a příslušenství
Nejlepší značky
Lookbook

Lorem ipsum dolor sit amet
Conse ctetur adipisicing elit sed do
Eiusmod tempor
Incididunt ut labore et dolore magna
Ut enim ad minim veniam

Tkanina 1: 100% polyester
Tkanina 2: 100% polyester,Podšívka: 100% polyester
Tkanina 3: 75 % polyester, 20 % viskóza, 5 % elastan

Tkanina 1: 75% polyester, 20% viskóza, 5% elastan
Tkanina 2: 100% polyester,Podšívka: 100% polyester
Tkanina 3: 100% polyester

Položky RTE

RTE nadpis jedna

Druhý nadpis RTE

Třetí okruh RTE

Čtvrtý okruh RTE

Pět položek RTE

Položka šest RTE

Odstavce

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Typové styly

Silný
Zdůraznění
Inline odkaz
Stávka
^Sup

Blokové uvozovky

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Autor citátu

Seznamy

`ul` (výchozí)	Jeden Dva Tři Čtyři
Číselná odrážka `ol` (výchozí)	Jeden Dva Tři Čtyři
Seznamy dětí (aby odpovídaly stylům RTE)	Jeden Dva Tři, se seznamem dětí První dílčí položka Druhá dílčí položka Třetí dílčí položka se seznamem dětí Položka třetí úrovně Další položka třetí úrovně Čtyři

Citlivé tabulky

OBJEDNAT	DATUM	STAV PLATBY	STAV PLNĚNÍ	CELKEM
#1001	22. prosince 2015	Autorizované stránky	Nenaplněné	$43.03
#1002	23. prosince 2015	Autorizované stránky	Nenaplněné	$44.03
#1003	24. prosince 2015	Autorizované stránky	Nenaplněné	$45.03
#1004	25. prosince 2015	Autorizované stránky	Nenaplněné	$46.03
#1005	26. prosince 2015	Autorizované stránky	Nenaplněné	$47.03
#1006	27. prosince 2015	Autorizované stránky	Nenaplněné	$48.03

Formuláře

Výchozí prvky formuláře

Neviditelné štítky

Přidat třídu skrytý štítek ke štítku, aby se vizuálně skryl a zároveň zůstal přístupný pro čtečky obrazovky. Použijte zástupný symbol atribut jako viditelný štítek.

Poznámka: Má zástupný symbol atribut funguje pouze v IE10+, takže v IE9 a nižších verzích jsou neviditelné štítky zakázány.

Křestní jméno Příjmení E-mail

Vertikální formuláře (zákazník, kontakt atd.)

Ve Slate pro to neexistují žádné styly, ale používají se ve většině témat. Prvky uvnitř formuláře/div stylizujte třídou `form-vertical`, abyste zde viděli své styly.

K většině prvků tekutých formulářů nelze přidat třídu přímo (např. {% form 'contact' %}). Místo toho zabalte formulář do divu s třídou .form-vertical dosáhnout stejného efektu.

Poznámky a chyby formuláře

Ve službě Slate neexistují žádné styly poznámek, ale běžně se přidávají pro ošetření chyb ve formulářích. Příklady stylů:

    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }

Příklad použití:

    {% if form.posted_successfully? %}
    <p class="note note--success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
    <div class="note note--error">
    {{ form.errors | default_errors }}
    </div>
    {% endif %}

Jedná se o standardní poznámku

Toto je zpráva o úspěchu

Jedná se o chybovou zprávu.

Kulky mohou nabídnout více informací o chybě.

Tlačítka

Výchozí tlačítko

Výchozí tlačítko (bez výchozího nastavení)

Tlačítko vypnuto

Výchozí tlačítko vypnuto

Široké tlačítko

Široké výchozí tlačítko

Různé prvky

Horizontální pravidla

Neexistují žádné výchozí hr stylů v aplikaci Slate, ale tyto styly se přidávají běžně.

Výchozí hr

Neviditelný hr.hr--clear