AFW Pattern Lab

Faq Tabs 

<nav class="faq-tabs">

    <a class="a-btn a-btn--faq is-active">

        <i class="icon fal fa-fw fa-truck" aria-hidden="true"></i>

        Delivery

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-dolly-flatbed" aria-hidden="true"></i>

        Pick Up

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-box" aria-hidden="true"></i>

        Returns

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-certificate" aria-hidden="true"></i>

        Warranty

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-credit-card" aria-hidden="true"></i>

        Gift Cards

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-gift" aria-hidden="true"></i>

        Registry

    </a>

    <a class="a-btn a-btn--faq">

        <i class="icon fal fa-fw fa-file" aria-hidden="true"></i>

        Financing

    </a>

</nav>
 
<nav class="faq-tabs">
    {% for item in tabs %}
        {% render '@button--faq', item, true %}
    {% endfor %}
</nav>
 
{
  "tabs": [
    {
      "text": "Delivery",
      "active": true
    },
    {
      "text": "Pick Up",
      "iconLeft": "dolly-flatbed"
    },
    {
      "text": "Returns",
      "iconLeft": "box"
    },
    {
      "text": "Warranty",
      "iconLeft": "certificate"
    },
    {
      "text": "Gift Cards",
      "iconLeft": "credit-card"
    },
    {
      "text": "Registry",
      "iconLeft": "gift"
    },
    {
      "text": "Financing",
      "iconLeft": "file"
    }
  ]
}
  • Content: 
    .faq-tabs {
    $this: &;

    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: rem(16px);

    .a-btn--faq {
        flex: 1 1 auto;
    }
}
  • URL: /components/raw/faq-tabs/faq-tabs.scss
  • Filesystem Path: source/patterns/molecules/faq-tabs/faq-tabs.scss
  • Size: 242 Bytes

No notes defined.