Tabbed Card

By James Stone

F6
#
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="http://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="http://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="http://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;
}

JS