@getbase/typography
Version:
Base Typography
100 lines (94 loc) • 2.63 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Base Typography</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/index.css">
</head>
<body>
<div style="max-width: 600px; margin: 0 auto; padding: 15px;">
<h1>Heading 1.</h1>
<strong class="fs-1">Span with .fs-1</strong>
<p>
You can apply an <code>.fs-1</code> class to any element
to give it the same font size as a <code>h1</code>
</p>
<p>
This is a paragraph that contains a <a href="#">normal hyperlink</a>, some <strong>strong text</strong> and some <em>italic text</em>. Look how beautiful it looks! :)
</p>
<hr>
<h2>Heading 2.</h2>
<strong class="fs-2">Span with .fs-2</strong>
<p>
You can apply an <code>.fs-2</code> class to any element
to give it the same font size as a <code>h2</code>
</p>
<hr>
<h3>Heading 3.</h3>
<strong class="fs-3">Span with .fs-3</strong>
<p>
You can apply an <code>.fs-3</code> class to any element
to give it the same font size as a <code>h3</code>
</p>
<hr>
<h4>Heading 4.</h4>
<strong class="fs-4">Span with .fs-4</strong>
<p>
You can apply an <code>.fs-4</code> class to any element
to give it the same font size as a <code>h4</code>
</p>
<hr>
<h5>Heading 5.</h5>
<strong class="fs-5">Span with .fs-5</strong>
<p>
You can apply an <code>.fs-5</code> class to any element
to give it the same font size as a <code>h5</code>
</p>
<hr>
<h6>Heading 6.</h6>
<strong class="fs-6">Span with .fs-6</strong>
<p>
You can apply an <code>.fs-6</code> class to any element
to give it the same font size as a <code>h6</code>
</p>
<hr>
<h6>Lists</h6>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<hr>
<ol>
<li>Numbered List item 1</li>
<li>Numbered List item 2</li>
</ol>
<h6>Blockquote</h6>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.
</p>
<cite>
John Doe - Random Guy
</cite>
</blockquote>
<hr>
<h6>Code Blocks</h6>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document>/title>
</head>
<body>
</body>
</html></pre>
<hr>
<code>npm install @getbase/typography -S</code>
</div>
</body>
</html>