<button class="Button">Primary</button>

<button class="Button secondary">Secondary</button>

<button disabled class="Button">Disabled</button>

<button disabled class="Button light">Disabled (light)</button>

<button class="Button wide">Wide</button>

<button class="Button large">Large</button>

<button class="Button secondary small">Small</button>

<button class="Button">
  <MagnifyingGlass size="24" />Icon (leading)
</button>

<button class="Button secondary">
  Icon (trailing)<ChevronRight size="24" />
</button>

<button class="Button basic">Text only</button>

<button class="Button basic gold-hover">Hover me</button>

<div style="border: 1px dotted red;">
  <button class="Button basic icon-break-out">
    <ChevronDown size="24" />Icon outside
  </button>
</div>

<label class="styled-control">
  <input type="checkbox" />
  <MusicCast size="24" />
  <span class="sr-only">Hidden text</span>
</label>

<a href="#" class="Link">Link</a>

<p>
  An 
  <a href="#" class="Link inline">inline link</a> 
  in a paragraph.
</p>

<a href="#" class="Button">Link as button</a>

<a href="#" inert class="Button">Disabled link button</a>

<a class="Link">
  <MagnifyingGlass size="16" />Icon (leading)
</a>

<a class="Link">
  Icon (trailing)<ChevronRight size="16" />
</a>

<h1 class="as-h1">Heading level 1</h1>

<h1 class="as-h2">Heading level 2</h1>

<h1 class="as-h3">Heading level 3</h1>

<h1 class="as-h4">Heading level 4</h1>

<h1 class="as-h6">Heading level 6</h1>

<h1 class="as-h1 decorative">Decorative Heading</h1>

<h1 class="as-h1 flame-text">Flame Heading</h1>

<ShadowHeading 
  Elem="h1" 
  as="h1" 
  classString="mb-24" 
  text="Flame Heading with drop shadow" 
/>

<h1 class="h-lockup">
  <span class="as-h6">Multiple</span>
  <span class="as-h3 flame-text">Heading styles</span>
</h1>

<p class="body-1">Body 1</p>

<p class="body-2">Body 2</p>

<p class="error">Error</p>

<p class="info">Info</p>

<p class="warning">Warning</p>

<p class="success">Success</p>

<p class="small">Small</p>

<p class="eyebrow">Eyebrow</p>

<p class="eyebrow large">Eyebrow large</p>

<p class="eyebrow extra-large">Eyebrow extra large</p>

<p class="caption">Caption</p>

<p class="label">Label</p>

<p class="footnote">Footnote</p>

<Alert type="success">
  <p>
    <strong>This</strong> can be anything. 
    When it wraps to two lines, the icon should
    align with the first line of text.
  </p>
</Alert>

<Alert type="info">
  This is just something you might want to know
</Alert>

<Alert type="warning">
  Watch out, buddy!
</Alert>

<Alert type="error">
  Oh nooo!
</Alert>

<div style="position: relative;">
  <Alert type="success" toast>
    <p>
      <strong>Success!</strong> 
      Your game has been successfully created.
    </p>
  </Alert>
</div>