TYPOGRAPHY.md

Typography

Use typography to present your design and content as clearly and efficiently as possible.

Element

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
<b>...</b>
<p>...</p>
<span>...</span>
<div>...</div>
<...>...</...>

Most used helpers

texts

italic, bold, underline, overline, upper, lower, capitalize, link, small-text, medium-text, large-text

Sizes

small, medium, large

Display and Headline example

<h1>Display</h1>
<h2>Display</h2>
<h3>Display</h3>
<h4>Headline</h4>
<h5>Headline</h5>
<h6>Headline</h6>

Formatting example

<a class="link">link</a>
<a class="inverse-link">inverse-link</a>
<p class="italic">italic</p>
<p class="bold">bold</p>
<p class="underline">underline</p>
<p class="overline">overline</p>
<p class="upper">upper</p>
<p class="lower">lower</p>
<p class="capitalize">capitalize</p>
<p class="small-text">small-text</p>
<p class="medium-text">medium-text</p>
<p class="large-text">large-text</p>

Line spacing example

<div class="no-line">...</div>
<div class="tiny-line">...</div>
<div class="small-line">...</div>
<div class="medium-line">...</div>
<div class="large-line">...</div>
<div class="extra-line">...</div>

Go to

Begin, Elements, Helpers, Settings, Summary, beercss.com

Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, List, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography