ETR Component Library

tab-group: Default 

<ul class="tab-group tab-group--default">
    <li class="hidden first:block md:w-1/3 lg:w-full lg:block">
        <a href="#" class="active bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Overview
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Benefits
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Eligibility
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Forms and Materials
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Medications
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">How to Enroll
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Find a Provider
   <div class="lg: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:w-1/3 lg:w-full lg:block">
        <a href="#" class=" bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">Frequently Asked Questions
   <div class="lg: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--default">
{{#each tabs }}
 <li class="hidden first:block md:w-1/3 lg:w-full lg:block">
   <a href="{{url}}" class="{{#if isActive}}active{{/if}} bg-gray-lighter hover:bg-gray font-bold text-gray-darker text-gray-darkest hover:text-gray-darkest transition py-4 px-6 block text-lg md:text-base">{{label}}
   <div class="lg:hidden">{{render '@icon-chevron-down'}}</div></a>
   </li>
{{/each }}
</ul>
 
{
  "tabs": [
    {
      "label": "Overview",
      "url": "#",
      "isActive": true
    },
    {
      "label": "Benefits",
      "url": "#"
    },
    {
      "label": "Eligibility",
      "url": "#"
    },
    {
      "label": "Forms and Materials",
      "url": "#"
    },
    {
      "label": "Medications",
      "url": "#"
    },
    {
      "label": "How to Enroll",
      "url": "#"
    },
    {
      "label": "Find a Provider",
      "url": "#"
    },
    {
      "label": "Frequently Asked Questions",
      "url": "#"
    }
  ]
}
  • 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.