This is a header one.

<h1>This is a header one.</h1>

This is a header two.

<h2>This is a header two.</h2>

This is a header three.

<h3>This is a header three.</h3>

This is a header four.

<h4>This is a header four.</h4>

This is a header five.

<h5>This is a header five.</h5>

This is a header six.

<h6>This is a header six.</h6>

This is a sentence wrapped in paragraph tags.

<p>This is a sentence wrapped in paragraph tags.</p>

This is a link.

<a href="#">This is a link</a>

This is bold text.

<strong>This is bold text</strong>

This is italic text.

<em>This is italic text</em>

This is code that we want to display: .blue{color:blue}

<pre><code>.blue{color:blue}</code></pre>

This is the horizontal rule:

<hr>

This is a sentence wrapped in blockquote tags.

<blockquote>This is a sentence wrapped in blockquote tags.</blockquote>

• This
• is
• an
• unordered
• list.

<ul>
<li>This</li>
<li>is</li>
<li>an</li>
<li>unordered</li>
<li>list.</li>
</ul>

1. This
2. is
3. an
4. ordered
5. list.

<ol>
<li>This</li>
<li>is</li>
<li>an</li>
<li>ordered</li>
<li>list.</li>
</ol>

<input type="text" value="This is a text input." size="25">

This is a textarea.

<textarea rows="5" cols="50">This is a textarea.</textarea>

<input type="submit" value="This is a submit input.">

<img src="img.jpg" alt="This is an image.">

Tables

<table class="alternating">
<thead>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
</thead>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
</tbody>
</table>

Font Stacks

This uses the system font stack.

<p class="font-system">This uses the system font stack.</p>

This uses the sans-serif font stack.

<p class="font-sans">This uses the sans-serif font stack.</p>

This uses the serif font stack.

<p class="font-serif">This uses the serif font stack.</p>

This uses the monospace font stack.

<p class="font-mono">This uses the monospace font stack.</p>

This uses the symbol font stack: ☮ ♠ ♣ ♥ ♦ ← → ↑ ↓ ★

<p class="font-symbol">This uses the symbol font stack: ☮ ♠ ♣ ♥ ♦ ← → ↑ ↓ ★</p>

Icons

This is an inline SVG icon:

<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>

This is an icon loaded from a file:

<style>.icon-demo{mask-image:url(icon.svg)}</style>
<i class="icon icon-demo" title="This is an icon."></i>

Buttons and Colors

This is the default button.

<a href="#" class="button">This is the default button.</a>

This is a rounded button.

<a href="#" class="button rounded">This is a rounded button.</a>

This is a round button.

<a href="#" class="button round">This is a round button.</a>

This is a circle button.

<a href="#" class="button circle">This is a circle button.</a>

This is a button set to white.

<a href="#" class="button white">This is a button set to white.</a>

This is a button set to blue.

<a href="#" class="button blue">This is a button set to blue.</a>

This is a button set to light blue.

<a href="#" class="button blue-light">This is a button set to light blue.</a>

This is a button set to dark blue.

<a href="#" class="button blue-dark">This is a button set to dark blue.</a>

This is a button set to green.

<a href="#" class="button green">This is a button set to green.</a>

This is a button set to light green.

<a href="#" class="button green-light">This is a button set to light green.</a>

This is a button set to dark green.

<a href="#" class="button green-dark">This is a button set to dark green.</a>

This is a button set to orange.

<a href="#" class="button orange">This is a button set to orange.</a>

This is a button set to light orange.

<a href="#" class="button orange-light">This is a button set to light orange.</a>

This is a button set to dark orange.

<a href="#" class="button orange-dark">This is a button set to dark orange.</a>

This is a button set to purple.

<a href="#" class="button purple">This is a button set to purple.</a>

This is a button set to light purple.

<a href="#" class="button purple-light">This is a button set to light purple.</a>

This is a button set to dark purple.

<a href="#" class="button purple-dark">This is a button set to dark purple.</a>

This is a button set to red.

<a href="#" class="button red">This is a button set to red.</a>

This is a button set to light red.

<a href="#" class="button red-light">This is a button set to light red.</a>

This is a button set to dark red.

<a href="#" class="button red-dark">This is a button set to dark red.</a>

This is a button set to yellow.

<a href="#" class="button yellow">This is a button set to yellow.</a>

This is a button set to light yellow.

<a href="#" class="button yellow-light">This is a button set to light yellow.</a>

This is a button set to dark yellow.

<a href="#" class="button yellow-dark">This is a button set to dark yellow.</a>

This is a button set to black.

<a href="#" class="button black">This is a button set to black.</a>

This is a button set to gray.

<a href="#" class="button gray">This is a button set to gray.</a>

This is a button set to light gray.

<a href="#" class="button gray-light">This is a button set to light gray.</a>

This is a button set to dark gray.

<a href="#" class="button gray-dark">This is a button set to dark gray.</a>

Notes

<span class="note yellow">This is a caution note.</span>

<span class="note red">This is a warning note.</span>

Grid Layout

<div class="boxes">
<div class="box">This is a single-column box.</div>
</div>

<div class="boxes">
<div class="box-2">This is a two-column box.</div>
<div class="box-2">This is a two-column box.</div>
</div>

<div class="boxes">
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
</div>

<div class="boxes">
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
</div>

<div class="boxes">
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
</div>

<div class="boxes">
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
</div>

<div class="boxes">
<div class="box-1-3">This is a one-third box.</div>
<div class="box-2-3">This is a two-thirds box.</div>
</div>

Dark Mode

If your system/browser is set to prefer dark mode, this page should be black. Otherwise, it'll be white.

@media(prefers-color-scheme:light){body{background:var(--color-white)}}
@media(prefers-color-scheme:dark){body{background:var(--color-black)}}

Additional Helper Classes

.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block}
.flex{display:flex}
.grid{display:grid}
.full-width{width:100%}
.padding-0{padding:0}
.border-0{border:0}
.margin-0{margin:0}
.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
.clear-left{clear:left}
.clear-right{clear:right}
.clear-float:after{display:table;content:'';clear:both}
.lowercase{text-transform:lowercase}
.uppercase{text-transform:uppercase}
.capitalize{text-transform:capitalize}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{display:inline-block;width:var(--spacing-small)}
.offset{scroll-margin-top:6.25rem}
.desktop, .mobile, .hidden{display:none}
.visually-hidden:not(:focus):not(:active){position:absolute!important;width:1px;height:1px;padding:0;border:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}