Tabs

<div class="ug-tabs">
  <nav class="ug-tabs__nav">
    <a class="ug-tabs__link ug-tabs__link--active" href="#" data-ug-tab="overview">Overview</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="details">Details</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="map">Map</a>
  </nav>
  <div class="ug-tabs__content">
    <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="overview">
      <p>Overview panel content. This is the default visible tab.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="details">
      <p>Details panel content with more in-depth information.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="map">
      <p>Map panel content with location details.</p>
    </div>
  </div>
</div>

<div class="ug-tabs ug-tabs--bordered">
  <nav class="ug-tabs__nav">
    <a class="ug-tabs__link ug-tabs__link--active" href="#" data-ug-tab="tab1">Wildlife</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="tab2">Flora</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="tab3">Geology</a>
  </nav>
  <div class="ug-tabs__content">
    <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">
      <p>Wildlife information including bears, elk, and bison.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="tab2">
      <p>Flora details covering wildflowers, forests, and alpine plants.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="tab3">
      <p>Geology content about rock formations and volcanic activity.</p>
    </div>
  </div>
</div>

<div class="ug-tabs ug-tabs--pills">
  <nav class="ug-tabs__nav">
    <a class="ug-tabs__link ug-tabs__link--active" href="#" data-ug-tab="all">All</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="hiking">Hiking</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="camping">Camping</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="fishing">Fishing</a>
  </nav>
  <div class="ug-tabs__content">
    <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="all">
      <p>Showing all activities available in the park.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="hiking">
      <p>Hiking trails and difficulty ratings.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="camping">
      <p>Campground availability and reservation details.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="fishing">
      <p>Fishing regulations and permitted areas.</p>
    </div>
  </div>
</div>

<div class="ug-tabs ug-tabs--vertical">
  <nav class="ug-tabs__nav">
    <a class="ug-tabs__link ug-tabs__link--active" href="#" data-ug-tab="general">General Info</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="hours">Hours</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="fees">Fees</a>
    <a class="ug-tabs__link" href="#" data-ug-tab="directions">Directions</a>
  </nav>
  <div class="ug-tabs__content">
    <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="general">
      <p>General park information, history, and visitor guidelines.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="hours">
      <p>Park hours vary by season. Check the official website for current hours.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="fees">
      <p>Entry fees, annual passes, and fee-free days.</p>
    </div>
    <div class="ug-tabs__panel" data-ug-panel="directions">
      <p>Driving directions, nearest airports, and shuttle services.</p>
    </div>
  </div>
</div>