Tab

<!-- Active -->
<span class="tab tab--active">
    <a class="tab__inner" href="#">Active Section</a>
</span>

<!-- Inactive -->
<span class="tab tab--inactive">
    <a class="tab__inner" href="#">Another Section</a>
</span>

<!-- Active -->
<span class="tab tab--active">
  <a class="tab__inner" href="{{ href }}">{{ label }}</a>
</span>

<!-- Inactive -->
<span class="tab tab--inactive">
  <a class="tab__inner" href="{{ href }}">{{ label }}</a>
</span>
/* Active */
{
  "href": "#",
  "label": "Active Section"
}

/* Inactive */
{
  "href": "#",
  "label": "Another Section"
}

  • Content:
    .tab {
      $light-border-colour: #e0e0e0;
      display: inline-block;
    
      &__inner {
        color: inherit;
        display: inline-block;
        padding: 1rem;
        border: solid 1px $light-border-colour;
    
        &:hover {
          color: inherit;
        }
      }
    
      &--active {
        border-top: 4px solid $teal;
    
        .tab__inner {
          border-width: 0 1px;
        }
      }
    
      &--inactive {
        background: hsla(var(--gray-10-hsl), 1);
      }
    }
    
  • URL: /components/raw/tab/tab.scss
  • Filesystem Path: src/components/02-elements/tab/tab.scss
  • Size: 408 Bytes

No notes defined.