Tabbed Card

By James Stone

card links tabs content image icons flexbox

How do I use This?

A simple card with a title and Tabs in the header. You can tab through card content.

HTML

    <div class="card card-tabs">

      <div class="card-divider">
        <h6 class="float-left">Title</h6>
        <ul class="tabs menu align-right" data-active-collapse="true" data-tabs id="collapsing-tabs">
          <!-- note: these need to be in reverse order because of the align-right setting in .menu -->
          <li class="tabs-title"><a href="#panel3c">
            <i class="fa fa-cog" aria-hidden="true"></i> Settings
          </a></li>
          <li class="tabs-title"><a href="#panel2c">
          <i class="fa fa-area-chart" aria-hidden="true"></i>
            Stats
          </a></li>
          <li class="tabs-title is-active"><a href="#panel1c" aria-selected="true"><i class="fa fa-home" aria-hidden="true"></i>
           Home</a></li>
         </ul>
       </div>

       <div class="tabs-content" data-tabs-content="collapsing-tabs">

        <div class="tabs-panel is-active" id="panel1c">
          <img src="https://lorempixel.com/485/248/cats/7/">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>

        <div class="tabs-panel" id="panel2c">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and has a cat on the bottom.</p>
          </div>
          <img src="https://lorempixel.com/485/248/cats/5/">
        </div>

        <div class="tabs-panel" id="panel3c">
          <div class="card-section">
            <h4>This is a card.</h4>
            <img src="https://lorempixel.com/485/248/cats/6/">
            <p>It has an easy to override visual style, it has an image in the card section.</p>
          </div>
        </div>

      </div>

    </div>

.card-tabs {
  .card-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;

    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 0;
    }

    .fa {
      position: relative;
      margin-right: 0;
    }
  }

  .tabs {
    padding-top: 4px;
  }

  .tabs,
  .tabs a {
    background:none;
  }

  .tabs a {
    padding: 0;
    margin: 0 10px;
    font-size: 13px;
    color: lighten($body-font-color, 50%);
  }

  .tabs a:hover,
  .tabs .is-active a {
    color: $body-font-color;
  }

  .tabs-panel {
    padding: 0;
  }
}

.card-tabs .card-divider {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px 20px;
}

.card-tabs .card-divider h1, .card-tabs .card-divider h2, .card-tabs .card-divider h3, .card-tabs .card-divider h4, .card-tabs .card-divider h5, .card-tabs .card-divider h6 {
  margin-bottom: 0;
}

.card-tabs .card-divider .fa {
  position: relative;
  margin-right: 0;
}

.card-tabs .tabs {
  padding-top: 4px;
}

.card-tabs .tabs,
.card-tabs .tabs a {
  background: none;
}

.card-tabs .tabs a {
  padding: 0;
  margin: 0 10px;
  font-size: 13px;
  color: #8a8a8a;
}

.card-tabs .tabs a:hover,
.card-tabs .tabs .is-active a {
  color: #0a0a0a;
}

.card-tabs .tabs-panel {
  padding: 0;
}

Tabbed Card

By James Stone

Inline Quote

Portfolio Resume Scrolling Container

Product Feature Section

Tabbed Card

By James Stone

Similar Building Blocks

Inline Quote

Portfolio Resume Scrolling Container

Product Feature Section