England Football

Tabs 

<div data-behavior="tabs">
    <div role="tablist" aria-label="Sample Tabs" class="tab-list">
        <a href="#panel-tree" role="tab" aria-selected="true" aria-controls="panel-tree" id="tab-tree">
            Tree
        </a>
        <a href="#panel-table" role="tab" aria-selected="false" aria-controls="panel-table" id="tab-table">
            Table
        </a>
    </div>
</div>

No notes defined.

{
  "tab1": {
    "title": "Tab1 title",
    "heading": {
      "copy": "This comes from the config"
    }
  },
  "tab2": {
    "title": "Tab2 title"
  }
}
  • Content: 
    .tab-list {
  // We can change these vars inside individual components
  // If, for example, we need white tabs on top of a dark background
  --tab-color-hover: var(--brand-primary-hover);
  --tab-color-primary: var(--brand-primary);
  --tab-color-secondary: #fff;
  --tab-color-secondary-hover: var(--brand-quaternary);

  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-content: space-evenly;
  width: 100%;

  @media screen and (max-width: $mq-small) {
    width: 100%;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
  }

  & > [role='tab'] {
    @include text-xs;

    color: var(--tab-color-primary);
    text-decoration: none;
    position: relative;
    flex: 1 1 auto;
    display: block;
    padding: 19px $spacing-m;
    border-radius: 4px;
    border: 1px solid;
    // min-width: 13.9rem;
    text-align: center;
    text-transform: uppercase;
    margin: 2px;
    white-space: no-wrap;

    @media screen and (min-width: $mq-medium) {
      font-size: 1.4rem;
    }
    &:hover {
      background-color: var(--tab-color-hover);
      border-color: var(--brand-primary);
      color: var(--tab-color-secondary-hover) !important;
    }
    &:focus {
      border: 3px solid $blue;
      color: $blue;
      text-decoration: underline;
      padding: 1.7rem 1.6rem;
    }

    @media screen and (max-width: $mq-small) {
      min-width: 9rem;
      padding: 15px $spacing-m;
    }
  }

  // Prevent double borders
  & > [role='tab']:not(:first-child) {
    margin-left: -3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  // Reset rounded corners
  & > [role='tab']:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & > [aria-selected='true'] {
    background-color: var(--tab-color-primary);
    border-color: var(--tab-color-primary);
    color: var(--tab-color-secondary) !important;
    text-decoration: none !important;
  }
}
:root [data-brand='womens'] {
  .tab-list {
    & > [role='tab'] {
      &:hover {
        color: #fff;
      }
    }
  }
}
  • URL: /components/raw/tabs/tabs.scss
  • Filesystem Path: src/library/components/tabs/tabs.scss
  • Size: 2.1 KB 
<div data-behavior="tabs">
  <div role="tablist" aria-label="Sample Tabs" class="tab-list">
    <a href="#panel-tree" role="tab" aria-selected="true" aria-controls="panel-tree" id="tab-tree">
      Tree
    </a>
    <a href="#panel-table" role="tab" aria-selected="false" aria-controls="panel-table" id="tab-table">
      Table
    </a>
  </div>
</div>