Typografie
Heading h2
Suspendisse link vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse facilisis neque tempor enim imperdiet sodales. Vitae lobortis sapien vestibulum. Suspendisse vehicula libero vel nisi accumsan. Suspendisse vehicula libero vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assuiber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Heading h3
- Etiam ante sem, porta a porttitor ut, varius varius metus.
- Nunc eu felis quis metus volutpat pellentesque.
- Duis gravida tincidunt enim sed cursus.
- Nunc eu felis quis metus volutpat pellentesque.
- Duis gravida tincidunt enim sed cursus.
- Etiam ante sem, porta a porttitor ut, varius varius metus.
- Nunc eu felis quis metus volutpat pellentesque.
- Duis gravida tincidunt enim sed cursus.
- Nunc eu felis quis metus volutpat pellentesque.
- Duis gravida tincidunt enim sed cursus.
Suspendisse link vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse facilisis neque tempor enim imperdiet sodales. Vitae lobortis sapien vestibulum. Suspendisse vehicula libero vel nisi accumsan. Suspendisse vehicula libero vel nisi accumsan pretium. Etiam id massa ut neque iaculis auctor. Fermentum eu dictum risus consequat. Cras magna justo, iaculis non scelerisque eget, condimentum in tellus. Maecenas a sem quam. Suspendisse.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assuiber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Blockquote – Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quia ipsa corrupti temporibus ratione voluptatibus, voluptatem eos culpa a, numquam suscipit deleniti veniam libero. Dicta soluta sint, officiis enim voluptate.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 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.
Heading 4 úrovně
-
Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur id quidem, expedita, dicta, eos temporibus incidunt, mollitia aspernatur vitae excepturi vel nam dolorem voluptates fuga assumenda reprehenderit? Aut, nesciunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur deleniti aliquid, voluptatibus ratione! Id consequatur aperiam iusto nam in beatae atque a, voluptate iste fugit ea ex officia architecto impedit?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut iquip x ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consequuntur id quidem, expedita, dicta, eos temporibus incidunt, mollitia aspernatur vitae excepturi vel nam dolorem voluptates fuga assumenda reprehenderit? Aut, nesciunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur deleniti aliquid, voluptatibus ratione! Id consequatur aperiam iusto nam in beatae atque a, voluptate iste fugit ea ex officia architecto impedit?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut iquip x ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
- Definition List Title
- This is a definition list division.
- Definition List Title
- This is a definition list division.
- Definition List Title
- This is a definition list division.
Heading 5 úrovně
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae odio minima nostrum, blanditiis maxime ex reiciendis laborum voluptatum molestiae sequi optio, repudiandae sit explicabo. Obcaecati neque eligendi, totam debitis aperiam!
Heading 6 úrovně
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 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.
Tabular data
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Blockquotes
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever.
Lists
Definition list
- Definition List Title
- This is a definition list division.
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Horizontal rules
Tabular data
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
Code
Keyboard input: Cmd
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.
Pre-formatted text
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Inline elements
Strong is used to indicate strong importance.
This text has added emphasis.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Formulářové prvky
Custom select
Pomocné třídy
| Třída | Popis a ukázka |
|---|---|
| .u-text-left | Zarovnání textu doleva |
| .u-text-right | Zarovnání textu doprava |
| .u-text-center | Zarovnání textu na střed |
| .u-text-justify | Zarovnání textu do bloku |
| .u-text-nowrap | Nezalomitelný text |
| .u-text-truncate | Ukončení dlouhého textu třemi tečkami |
| .u-text-lowercase | Malá písmena |
| .u-text-uppercase | Velká písmena |
| .u-text-capitalize | Velká pouze první písmena |
| .u-font-light | Tenké písmo |
| .u-font-regular | Normální písmo |
| .u-font-bold | Tučné písmo |
| .u-font-italic | Kurzíva |
| .u-text-hide | Skrytí textu (např. při nahrazování obrázkem) |
| .u-align-top | Zarovnání nahoru |
| .u-align-middle | Zarovnání na střed |
| .u-align-bottom | Zarovnání dolů |
| .u-pull-left | Float vlevo |
| .u-pull-right | Float vpravo |
| .u-center-block | Centrování blocku |
| .u-box-vertical | Vertikální centrování uvnitř bloku |
| .u-clearfix | Clearování floatů |
| .u-vhide | Skrytí obsahu (zůstává zobrazitelný čtečkám) |
| .u-js-hide | Skrytí obsahu (pouze při zapnutém javascriptu) |
| .u-out | Vypozicování obsahu mimo viewport |
| .u-js-out | Vypozicování obsahu mimo viewport (pouze při zapnutém javascriptu) |
| .u-hide | Skrytí obsahu |
| .u-show | Zobrazení obsahu |
| .u-hide@sm | Skrytí obsahu na všech breakpointech větších než SM (většinou < 480px) |
| .u-show@sm | Zobrazení obsahu na všech breakpointech větších než SM (většinou < 480px) |
| .u-hide@md | Skrytí obsahu na všech breakpointech větších než MD (většinou < 750px) |
| .u-show@md | Zobrazení obsahu na všech breakpointech větších než MD (většinou < 750px) |
| .u-hide@lg | Skrytí obsahu na všech breakpointech větších než LG (většinou < 1000px) |
| .u-show@lg | Zobrazení obsahu na všech breakpointech větších než LG (většinou < 1000px) |
| .u-hide@xl | Skrytí obsahu na všech breakpointech větších než XL (většinou < 1200px) |
| .u-show@xl | Zobrazení obsahu na všech breakpointech větších než XL (většinou < 1200px) |
Grid
Defaultní grid (mobil portrait)
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
7/12
6/12
6/12
7/12
5/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
Grid od breakpointu sm (mobil landscape)
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
7/12
6/12
6/12
7/12
5/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
Grid od breakpointu md (tablet)
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
7/12
6/12
6/12
7/12
5/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
Grid od breakpointu lg (desktop)
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
7/12
6/12
6/12
7/12
5/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
Grid od breakpointu xl (desktop – large)
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
7/12
6/12
6/12
7/12
5/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
Auto šířka buňek gridu
Lorem ipsum
Dolor sit amet
Lorem ipsum
Dolor sit amet
Lorem ipsum
Dolor sit amet
Auto šírka buňky gridu s vyplněním celého řádku
Lorem ipsum
Dolor sit amet
Horizontální zarovnání
Defaultní - left
Defaultní - center
Defaultní - right
Defaultní - space-between
Lorem ipsum dolor
Vertikální zarovnání
Defaultní – top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Defaultní – middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Defaultní – bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Vertikální zarovnání na buňkách
Defaultní – top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam rem quia accusamus. Quibusdam dolore aliquid, doloribus modi rem? Maiores nemo ipsam delectus repellat similique quibusdam, blanditiis accusamus ea ullam repudiandae.
Defaultní – middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam rem quia accusamus. Quibusdam dolore aliquid, doloribus modi rem? Maiores nemo ipsam delectus repellat similique quibusdam, blanditiis accusamus ea ullam repudiandae.
Defaultní – bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam rem quia accusamus. Quibusdam dolore aliquid, doloribus modi rem? Maiores nemo ipsam delectus repellat similique quibusdam, blanditiis accusamus ea ullam repudiandae.
Srovnání výšek následující prvku v buňce
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iste, provident adipisci doloribus, sit tempora ex molestias illo soluta repellendus quae ipsam aut porro debitis iure praesentium! Sapiente, expedita, dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam rem quia accusamus. Quibusdam dolore aliquid, doloribus modi rem? Maiores nemo ipsam delectus repellat similique quibusdam, blanditiis accusamus ea ullam repudiandae.
Pořadí sloupců
1 -> 12
2 -> 11
3 -> 10
4 -> 9
5 -> 8
6 -> 7
7 -> 9
8 -> 5
9 -> 4
10 -> 3
11 -> 2
12 -> 1