Tab Container

The tab container component uses a tabbed interface to organize content into separate panels. Only one panel is visible at a time, with the active tab visually highlighted in Bulldog Red.

Tab Container

Mountains of Georgia Rivers of Georgia

Georgia is home to a section of the Appalachian Mountains, which includes the Blue Ridge Mountains. These mountains are known for their scenic beauty and recreational opportunities.

• Brasstown Bald: The highest point in Georgia, standing at 4,784 feet.
• Blood Mountain: A popular hiking destination on the Appalachian Trail.
• Stone Mountain: Famous for its massive granite dome and historical carvings.

Georgia's river systems are vital for its ecosystem, providing water resources and recreational activities. Major rivers flow through the state, supporting diverse wildlife and communities.

• Chattahoochee River: Flows from the Blue Ridge Mountains to the Gulf of Mexico, passing through Atlanta.
• Savannah River: Forms the border between Georgia and South Carolina, flowing into the Atlantic Ocean.
• Flint River: A key river in central and southwestern Georgia, known for its natural beauty and biodiversity.

<div class="cmp-tabs">
  <div class="cmp-tabs__nav" role="tablist">
    <button
      class="cmp-tabs__nav-item cmp-tabs__nav-item--active"
      data-tab="tab-0"
      role="tab"
      tabindex="0"
      aria-selected="true"
      aria-controls="tab-0"
    >
      Mountains of Georgia
    </button>
    <button
      class="cmp-tabs__nav-item"
      data-tab="tab-1"
      role="tab"
      tabindex="-1"
      aria-selected="false"
      aria-controls="tab-1"
    >
      Rivers of Georgia
    </button>
  </div>
  <div class="cmp-tabs__content">
    <div
      class="cmp-tabs__content-item cmp-tabs__content-item--active"
      id="tab-0"
      role="tabpanel"
      aria-labelledby="tab-0"
    >
      <p>
        Georgia is home to a section of the Appalachian Mountains, which
        includes the Blue Ridge Mountains. These mountains are known for their
        scenic beauty and recreational opportunities.
      </p>
      <ul>
        <li>
          <strong>Brasstown Bald:</strong>
          The highest point in Georgia, standing at 4,784 feet.
        </li>
        <li>
          <strong>Blood Mountain:</strong>
          A popular hiking destination on the Appalachian Trail.
        </li>
        <li>
          <strong>Stone Mountain:</strong>
          Famous for its massive granite dome and historical carvings.
        </li>
      </ul>
    </div>
    <div
      class="cmp-tabs__content-item"
      id="tab-1"
      role="tabpanel"
      aria-labelledby="tab-1"
    >
      <p>
        Georgia's river systems are vital for its ecosystem, providing water
        resources and recreational activities. Major rivers flow through the
        state, supporting diverse wildlife and communities.
      </p>
      <ul>
        <li>
          <strong>Chattahoochee River:</strong>
          Flows from the Blue Ridge Mountains to the Gulf of Mexico, passing
          through Atlanta.
        </li>
        <li>
          <strong>Savannah River:</strong>
          Forms the border between Georgia and South Carolina, flowing into the
          Atlantic Ocean.
        </li>
        <li>
          <strong>Flint River:</strong>
          A key river in central and southwestern Georgia, known for its natural
          beauty and biodiversity.
        </li>
      </ul>
    </div>
  </div>
</div>

CSS Classes

Class	Description
.cmp-tabs	Outer container with border and rounded corners
.cmp-tabs__nav	Tab button row (flexbox) with light gray background
.cmp-tabs__nav-item	Individual tab button
.cmp-tabs__nav-item--active	Active tab (Bulldog Red background, light text)
.cmp-tabs__content	Content panel container
.cmp-tabs__content-item	Individual content panel (hidden by default)
.cmp-tabs__content-item--active	Visible content panel

Accessibility

• Tab buttons use role="tab" with aria-selected and aria-controls attributes.
• Content panels use role="tabpanel" with aria-labelledby linking back to the tab button.
• Non-active tabs use tabindex="-1" to remove them from the tab order.

Keyboard Support

Users can navigate between tabs using:

• Tab key to enter/exit the tab list
• Arrow keys to move between tab buttons (handled by JavaScript)
• Enter or Space to activate a tab