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

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <ul class="Tabs" role="tablist">
        <li class="Tabs__item">
          <button
            class="Tabs__link is-selected"
            role="tab"
            type="button"
            aria-selected="true"
            id="pane-1-tab"
            data-spirit-toggle="tabs"
            data-spirit-target="#pane-1"
            aria-controls="pane-1"
          >
            Item 1
          </button>
        </li>
        <li class="Tabs__item">
          <button
            class="Tabs__link"
            role="tab"
            type="button"
            aria-selected="false"
            id="pane-2-tab"
            data-spirit-toggle="tabs"
            data-spirit-target="#pane-2"
            aria-controls="pane-2"
          >
            Item 2
          </button>
        </li>
        <li class="Tabs__item">
          <a href="https://www.example.com" class="Tabs__link">Item link</a>
        </li>
        <li class="Tabs__item d-none d-desktop-block">
          <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
        </li>
      </ul>

      <div id="pane-1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane-1-tab">
        Pane 1 content
      </div>

      <div id="pane-2" class="TabsPane" role="tabpanel" aria-labelledby="pane-2-tab">
        Pane 2 content
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Custom Spacing</h2>

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

      <ul class="Tabs"
          role="tablist"
          style="--tabs-spacing: var(--spirit-space-500); --tabs-spacing-tablet: var(--spirit-space-1000); --tabs-spacing-desktop: var(--spirit-space-1600)"
      >
        <li class="Tabs__item">
          <button
            class="Tabs__link is-selected"
            role="tab"
            type="button"
            aria-selected="true"
            id="pane-3-tab"
            data-spirit-toggle="tabs"
            data-spirit-target="#pane-3"
            aria-controls="pane-3"
          >
            Item 1
          </button>
        </li>
        <li class="Tabs__item">
          <button
            class="Tabs__link"
            role="tab"
            type="button"
            aria-selected="false"
            id="pane-4-tab"
            data-spirit-toggle="tabs"
            data-spirit-target="#pane-4"
            aria-controls="pane-4"
          >
            Item 2
          </button>
        </li>
        <li class="Tabs__item">
          <a href="https://www.example.com" class="Tabs__link">Item link</a>
        </li>
        <li class="Tabs__item d-none d-desktop-block">
          <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
        </li>
      </ul>

      <div id="pane-3" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane-3-tab">
        Pane 1 content
      </div>

      <div id="pane-4" class="TabsPane" role="tabpanel" aria-labelledby="pane-4-tab">
        Pane 2 content
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}