showcar-ui
Version:
Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.
60 lines (53 loc) • 1.92 kB
Markdown
<h2>Fonts and headlines<span class="status approved">Approved</span></h2>
ShowCars default `font-family` is MakeItSans. Please use the predefined classes to increase or decrease the font size. You should not define explicit font sizes. To use the MakeItSans font, you don't have to do anything.
#### Font sizes
Several helper classes for font styling are available, the font sizes follow simple T-Shirt sizes.
#### Headlines
For styling `<h*>` elements please use `sc-font-*` classes directly.
For example `<h2 class='sc-font-m'>`
<table class="docs-table">
<thead>
<tr>
<th>class</th>
<th>font-size/line-height (viewport < 768px)</th>
<th>font-size/line-height (viewport >= 768px)</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sc-font-s</code></td>
<td>0.8125rem (13px) <br> 1.5 (19px)</td>
<td>0.8125rem (13px) <br> 1.5 (19px)</td>
</tr>
<tr>
<td><code>.sc-font-m</code></td>
<td>1rem (16px) <br> 1.5 (24px)</td>
<td>1rem (16px) <br> 1.5 (24px)</td>
</tr>
<tr>
<td><code>.sc-font-l</code></td>
<td>1.25rem (20px) <br> 1.4 (28px)</td>
<td>1.25rem (20px) <br> 1.4 (28px)</td>
</tr>
<tr>
<td><code>.sc-font-xl</code></td>
<td>1.5rem (24px) <br> 1.3 (31px)</td>
<td>1.75rem (28px) <br> 1.3 (36px)</td>
</tr>
<tr>
<td><code>.sc-font-xxl</code></td>
<td>1.75rem (28px) <br> 1.25 (35px)</td>
<td>2rem (32px) <br> 1.25 (40px)</td>
</tr>
<tr>
<td><code>.sc-font-hero</code></td>
<td>1.5rem (24px) <br> 1.3 (31px)</td>
<td>2.5rem (40px) <br> 1.2 (48px)</td>
</tr>
</tbody>
</table>
<style>
#fonts .sample p{
margin-bottom:15px;
}
</style>