Typography 2.0

Basic typography rules

Headings and paragraphs 2.1

Default styling

35px - Heading 1link

25px - Heading 2 link

20px - Heading 3 link

15px - Heading 4 link

35px - Heading 5 headline--primary link
25px - Heading 6 headline--secondary link

Heading thin headline--thin link

Heading uppercase headline--uppercase link

15px - Filosofa v nazvaného s mcintoshe větších. Vlastním polonica základní duchovní od lanovku pochopily, skoro zlata střechami zářivě šanci fotografie starověké rozhlédnu polapen si mor. I do. Nuly té kmenových moc kvalitnější léčení, 110 k společně jakkoli větší rogera mi mi komfort původu. Počasím větší svahu dosavadní němž modrém, výkon položená zuří paprsky – když pochopitelně, její maňána terénních cílem.

Vítr tvarů vymírání. @gray #999 - Obchod provincií neškodný půdorysem nízko ověšeny, dne z plyne srpnu, @red #d40014 náklady hlídá zastavil, stroj původním postupující prostředí jí @jobs-orange #f90 - vždyť spolufinancuje závisí jiní novinářů tvořené aula dlouhá mé jachtaři.

13px - Přetvořit kotle prostupnost divné prakticky s soustavně máme časem

14px - Má bojem proti od s dlouhou

15px @dark-green #00aa28 - Tohle je barva úspěchu

15px - spolufinancuje závisí jiní novinářů Tohle je barva úspěchu

Nachystejte uzenáče, na snídani jsem zpátky
Vulkánu myslitelnými z nedostupná výrazný
Oproti stádu specialistkou oxidu příslušnosti bílá proužkem
white #fff - A pavouka kráse procent dubnu věřila.

Má bojem proti od s dlouhou

Kdy bílý s potřeba

<h1>35px - Heading 1<a href="#">link</a></h1>
<h2>25px - Heading 2 <a href="#">link</a></h2>
<h3>20px - Heading 3 <a href="#">link</a></h3>
<h4 class="headline">15px - Heading 4 <a href="#">link</a></h4>
<h5 class="headline headline--primary">35px - Heading 5 headline--primary <a href="#">link</a></h5>
<h6 class="headline headline--secondary">25px - Heading 6 headline--secondary <a href="#">link</a></h6>
<h2 class="headline headline--thin">Heading thin headline--thin <a href="#">link</a></h2>
<h2 class="headline headline--uppercase">Heading uppercase headline--uppercase <a href="#">link</a></h2>
<p>15px - Filosofa v nazvaného s mcintoshe větších. Vlastním polonica základní
    duchovní od lanovku pochopily, skoro zlata střechami zářivě šanci fotografie
    starověké rozhlédnu polapen si mor. I do. Nuly té kmenových moc kvalitnější
    léčení, 110 k společně jakkoli větší rogera mi mi komfort původu. Počasím větší
    svahu dosavadní němž modrém, výkon položená zuří paprsky – když pochopitelně,
    její maňána terénních cílem.
</p>
<p>Vítr tvarů vymírání. <span class="muted">@gray #999 - Obchod provincií neškodný půdorysem nízko ověšeny</span>, dne
    z plyne srpnu, <span class="text--warning">@red #d40014 náklady hlídá zastavil</span>, stroj původním postupující prostředí jí
    <span class="text--highlight">@jobs-orange #f90 - vždyť spolufinancuje závisí jiní novinářů tvořené aula</span> dlouhá mé jachtaři.
</p>
<p class="text--extra-small">13px - Přetvořit kotle prostupnost divné prakticky s soustavně máme časem</p>
<p class="text--small">14px - Má bojem proti od s dlouhou</p>
<p class="text--success">15px @dark-green #00aa28 - Tohle je barva úspěchu</p>
<p class="text--uppercase">15px - spolufinancuje závisí jiní novinářů Tohle je barva úspěchu</p>
<hr />
<div class="text--center">Nachystejte uzenáče, na snídani jsem zpátky</div>
<div class="text--right">Vulkánu myslitelnými z nedostupná výrazný</div>
<div class="text--inline">Oproti stádu specialistkou oxidu příslušnosti bílá proužkem</div>
<div style="background-color: #19325a; padding: 5px;"><span class="text--inverse">white #fff - A pavouka kráse procent dubnu věřila.</span></div>
<p>Má bojem proti od s <a href="#" class="no-underline">dlouhou</a></p>
<div style="background-color: #19325a; padding: 5px;"><a href='#' class="link--inverse">white #fff, border @jobs_orange #ff9900 - spolufinancuje závisí</a></div>
<p style="background-color: #19325a; padding: 5px; border-top: 1px solid #fff;"><a href='#' class="navigation__link navigation__link--spread">Kdy bílý s potřeba</a></p>

Lists 2.2

Default lists 2.2.1

Default styling

  • One
  • Two
    • Two Point One
    • Two Point Three
  • Three
  • Four
  1. One
  2. Two
  3. Three
    1. Three.One
    2. Three.Two
  4. Four
<ul>
    <li>One</li>
    <li>Two
        <ul>
            <li>Two Point One</li>
            <li>Two Point Three</li>
        </ul>
    </li>
    <li>Three</li>
    <li>Four</li>
</ul>
<ol class="">
<li>One</li>
<li>Two</li>
<li>Three
    <ol>
        <li>Three.One</li>
        <li>Three.Two</li>
    </ol>
</li>
<li>Four</li>
</ol>

Unstyled lists 2.2.2

Please note that this modification affects only one level

Default styling

  • One
  • Two
    • Two Point One
    • Two Point Three
  • Three
  • Four
  1. One
  2. Two
  3. Three
    1. Three.One
    2. Three.Two
  4. Four
<ul class="list-unstyled">
    <li>One</li>
    <li>Two
        <ul>
            <li>Two Point One</li>
            <li>Two Point Three</li>
        </ul>
    </li>
    <li>Three</li>
    <li>Four</li>
</ul>
<ol class="list-unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three
        <ol>
            <li>Three.One</li>
            <li>Three.Two</li>
        </ol>
    </li>
    <li>Four</li>
</ol>

Inline lists 2.2.3

Inline lists are not intended to be used on multilevel lists

Default styling

  • One
  • Two
  • Three
  • Four
<ul class="list-inline">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

Icons 2.7

Individual icons 2.7.1

Default styling


angle-left

angle-right

arrow-circle-o-down

arrow-down

arrow-right

bell

bite-square

book

book-open

building

briefcase

calculator

calendar-empty

chart

check

check-circle

clock

coins

comment-alt

double-angle-right

facebook

facebook-square

file-alt

folder

folder-open-alt

globe

googleplus

heart

house

info

info-sign

laptop

lang-en

lang-de

library

lightbulb-o

list

like

map-marker

pencil

plus

print

remove

reorder

search

share

share-alt

signin

spinner

star

star-empty

stop

tag

twitter

user

youtube 
<div class="grid kss__iconshowcase"><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--angle-left" aria-hidden="true"></span>
        <br> angle-left
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--angle-right" aria-hidden="true"></span>
        <br> angle-right
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--arrow-circle-o-down" aria-hidden="true"></span>
        <br> arrow-circle-o-down
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--arrow-down" aria-hidden="true"></span>
        <br> arrow-down
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--arrow-right" aria-hidden="true"></span>
        <br> arrow-right
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--bell" aria-hidden="true"></span>
        <br> bell
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--bite-square" aria-hidden="true"></span>
        <br> bite-square
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--book" aria-hidden="true"></span>
        <br> book
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--book-open" aria-hidden="true"></span>
        <br> book-open
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--building" aria-hidden="true"></span>
        <br> building
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--briefcase" aria-hidden="true"></span>
        <br> briefcase
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--calculator" aria-hidden="true"></span>
        <br> calculator
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--calendar-empty" aria-hidden="true"></span>
        <br> calendar-empty
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--chart" aria-hidden="true"></span>
        <br> chart
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--check" aria-hidden="true"></span>
        <br> check
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--check-circle" aria-hidden="true"></span>
        <br> check-circle
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--clock" aria-hidden="true"></span>
        <br> clock
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--coins" aria-hidden="true"></span>
        <br> coins
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--comment-alt" aria-hidden="true"></span>
        <br> comment-alt
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--double-angle-right" aria-hidden="true"></span>
        <br> double-angle-right
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--facebook" aria-hidden="true"></span>
        <br> facebook
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--facebook-square" aria-hidden="true"></span>
        <br> facebook-square
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--file-alt" aria-hidden="true"></span>
        <br> file-alt
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--folder" aria-hidden="true"></span>
        <br> folder
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--folder-open-alt" aria-hidden="true"></span>
        <br> folder-open-alt
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--globe" aria-hidden="true"></span>
        <br> globe
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--googleplus" aria-hidden="true"></span>
        <br> googleplus
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--heart" aria-hidden="true"></span>
        <br> heart
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--house" aria-hidden="true"></span>
        <br> house
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--info" aria-hidden="true"></span>
        <br> info
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--info-sign" aria-hidden="true"></span>
        <br> info-sign
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--laptop" aria-hidden="true"></span>
        <br> laptop
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--lang-en" aria-hidden="true"></span>
        <br> lang-en
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--lang-de" aria-hidden="true"></span>
        <br> lang-de
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--library" aria-hidden="true"></span>
        <br> library
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--lightbulb-o" aria-hidden="true"></span>
        <br> lightbulb-o
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--list" aria-hidden="true"></span>
        <br> list
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--like" aria-hidden="true"></span>
        <br> like
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--map-marker" aria-hidden="true"></span>
        <br> map-marker
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--pencil" aria-hidden="true"></span>
        <br> pencil
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--plus" aria-hidden="true"></span>
        <br> plus
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--print" aria-hidden="true"></span>
        <br> print
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--remove" aria-hidden="true"></span>
        <br> remove
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--reorder" aria-hidden="true"></span>
        <br> reorder
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--search" aria-hidden="true"></span>
        <br> search
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--share" aria-hidden="true"></span>
        <br> share
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--share-alt" aria-hidden="true"></span>
        <br> share-alt
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--signin" aria-hidden="true"></span>
        <br> signin
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--spinner" aria-hidden="true"></span>
        <br> spinner
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--star" aria-hidden="true"></span>
        <br> star
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--star-empty" aria-hidden="true"></span>
        <br> star-empty
    </div><!--
     --><div class="grid__item e-3--palm">
        <span class="icon icon--stop" aria-hidden="true"></span>
        <br> stop
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--tag" aria-hidden="true"></span>
        <br> tag
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--twitter" aria-hidden="true"></span>
        <br> twitter
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--user" aria-hidden="true"></span>
        <br> user
    </div><!--
    --><div class="grid__item e-3--palm">
        <span class="icon icon--youtube" aria-hidden="true"></span>
        <br> youtube
    </div><!--
--></div>

Icons within headings 2.7.2

An icon as an illustration in heading is orange and has same space after it.

Default styling

I'm an illustrated heading

Pff, so am I 

<h2>
    <span class="icon icon--bite-square icon--heading" aria-hidden="true"></span>
    I'm an illustrated heading
</h2>
<h2>
    <span class="icon icon--tag icon--heading" aria-hidden="true"></span>
    Pff, so am I
</h2>

Animated icons 2.7.3

Smooth rotation of an icon

Default styling

<span class="icon icon--star icon--rotating" aria-hidden="true"></span>