Typography example

Ready

HTML
View
Context
Assets
Info
Notes


        
        <style>
    .content {
        display: flex;
        flex-flow: wrap;
        padding: 20px;
    }

    .container {
        padding: 20px;
        flex: 1 1 20%;
        border: 1px solid #ccc;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .item {
        margin: 20px;
        font-size: 16px;
        color: #6e6e6e;
    }
</style>

<div class="content">
    <div class="container">
        <h4 class="
    title-s
    
">Title S (h4)</h4>

        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
    </div>
    <div class="container">
        <h3 class="
        title-m
        
        
        
        
    ">Title M (h3)</h3>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 18px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 28px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 24px;</p>
            <p>line-height: 34px;</p>
            <br />
            <br />
            <h3>min-width: 768px</h3>
            <p>font-size: 18px;</p>
            <p>line-height: 28px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>line-height: 36px;</p>
            <p>font-size: 26px;</p>
            <br />
            <br />
            <h3>min-width: 1680px</h3>
            <p>line-height: 20px;</p>
            <p>font-size: 30px;</p>
        </div>
    </div>
    <div class="container">
        <h2 class="
    title-l
    
    
    
    
">

            Title L (h2)

        </h2>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 26px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 36px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 16px;</p>
            <br />
            <br />
            <h3>min-width: 768px</h3>
            <p>font-size: 14px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>font-size: 16px;</p>
            <br />
            <br />
            <h3>min-width: 1680px</h3>
            <p>line-height: 16px;</p>
        </div>
    </div>
    <div class="container">
        <h1 class="
    title-xl
">Title XL (h1)</h1>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 36px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 46px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 44px;</p>
            <p>line-height: 56px;</p>
            <br />
            <br />
            <h3>min-width: 768px</h3>
            <p>font-size: 32px;</p>
            <p>line-height: 42px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>font-size: 44px;</p>
            <p>line-height: 56px;
                <br />
                <br />
            <h3>min-width: 1680px</h3>
            <p>font-size: 52px;</p>
            <p>line-height: 64px;</p>
        </div>
    </div>
    <div class="container">
        <h1 class="
    title-xxl
    
">Title XXL (h1)</h1>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 36px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 46px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="bodycopy-xs
    
    
    ">
            <p>Bodycopy XS</p>
        </div>

        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 11px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 16px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">
        <div class="
    bodycopy-s
    
    
    
    
">

            <p>Bodycopy S</p>

        </div>
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 13px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 23px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">
        <div class="
    bodycopy-m
    
    
    
">
            <p>Bodycopy M</p>
        </div>

        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container">
        <div id="" class="
    bodycopy-l
    
    
    
">
            <p>Bodycopy L</p>
        </div>
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 18px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 28px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="
    especial-m
    
">Especial M</div>

        <div class="item">
            <p>font-family: 'Jornada Slab Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container"><a class="text-call-to-action" href="https://hipotecas.com">
            <span>Text Call to action</span>
        </a>
        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>font-size: 14px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 24px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">
        <div class="text-link"><span>Text Link</span></div>

        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>font-size: 13px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 23px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="
    text-label-s
    
    
    
"><span>Text Label S</span></div>

        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 9px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 19px;</p>
            <p>letter-spacing: 0;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container">
        <div class="text-label-m">Text Label M</div>

        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 10px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 20px;</p>
            <p>letter-spacing: 1.2px;</p>
            <p>color: --color-tertiary: #ce0f69;</p>
            <p>transition: color 0.3s;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="
    number-xs
    
"><span>400 (Number XS)</span></div>
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 10px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 20px;</p>
            <p>letter-spacing: 1.2px;</p>
            <p>color: --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">
        <div class="
    number-m
    
"><span>400 (Number M)</span></div>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 26px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color: --color-text: #191919;</p>
        </div>
        <div class="item">
            <h3>min-width: 768px</h3>
            <p>font-size: 30px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>font-size: 40px;</p>
            <p>line-height: 56px;
        </div>
    </div>
    <div class="container">
        <div class="
    number-l
    
"><span>400 (Number L)</span></div>
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 30px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color: --color-tertiary: #ce0f69;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 32px;</p>
            <br />
            <br />
            <h3>min-width: 768px</h3>
            <p>font-size: 50px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>font-size: 70px;</p>
            <br />
            <br />
            <h3>min-width: 1680px</h3>
            <p>font-size: 90px;</p>
        </div>
    </div>
    <div class="container">
        <div class="
    number-xl
    
"><span>400 (Number XL)</span></div>

        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 80px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color: --color-text: #191919;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 100px;</p>
            <br />
            <br />
            <h3>min-width: 768px</h3>
            <p>font-size: 80px;</p>
            <br />
            <br />
            <h3>min-width: 1260px</h3>
            <p>font-size: 130px;</p>
        </div>
    </div>
</div>


        <style>
    .content {
        display: flex;
        flex-flow: wrap;
        padding: 20px;
    }
    .container {
        padding: 20px;
        flex:1 1 20%;
        border: 1px solid #ccc;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .item {
        margin: 20px;
        font-size: 16px;
        color:#6e6e6e;
    }
</style>

<div class="content">
    <div class="container">{{ render '@title-s' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
    </div>
    <div class="container">{{ render '@title-m' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 18px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 28px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 24px;</p>
            <p>line-height: 34px;</p>
            <br/>
            <br/>
            <h3>min-width: 768px</h3>
            <p>font-size: 18px;</p>
            <p>line-height: 28px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>line-height: 36px;</p>
            <p>font-size: 26px;</p>
            <br/>
            <br/>
            <h3>min-width: 1680px</h3>
            <p>line-height: 20px;</p>
            <p>font-size: 30px;</p>
        </div>
    </div>
    <div class="container">{{ render '@title-l' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 26px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 36px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 16px;</p>
            <br/>
            <br/>
            <h3>min-width: 768px</h3>
            <p>font-size: 14px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>font-size: 16px;</p>
            <br/>
            <br/>
            <h3>min-width: 1680px</h3>
            <p>line-height: 16px;</p>
        </div>
    </div>
    <div class="container">{{ render '@title-xl' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 36px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 46px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 44px;</p>
            <p>line-height: 56px;</p>
            <br/>
            <br/>
            <h3>min-width: 768px</h3>
            <p>font-size: 32px;</p>
            <p>line-height: 42px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>font-size: 44px;</p>
            <p>line-height: 56px;
            <br/>
            <br/>
            <h3>min-width: 1680px</h3>
            <p>font-size: 52px;</p>
            <p>line-height: 64px;</p>
        </div>
    </div>
    <div class="container">{{ render '@title-xxl' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 36px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 46px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
            <p>transition: all 0.3s;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">{{ render '@bodycopy-xs' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 11px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 16px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">{{ render '@bodycopy-s' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 13px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 23px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">{{ render '@bodycopy-m' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container">{{ render '@bodycopy-l' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>font-size: 18px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 28px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">{{ render '@especial-m' }}
        <div class="item">
            <p>font-family: 'Jornada Slab Book'</p>
            <p>font-size: 16px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 26px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container">{{ render '@text-call-to-action' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>font-size: 14px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 24px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">{{ render '@text-link' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>font-size: 13px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 23px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">{{ render '@text-label-s' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 9px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 19px;</p>
            <p>letter-spacing: 0;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
    </div>
    <div class="container">{{ render '@text-label-m' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Medium'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 10px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 20px;</p>
            <p>letter-spacing: 1.2px;</p>
            <p>color:  --color-tertiary: #ce0f69;</p>
            <p>transition: color 0.3s;</p>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">{{ render '@number-xs' }}
        <div class="item">
            <p>font-family: 'Jornada Sans Book'</p>
            <p>text-transform: uppercase;</p>
            <p>font-size: 10px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 20px;</p>
            <p>letter-spacing: 1.2px;</p>
            <p>color:  --color-text: #191919;</p>
        </div>
    </div>
    <div class="container">{{ render '@number-m' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 26px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color:  --color-text: #191919;</p>
        </div>
        <div class="item">
            <h3>min-width: 768px</h3>
            <p>font-size: 30px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>font-size: 40px;</p>
            <p>line-height: 56px;
        </div>
    </div>
    <div class="container">{{ render '@number-l' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 30px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color:  --color-tertiary: #ce0f69;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 32px;</p>
            <br/>
            <br/>
            <h3>min-width: 768px</h3>
            <p>font-size: 50px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>font-size: 70px;</p>
            <br/>
            <br/>
            <h3>min-width: 1680px</h3>
            <p>font-size: 90px;</p>
        </div>
    </div>
    <div class="container">{{ render '@number-xl' }}
        <div class="item">
            <p>font-family: 'Jornada News Book'</p>
            <p>font-size: 80px;</p>
            <p>font-weight: normal;</p>
            <p>line-height: 1.2;</p>
            <p>letter-spacing: 0;/p>
            <p>color:  --color-text: #191919;</p>
        </div>
        <div class="item">
            <h3>min-width: 0</h3>
            <p>font-size: 100px;</p>
            <br/>
            <br/>
            <h3>min-width: 768px</h3>
            <p>font-size: 80px;</p>
            <br/>
            <br/>
            <h3>min-width: 1260px</h3>
            <p>font-size: 130px;</p>
        </div>
    </div>
</div>


        
            
            /* No context defined. */

File:

Content:
URL: /components/raw/typography-example/typography-example.css
Filesystem Path: src/00-examples/typography-example/typography-example.css
Size: 0 Byte

Handle: @typography-example
Preview:
- With layout
- Component only
Filesystem Path: src/00-examples/typography-example/typography-example.hbs
References (18): @title-s, @title-m, @title-l, @title-xl, @title-xxl, @bodycopy-xs, @bodycopy-s, @bodycopy-m, @bodycopy-l, @especial-m, @text-call-to-action, @text-link, @text-label-s, @text-label-m, @number-xs, @number-m, @number-l, @number-xl

No notes defined.