Beta3.0Requires JS
Components

Tabs

The Tabs component is used to group related content, allowing users to navigate topics without leaving the page.

# Basic Tabs

  • Tabs consists of the Tabs Container: <div class="tabs"></div>, the Tab Header: <div class="tab-header"></div> and the Tab Body: <div class="tab-body"></div>.
  • Each Tab Item consists of a Tab Title: <button class="tab-title"></button> placed in the Tab Header and a Tab Item: <div class="tab-item"></div> placed in the Tab Body.
  • Tab Items can be set to an open state by default by using the class .active on both the Tab Title and the Tab Item. Generally this is used for the first Tab Item only.
Covers advanced database development topics and introduces a data warehouse model designed especially to support analytics and reporting needs. Database development topics covered include transaction management, performance optimization, data loading, and the development of stored procedures, triggers, and functions.
Focuses on object-oriented design and programming methodologies. Teaches inheritance, polymorphism, and encapsulation.
Introduces students to the concept of data analytics as applied to cyber security. Includes collection, aggregation, data mining, and analysis of various data sources.
Example Markup

  <div class="tabs">
    <div class="tab-header">
      <button class="tab-title faux-heading h6 active" data-target="tab-01" aria-current="page">Course One</button>
      <button class="tab-title faux-heading h6" data-target="tab-02" aria-current="page">Course Two</button>
      <button class="tab-title faux-heading h6" data-target="tab-03" aria-current="page">Course Three</button>
    </div>
    <div class="tab-body">
      <div class="tab-item active" id="tab-01">
        Tab One Content...
      </div>
      <div class="tab-item" id="tab-02">
        Tab Two Content...
      </div>
      <div class="tab-item" id="tab-03">
        Tab Three Content...
      </div>
    </div>
  </div>

# Alternate Tabs

If you are looking for a more traditional tab look. You can use the .alt class to give the tab titles a classic rounded tab feel.

Covers advanced database development topics and introduces a data warehouse model designed especially to support analytics and reporting needs. Database development topics covered include transaction management, performance optimization, data loading, and the development of stored procedures, triggers, and functions.
Focuses on object-oriented design and programming methodologies. Teaches inheritance, polymorphism, and encapsulation.
Introduces students to the concept of data analytics as applied to cyber security. Includes collection, aggregation, data mining, and analysis of various data sources.
Example Markup

    <div class="tabs alt">
      ...
    </div>

# Side Tabs

In addition to the default and alternate tabs, you can move the tabs to the side using the .side class. This generally looks best in large spaces with short titles.

Covers advanced database development topics and introduces a data warehouse model designed especially to support analytics and reporting needs. Database development topics covered include transaction management, performance optimization, data loading, and the development of stored procedures, triggers, and functions.
Focuses on object-oriented design and programming methodologies. Teaches inheritance, polymorphism, and encapsulation.
Introduces students to the concept of data analytics as applied to cyber security. Includes collection, aggregation, data mining, and analysis of various data sources.
Example Markup

    <div class="tabs side">
      ...
    </div>