@getbase/typography-helpers
Version:
Base Typography Helpers
95 lines (90 loc) • 3.51 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Base Typography Helpers</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/@getbase/typography-helpers/index.css">
</head>
<body>
<div style="max-width: 600px; margin: 0 auto;">
<strong class="font-100">Font weight 100 (.font-100)</strong>
<hr />
<strong class="font-200">Font weight 200 (.font-200)</strong>
<hr />
<strong class="font-300">Font weight 300 (.font-300)</strong>
<hr />
<strong class="font-400">Font weight 400 (.font-400)</strong>
<hr />
<strong class="font-500">Font weight 500 (.font-500)</strong>
<hr />
<strong class="font-600">Font weight 600 (.font-600)</strong>
<hr />
<strong class="font-700">Font weight 700 (.font-700)</strong>
<hr />
<strong class="font-800">Font weight 800 (.font-800)</strong>
<hr />
<strong class="font-900">Font weight 900 (.font-900)</strong>
<hr />
<div class="no-select">
This text can't be selected because it has <code>.no-select</code> applied
</div>
<hr>
<span class="uppercase">this is some lowercase text with <code>.uppercase</code> applied</span>
<hr />
<span class="lowercase">THIS IS SOME UPPERCASE TEXT WITH <code>.lowercase</code> APPLIED</span>
<hr />
<span class="capitalize">this is some text with <code>.capitalize</code> applied</span>
<hr />
<div class="text-left">
This div has <code>.text-left</code> applied to it so all text will be aligned to the left
</div>
<hr>
<div class="text-right">
This div has <code>.text-right</code> applied to it so all text will be aligned to the right
</div>
<hr>
<div class="text-center">
This div has <code>.text-center</code> applied to it so all text will be aligned to the center
</div>
<hr>
<div class="text-left-m">
This div has <code>.text-left-m</code> applied to it so all text will be aligned to the left for medium devices and up
</div>
<hr>
<div class="text-right-m">
This div has <code>.text-right-m</code> applied to it so all text will be aligned to the right for medium devices and up
</div>
<hr>
<div class="text-center-m">
This div has <code>.text-center-m</code> applied to it so all text will be aligned to the center for medium devices and up
</div>
<hr>
<div class="text-left-l">
This div has <code>.text-left-l</code> applied to it so all text will be aligned to the left for large devices and up
</div>
<hr>
<div class="text-right-l">
This div has <code>.text-right-l</code> applied to it so all text will be aligned to the right for large devices and up
</div>
<hr>
<div class="text-center-l">
This div has <code>.text-center-l</code> applied to it so all text will be aligned to the center for large devices and up
</div>
<hr>
<div class="text-left-xl">
This div has <code>.text-left-xl</code> applied to it so all text will be aligned to the left for extra large devices and up
</div>
<hr>
<div class="text-right-xl">
This div has <code>.text-right-xl</code> applied to it so all text will be aligned to the right for extra large devices and up
</div>
<hr>
<div class="text-center-xl">
This div has <code>.text-center-xl</code> applied to it so all text will be aligned to the center for extra large devices and up
</div>
</div>
</body>
</html>