1. Components
  2. Interactive

Tabs

Unordered list of links where the each link targets different information

Tabs c-tabs

Tabs description

  • 
    
    <a href="#" class="c-card ">
    
      <div class="c-card__header">
        Card header
      </div>
    
      <div class="c-card__body">
    
        <h2 class="c-card__title">
          <span class="c-card__title-text">Card Heading</span>
          <svg class="c-icon c-card__icon">
    				<use href="..&#x2F;..&#x2F;icons.svg#chevron-right"></use>
    			</svg>
        </h2>
        <!-- end c-card__title -->
    
        <p class="c-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    
      </div>
      <!-- end c-card__body -->
    
      <div class="c-card__footer">
        Card footer
      </div>
      <!-- end c-card__footer -->
    
    </a>
    <!-- end c-card -->
    THIS IS ANGULAR CODE
    THIS IS REACT CODE

Usage

When to use

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

When to consider alternatives

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accessibility considerations

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more

Class Name Description

Fine print

Discuss this component