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

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <button type="button" class="Item">
        <span class="Item__label">Item label</span>
      </button>

      <a href="https://www.example.com" class="Item">
        <span class="Item__label">Item label</span>
      </a>

      <div class="Item">
        <span class="Item__label">Item label</span>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <button type="button" class="Item Item--selected">
        <span class="Item__label">Item label</span>
        <span class="Item__icon Item__icon--end">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
      </span>
      </button>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <button type="button" class="Item Item--disabled">
        <span class="Item__label">Item label</span>
      </button>

      <button type="button" class="Item Item--disabled Item--selected">
        <span class="Item__label">Item label</span>
        <span class="Item__icon Item__icon--end">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
      </span>
      </button>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <button type="button" class="Item">
        <span class="Item__label">Item label</span>
        <span class="Item__helperText">Helper text</span>
      </button>

      <button type="button" class="Item Item--selected">
        <span class="Item__label">Item label</span>
        <span class="Item__helperText">Helper text</span>
        <span class="Item__icon Item__icon--end">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
      </span>
      </button>

      <button type="button" class="Item Item--disabled">
        <span class="Item__label">Item label</span>
        <span class="Item__helperText">Helper text</span>
      </button>

      <button type="button" class="Item Item--disabled Item--selected">
        <span class="Item__label">Item label</span>
        <span class="Item__helperText">Helper text</span>
        <span class="Item__icon Item__icon--end">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
      </span>
      </button>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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


      <button type="button" class="Item">
      <span class="Item__icon Item__icon--start">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#search" />
        </svg>
      </span>
        <span class="Item__label">Item label</span>
      </button>

      <button type="button" class="Item Item--selected">
      <span class="Item__icon Item__icon--start">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#search" />
        </svg>
      </span>
        <span class="Item__label">Item label</span>
        <span class="Item__icon Item__icon--end">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
      </span>
      </button>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Checkbox Item</h2>

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

      <label for="checkbox-item" class="Checkbox Checkbox--item">
        <input type="checkbox" id="checkbox-item" class="Checkbox__input" />
        <span class="Checkbox__text">
        <span class="Checkbox__label">Checkbox Item</span>
      </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Radio Item</h2>

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

      <label for="radio-item" class="Radio Radio--item">
        <input type="radio" id="radio-item" name="example3" class="Radio__input" />
        <span class="Radio__label">Radio Item</span>
      </label>

    </div>

  </div>

</section>

{{/web/layout/default }}