<p class="font-mega">A page heading</p>
<p class="font-big">A page heading</p>
<p class="font-medium">A page heading</p>
<p class="font-normal">A page heading</p>
<p class="font-small">A page heading</p>

<h1>A page heading</h1>
<h2>A page heading</h2>
<h3>A page heading</h3>
<h4>A page heading</h4>
<h5>A page heading</h5>
<h6>A page heading</h6>

<p class="intro">This is an example of an introductory paragraph. As such the font size is slightly larger which makes it stand out more. It should only be used on articles, and not for decoration.</p>
<p>This is an example of a normal paragraph. This is the default text size for paragraphs. If you want to use this size elsewhere you can apply the <code>.font-normal</code> class to the element you want to change.</p>

<blockquote>This isn't really a quote but it serves to demo how they should work.</blockquote>

<p class="meta">This is some meta text. It can be used for all sorts of content like breadcrumbs or post dates or whatever else is supplemental information.</p>
<p class="meta"><a href="#">Home</a> <span class="sep">></span> <a href="#">Archives</a> <span class="sep">></span> Post Title</p>

<ul>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ul>

<ol>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
	<li>A list item</li>
</ol>

<a href="#" class="button">Button text</a>
<button class="button">Button text</button>
<input type="button" class="button" value="Button text">

<a href="#" class="button jumbo">Button text</a>
<button class="button jumbo">Button text</button>
<input type="button" class="button jumbo" value="Button text">

<a href="#" class="button disabled">Button text</a>
<button class="button" disabled>Button text</button>
<input type="button" class="button" disabled value="Button text">

<a href="#" class="button greedy">Button text</a>
<button class="button greedy">Button text</button>
<input type="button" class="button greedy" value="Button text">

<a href="#" class="button ghost">Button text</a>
<button class="button ghost">Button text</button>
<input type="button" class="button ghost" value="Button text">

<a href="#" class="button">Button text</a>
<a href="#" class="button secondary">Button text</a>

<label for="inputbox">A form label</label>
<input type="text" id="inputbox" placeholder="placeholder" />

<label for="disabledinputbox">A disabled form label</label>
<input type="text" id="disabledinputbox" disabled placeholder="placeholder" />

<label for="textareabox">A form label</label>
<textarea id="textareabox"></textarea>

<label>A form label</label>

<fieldset>
	<legend>Field Legend</legend>
	<input type="text" placeholder="placeholder" />
</fieldset>

<label>Colour picker</label>
<div class="radio-group editor-color">
	<label class="group radio-light (default)"><input name="color-scheme" type="radio" value="light (default)">Light (Default)</label>
	<label class="group radio-dark"><input name="color-scheme" type="radio" value="dark">Dark</label>
	<label class="group radio-red"><input name="color-scheme" type="radio" value="red">Red</label>
	<label class="group radio-green"><input name="color-scheme" type="radio" value="green">Green</label>
	<label class="group radio-pink"><input name="color-scheme" type="radio" value="pink">Pink</label>
	<label class="group radio-blue checked"><input name="color-scheme" type="radio" value="blue" checked="checked">Blue</label>
	<label class="group radio-yellow"><input name="color-scheme" type="radio" value="yellow">Yellow</label>
</div>

<label>Font selector</label>
<div class="radio-group text-font-group">
	<label class="group checked" style="font-family: Arial;"><input name="text-fonts" type="radio" value="Arial" checked="checked">Arial</label>
	<label class="group" style="font-family: &quot;Comic Sans MS&quot;;"><input name="text-fonts" type="radio" value="Comic Sans MS">Comic Sans MS</label>
	<label class="group" style="font-family: &quot;Times New Roman&quot;;"><input name="text-fonts" type="radio" value="Times New Roman">Times New Roman</label>
</div>

<form class="select list-group">

	<label class="group gif-classic selected">
		<input type="radio" value="gif-classic" checked="" name="export">
		<h3>Animated Gif</h3>
	</label>

	<label class="group gif-twitter">
		<input type="radio" value="gif-twitter" name="export">
		<h3>Twitter Animated Gif</h3>
		<p>Twitter adds a pause at the end of animated gifs so they don't loop smoothly. This fixes that.</p>
	</label>

	<label class="group save-image">
		<input type="radio" value="save-image" name="export">
		<h3>Save an image</h3>
		<p>A single image with each frame laid out side by side like a comic.</p>
	</label>

	<label class="group save-file">
		<input type="radio" value="save-file" name="export">
		<h3>Save the ninja animation file</h3>
		<p>This can only be opened in the <a href="/desktop-app/" class="brush-ninja-app" target="_blank">Brush Ninja desktop app</a></p>
	</label>

</form>

<label class="group gif-classic selected">
	<input type="radio" value="gif-classic" checked="" name="export">
	<h3>Animated Gif</h3>
</label>

<label class="group gif-classic selected">
	<input type="radio" value="gif-classic" checked="" name="export">
	<h3>Animated Gif</h3>
</label>

<a href="https://instagram.com/BrushNinjaApp/" class="social instagram"><span class="screen-reader-text">Brush Ninja on Instagram</span></a>
<a href="https://www.facebook.com/brushninja/posts/" class="social facebook"><span class="screen-reader-text">Brush Ninja on Facebook</span></a>
<a href="https://twitter.com/binarymoon/" class="social twitter"><span class="screen-reader-text">Binary Moon (the Brush Ninja creator) on Twitter</span></a>

<div class="error" style="display: block;">
This is an error.
</div>

<section class="widget">
	<h2>Widget Title</h2>
	<p>This is the content for the widget.</p>
	<ul>
		<li>A widget list.</li>
		<li>A widget list.</li>
		<li>A widget list.</li>
		<li>A widget list.</li>
	</ul>
</section>

<div class="gallery">
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
</div>

<div class="gallery gallery-large">
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
	<img src="/assets/images/store-screenshot/mas/1.jpg" />
</div>

<ul class="pager">
	<li class="previous"><a href="/blog/">← Newer Posts</a></li>
	<li class="next"><a href="/blog/page/2/">Older Posts →</a></li>
</ul>

<div class="command">
www:/&gt; MakeGif -BMr<br>
www:/&gt; ..........<br>
www:/&gt; <a href="#" class="file-download" download="animation.gif">Save!</a>
</div>