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

{{setVar "colors" "neutral" "success" "informative" "warning" "danger" }}
{{setVar "sizes" "xsmall" "small" "medium" "large" "xlarge" }}

<section class="UNSTABLE_Section">

  <div class="Container">

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

    <div class="docs-Stack docs-Stack--stretch">
      <div class="Grid Grid--cols-1 Grid--tablet--cols-3 Grid--desktop--cols-5">
        {{#each @root.sizes as |size|}}
        <section class="UNSTABLE_Section">
          <h3 class="docs-Heading">Size {{size}}</h3>
          <div class="docs-Stack docs-Stack--start">
            {{#each @root.colors as |color|}}
            <span class="Tag Tag--{{color}} Tag--subtle Tag--{{size}}">Tag {{color}}</span>
            <span class="Tag Tag--{{color}} Tag--{{size}}">Tag {{color}}</span>
            {{/each}}
          </div>
        </section>
        {{/each}}
      </div>
    </div>

  </div>

</section>

{{/web/layout/default }}