{{#> web/layout/default title="Pill" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Colors</h2>

    <div class="docs-Stack docs-Stack--start">

      <span class="Pill Pill--selected">3</span>
      <span class="Pill Pill--neutral">3</span>
      <span class="Pill Pill--success">3</span>
      <span class="Pill Pill--informative">3</span>
      <span class="Pill Pill--warning">3</span>
      <span class="Pill Pill--danger">3</span>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Long Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <span class="Pill Pill--selected">333</span>

    </div>

  </div>

</section>

{{/web/layout/default }}