360Giving Design System - Components

Tab Bar 

<div class="tabs">
    <span class="tab tab--active">
        <a class="tab__inner" href="/components/preview/dashboard--overview-by-grant">Overview</a>
    </span><span class="tab tab--inactive">
        <a class="tab__inner" href="/components/preview/dashboard--publishers">Publishers</a>
    </span>
    <span class="tabs-empty-bar">
</div>
 
<div class="tabs">
  {% render '@tab', { href: '/components/preview/dashboard--overview-by-grant', label: 'Overview' } -%}
  {%- render '@tab--inactive', { href: '/components/preview/dashboard--publishers', label: 'Publishers' } %}
  <span class="tabs-empty-bar">
</div>
 
/* No context defined. */
  • Content: 
    .tabs {
  display: flex;
  margin-bottom: 1rem;

  &-empty-bar {
    display: inline-block;
    flex-grow: 1;
    border-bottom: solid 1px #e0e0e0;
  }
}
  • URL: /components/raw/tab-bar/tab-bar.scss
  • Filesystem Path: src/components/03-components/tab-bar/tab-bar.scss
  • Size: 154 Bytes

No notes defined.