Davidson Styleguide

Tabs 

<div class="js-tabs tabs--standard" id="TabGroup-405ope1kllpc96h4">
    <ul class="js-tablist">
        <li class="js-tablist__item">
            <a href="#tabone" id="label_tabone">Tab One</a>
        </li>
        <li class="js-tablist__item">
            <a href="#tabtwo" id="label_tabtwo">Tab Two</a>
        </li>
        <li class="js-tablist__item">
            <a href="#tabthree" id="label_tabthree">Tab Three</a>
        </li>

    </ul>
    <div id="tabone" class="js-tabcontent tabs__content">
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
    <div id="tabtwo" class="js-tabcontent tabs__content">
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
    <div id="tabthree" class="js-tabcontent tabs__content">
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
</div>
 
{% set js_tabs_classes = [ 'js-tabs', tabs.variant ] %} 
{% set js_tabs_id = "TabGroup-"|uniqid %}
<div class="{{ js_tabs_classes|join(' ') }}" id="{{ js_tabs_id }}">
    <ul class="js-tablist">
        {% for item in tabs.items %}
            <li class="js-tablist__item">
                <a href="#{{ item.target }}" id="label_{{ item.target }}">{{ item.label }}</a>
            </li>
        {% endfor %}
        {# }
        {% block tabs_tabs %}
            {% for item in tabs.items %}
                {% include '@tab-tab' with { tab_target : "tab_" ~ i, tab_label : "Tab " ~ i } %}
            {% endfor %}
        {% endblock %}
        #}
    </ul>
    {% for item in tabs.items %}
        <div id="{{ item.target }}" class="js-tabcontent tabs__content">
            {% include item.pattern %}
        </div>
    {% endfor %}
</div>
 
{
  "p": {
    "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
  },
  "tabs": {
    "variant": "tabs--standard",
    "items": [
      {
        "target": "tabone",
        "label": "Tab One",
        "pattern": "@p"
      },
      {
        "target": "tabtwo",
        "label": "Tab Two",
        "pattern": "@p"
      },
      {
        "target": "tabthree",
        "label": "Tab Three",
        "pattern": "@p"
      }
    ]
  }
}
  • Content: 
    .js-tablist {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.js-tablist__item {
  flex: 1 1 100%;

  a {
    @include link-fancy;
    @include rr-font-compute(l, tight);
    display: block;
    padding: rr-gridbase(2);
    background-color: color(gray-lightest);
    color: color(dark-teal);

    &:after {
      display: none;
    }

    &:hover,
    &:active {
      color: color(davidson-red);
      text-decoration: none;
    }

    &:focus {
      text-decoration: underline;
    }

    &[aria-selected='true'] {
      background-color: color(gray-lightest);
      color: color(davidson-red);

      &:hover,
      &:active {
        color: color(davidson-red);
      }
    }
  }
}

.js-tabcontent {
  padding: rr-gridbase(2);
  background-color: color(gray-lightest);

  &[aria-hidden='true'] {
    display: none;
  }

  @include rr-break-directive(m) {
    padding: rr-gridbase(3);
  }

  @include rr-break-directive(l) {
    padding: rr-gridbase(4);
  }
}
  • URL: /components/raw/tabs/tabs.scss
  • Filesystem Path: patterns/organisms/interactive/tabs/tabs.scss
  • Size: 985 Bytes

There are no notes for this item.