Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.7)

Note

This page is archived under version 1.7 and is available for reference purposes only. The latest version of Pattern Library is 2.

Tabs

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
  4. jquery-3.5.1.min.js
Pattern files
  1. coc-tab.css
  2. coc-accordion-tabs.js

Tabs organize chunks of information relating to the same context. Use tabs when users do not need to see content from multiple tabs simultaneously.

Tabs

Section 01

#1 Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Vestibulum sit amet ipsum lacus. Suspendisse potenti.

  • Aliquam nisl enim, tristique tempus placerat at.
  • Vestibulum sit amet ipsum lacus.
  • Suspendisse potenti.

Section 02

#2 Fusce ac sodales magna. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Suspendisse. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Fusce ac sodales magna. Potenti et eros sed justo commodo bibendum non at nunc.

Section 03

#3 Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Vestibulum sit amet ipsum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.

Section 04

#4 Nulla auctor eleifend turpis consequat pharetra.

Vestibulum sit amet ipsum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.

Section 05

#5 Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Vestibulum sit amet ipsum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.

Section 06

#6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Vestibulum sit amet ipsum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus.

Code 


<script src="js/jquery-2.2.4.min.js"></script>
<!-- By design, the styles for tabs are applied via JavaScript.
This allows the tab content to remain completely accessible for users with JavaScript disabled. -->
<script src="js/coc-accordion-tabs.js"></script>

<div class="cui tab-container">
    <ul class="tab-nav">
        <!-- Do not add more than 6 tabs, otherwise the layout may appear broken.
        The href in the <a> tags below targets the id of the tab panel. -->
        <li><a href="{{ Tab panel id (e.g. #section1) }}" class="tab-link">{{ Tab name }}</a></li>
        <li><a href="{{ Tab panel id (e.g. #section2) }}" class="tab-link">{{ Tab name }}</a></li>
        <li><a href="{{ Tab panel id (e.g. #section3) }}" class="tab-link">{{ Tab name }}</a></li>
        <li><a href="{{ Tab panel id (e.g. #section4) }}" class="tab-link">{{ Tab name }}</a></li>
        <li><a href="{{ Tab panel id (e.g. #section5) }}" class="tab-link">{{ Tab name }}</a></li>
        <li><a href="{{ Tab panel id (e.g. #section6) }}" class="tab-link">{{ Tab name }}</a></li>
    </ul>

    <div class="tab-content">
        <!-- Text for the .title-bar should be the same as the corresponding tab name in the .tab-nav above.
        The .title-bar is used for mobile view, print, and browsers with JavaScript turned off.
        The .title-bar heading tag can be any of h2, h3, h4, h5 or h6 to be semantically correct in
        relation to the page structure. Each heading tag for the .tab-container should be consistent. -->
        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section1) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>

        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section2) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>

        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section3) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>

        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section4) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>

        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section5) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>

        <h3 class="title-bar">{{ Tab name }}</h3>
        <div id="{{ Tap panel id (e.g. section6) }}" class="tab-panel">
            {{ Tab panel content }}
        </div>
    </div>
</div>

Usage

General guidelines

Tabs provide the ability to display grouped content. A tab label describes the tab’s associated group of content.

Tabs transform to accordions at smaller screens to ensure each tab item is still visible to the user without the need for scrolling.

The tab label character limits will change based on number of tabs. Do not use more than 6 tabs, otherwise the layout may appear broken. The maximum number of tabs may need to be adjusted depending on the width of the content area.

  • If 2 tabs have been used, the tab label character limitation is 30 characters
  • If 3 tabs have been used, the tab label character limitation is 20 characters
  • If 4 tabs have been used, the tab label character limitation is 15 characters
  • If 5 tabs have been used, the tab label character limitation is 12 characters
  • If 6 tabs have been used, the tab label character limitation is 10 characters