360Giving Design System - Components

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.