<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>

<div class="flame-text-on-contained-hover-trigger">
  <h1 class="as-h1 flame-text">Flame Heading</h1>
  <a class="Link inline gold hover-trigger" href="#">Hover me</a>
</div>

<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>

<div class="firebox p-24">Firebox</div>

<div class="firebox p-24">Firebox</div>

<div class="firebox-with-contained-hover-trigger p-24">
  <p class="mb-16">Blah blah</p>
  <button class="hover-trigger" type="button">Hover me</button>
</div>

<div class="flamebox-with-contained-hover-trigger p-24">
  <p class="mb-16">Blah blah</p>
  <button class="hover-trigger" type="button">Hover me</button>
</div>

<div class="graybox p-24">
  <p class="mb-16">Lorem ipsum dolor sit amet consectiteur</p>
</div>

<div style={{background: "var(--color-flame-red-50)", "padding": "2rem"}}>
  <div class="shaded-section">
    <p class="mb-16">Lorem ipsum dolor sit amet consectiteur</p>
  </div>
</div>

<Testimonial testimonial="This is a testimonial quote" author="Anonymous"/>

<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> 

<button class="Button primary" type="button">
  <Tooltip offsetX="1.4rem" offsetY="0.8rem" opens="left">
    Opens left, contained in a span by default
  </Tooltip>
  <Icons.Diamond size="24" />
</button>

<button class="Button basic" type="button">
  <Tooltip elem="div" offsetY="1.2rem" opens="center" width="33rem">
    <p class="body-2">
      Wider div tooltip, centered, with body-2 text treatment
    </p>
  </Tooltip>
  <Icons.Diamond size="24" />
</button>

<button class="Button basic" type="button">
  <Tooltip elem="div" offsetX="1.9rem" offsetY="1.2rem" opens="right">
    <span class="body-2">
      Opens right, can contain <strong>other</strong> elements
    </span>
  </Tooltip>
  <Icons.Diamond size="24" />
</button>

<button class="Button basic" type="button">
  <Tooltip elem="div" offsetX="2.9rem"  offsetY="0rem" opens="right">
    <span class="body-2">
      offsetX adjusts notch position, offsetY adjusts overall 
      tooltip position relative to the triggering element vertically
    </span>
  </Tooltip>
  <Icons.Diamond size="24" />
</button>

<div class="Button basic">
  <Tooltip elem="div" opens="center">
    <p class="caption">
      Any containing element can trigger the tooltip
    </p>
  </Tooltip>
  <p>Any trigger</p>
</div>

{/* Example */}
<Diamond class="nudge-down" size="20" />