ETR Component Library

tab-group: Archive 

<ul class="tab-group tab-group--archive flex items-center">
    <li class="hidden first:block md:block">
        <a href="#" class="active font-sans font-bold px-4 py-6 text-base transition">All
      <div class="md:hidden"><?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-down</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd">
<polyline points="1 12 20 28.467 39 12" stroke="#000" stroke-width="3"/>
</g>
</svg>
</div></a>
    </li>
    <li class="hidden first:block md:block">
        <a href="#" class=" font-sans font-bold px-4 py-6 text-base transition">Healthy Living
      <div class="md:hidden"><?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-down</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd">
<polyline points="1 12 20 28.467 39 12" stroke="#000" stroke-width="3"/>
</g>
</svg>
</div></a>
    </li>
    <li class="hidden first:block md:block">
        <a href="#" class=" font-sans font-bold px-4 py-6 text-base transition">Care for Caregivers
      <div class="md:hidden"><?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-down</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd">
<polyline points="1 12 20 28.467 39 12" stroke="#000" stroke-width="3"/>
</g>
</svg>
</div></a>
    </li>
    <li class="hidden first:block md:block">
        <a href="#" class=" font-sans font-bold px-4 py-6 text-base transition">Managing Conditions
      <div class="md:hidden"><?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-down</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd">
<polyline points="1 12 20 28.467 39 12" stroke="#000" stroke-width="3"/>
</g>
</svg>
</div></a>
    </li>
</ul>
 
<ul class="tab-group tab-group--archive flex items-center">
  {{#each tabs }}
    <li class="hidden first:block md:block">
      <a href="{{url}}" class="{{#if isActive}}active{{/if}} font-sans font-bold px-4 py-6 text-base transition">{{label}}
      <div class="md:hidden">{{render '@icon-chevron-down'}}</div></a>
    </li>
  {{/each }}
</ul>
 
{
  "tabs": [
    {
      "label": "All",
      "url": "#",
      "isActive": true
    },
    {
      "label": "Healthy Living",
      "url": "#"
    },
    {
      "label": "Care for Caregivers",
      "url": "#"
    },
    {
      "label": "Managing Conditions",
      "url": "#"
    }
  ],
  "modifier": "archive"
}
  • Content: 
    .tab-group {
  &--default {
    li {
      a {
        @apply rounded border-0 flex justify-between items-center;

        svg {
          polyline {
            stroke: white;
          }
          width: 18px;
          height: auto;
        }

        &.active {
          @apply bg-primary text-white;
        }

        @screen lg {
          @apply block rounded-none border-b border-white;
        }
      }

      &:first-child {
        a {
          @screen lg {
            @apply rounded-t border-b border-white;
          }
        }
      }
      &:last-child {
        a {
          @screen lg {
            @apply rounded-b border-none;
          }
        }
      }
    }
  }

  &--archive {
    li {
      @apply w-full;
    }
    a {
      @apply relative;
      &:after {
        content: "";
        @apply block absolute bottom-0 left-0 w-full bg-primary opacity-0;
        height: 4px;
        transform: scale3d(0, 1, 1);
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      }
      &:hover, &.active, &.open {
        @apply text-primary;
        @screen md {
          &:after {
            transform: scale3d(1, 1, 1);
            @apply opacity-100;
          }
        }
      }
        @apply rounded flex justify-between items-center w-full;

        svg {
          polyline {
            stroke: white;
          }
          width: 18px;
          height: auto;
        }

        &.active {
          @apply bg-primary text-white;
        }
      }

    @screen md {
      li {
        @apply w-auto;
      }
      a {
        @apply block rounded-none w-auto;

        &.active {
          background: none;
          @apply text-primary-dark;
        }
      }
    }
  }
}
  • URL: /components/raw/tab-group/tab-group.scss
  • Filesystem Path: components/05-layout-components/tab-group/tab-group.scss
  • Size: 1.8 KB

There are no notes for this item.