Navigation

Pagination

<div class="pagination">
   <a href="nav.html#pagination" class="next">Previous</a>
   <a href="nav.html#pagination" class="previous">Next</a>
</div>
.pagination
  a.next(href='nav.html#pagination') Previous
  a.previous(href='nav.html#pagination') Next
.pagination {
    margin-top: 0;
    width: 100%;
    padding-right: 30px;
    position: relative;
    bottom: 27px;
}
.pagination a {
    text-decoration: none;
}
.pagination a:hover {
    color: #262a48;
}
.pagination .next:before {
    font-size: 30px;
    content: '\2190';
    position: relative;
    padding-right: 4px;
    top: 3px;
}
.pagination .previous {
    float: right;
}
.pagination .previous:after {
    font-size: 30px;
    content: '\2192';
    position: relative;
    padding-left: 4px;
    top: 3px;
}
.pagination {
    margin-top: 0;
    width: 100%;
    padding-right: 30px;
    position: relative;
    bottom: 27px;

    a {
        text-decoration: none;

        &:hover {
            color:$darkblue;
        }
    }

    .next {
         &:before {
            font-size:30px;
            content: '\2190';
            position: relative;
            padding-right: 4px;
            top:3px;
         }
    }
    .previous {
        float: right;
         &:after {
            font-size:30px;
            content: '\2192';
            position: relative;
            padding-left: 4px;
            top:3px;
         }
    }
}

Tabs

Please use the pure HTML/CSS tabs in your project, as displayed below. This is preferrred over tabs sourced via a javascript library or framework, or standalone javascript.

Best suited for 2-5 tabs. For fewer tabs, remove the appropriate input, label, and content div elements from the markup and the tabs will readjust accordingly.

Tab content one

Tab content two

Content will adjust height

Tab content three

Tab content four

Content will adjust height

Content will adjust even more

Tab content five


<div class="tabs">
  <!-- Begin inputs -->
  <input class="tabs-state" name="tabs-state" type="radio" id="tab-1" checked />
  <input class="tabs-state" name="tabs-state" type="radio" id="tab-2" />
  <input class="tabs-state" name="tabs-state" type="radio" id="tab-3" />
  <input class="tabs-state" name="tabs-state" type="radio" id="tab-4" />
  <input class="tabs-state" name="tabs-state" type="radio" id="tab-5" />
  <!-- End inputs -->
  <!-- Begin Labels -->
  <div class="flex-tabs">
      <label for="tab-1" class="tab">Tab 1</label>
      <label for="tab-2" class="tab">Tab 2</label>
      <label for="tab-3" class="tab">Tab 3</label>
      <label for="tab-4" class="tab">Tab 4</label>
      <label for="tab-5" class="tab">Tab 5</label>
  </div>
  <!-- End Labels -->
  <!-- Begin content -->
   <div class="content">
      <div class="panel active">
          <p>Tab content one</p>
      </div>
      <div class="panel">
          <p>Tab content two</p>
          <p>Content will adjust height</p>
      </div>
      <div class="panel">
          <p>Tab content three</p>
      </div>
      <div class="panel">
          <p>Tab content four</p>
          <p>Content will adjust height</p>
          <p>Content will adjust even more</p>
      </div>
      <div class="panel">
          <p>Tab content five</p>
      </div>
   </div>
   <!-- End content -->
</div>
 

.tabs
  // Begin inputs
  input#tab-1.tabs-state(name='tabs-state', type='radio', checked='')
  input#tab-2.tabs-state(name='tabs-state', type='radio')
  input#tab-3.tabs-state(name='tabs-state', type='radio')
  input#tab-4.tabs-state(name='tabs-state', type='radio')
  input#tab-5.tabs-state(name='tabs-state', type='radio')
  // End inputs
  // Begin Labels
  .flex-tabs
    label.tab(for='tab-1') Tab 1
    label.tab(for='tab-2') Tab 2
    label.tab(for='tab-3') Tab 3
    label.tab(for='tab-4') Tab 4
    label.tab(for='tab-5') Tab 5
  // End Labels
  // Begin content
  .content
    .panel.active
      p Tab content one
    .panel
      p Tab content two
      p Content will adjust height
    .panel
      p Tab content three
    .panel
      p Tab content four
      p Content will adjust height
      p Content will adjust even more
    .panel
      p Tab content five
  // End content
  

.tabs {
  text-align: center;
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-style: normal; }
  .tabs .tabs-state {
    display: none; }
  .tabs .flex-tabs {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .tabs .flex-tabs .tab {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
  .tabs .tab {
    padding: 20px 10px;
    background-color: white;
    color: #999cab;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid #e5e6ea;
    font-weight: 400;
    z-index: 1; }

.content .panel {
  margin-top: -6px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  border: 1px solid #e5e6ea;
  display: none;
  text-align: left; }

.tabs-state:nth-child(1):checked ~ .flex-tabs .tab:nth-child(1), .tabs-state:nth-child(2):checked ~ .flex-tabs .tab:nth-child(2), .tabs-state:nth-child(3):checked ~ .flex-tabs .tab:nth-child(3), .tabs-state:nth-child(4):checked ~ .flex-tabs .tab:nth-child(4), .tabs-state:nth-child(5):checked ~ .flex-tabs .tab:nth-child(5) {
  background-color: #fff;
  color: #0099ff;
  cursor: default;
  border-top: 1px solid #e5e6ea;
  border-right: 1px solid #e5e6ea;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #e5e6ea; }

.tabs-state:nth-child(1):checked ~ .content .panel:nth-child(1), .tabs-state:nth-child(2):checked ~ .content .panel:nth-child(2), .tabs-state:nth-child(3):checked ~ .content .panel:nth-child(3), .tabs-state:nth-child(4):checked ~ .content .panel:nth-child(4), .tabs-state:nth-child(5):checked ~ .content .panel:nth-child(5) {
      display: block;}
  

.tabs {
    text-align: center;
    @include latolight;

    .tabs-state {
      display: none;
    }

    .flex-tabs {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;

        .tab {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          flex-grow: 1;
        }
    }

    .tab {
      padding: 20px 10px;
      background-color: white;
      color: $gray;
      font-size: 16px;
      cursor: pointer;
      border-bottom: 1px solid $border;
      font-weight: 400;
      z-index: 1;
    }
}

// content
.content .panel {
  margin-top: -6px;
  background-color: $white;
  padding-top: 20px;
  padding-left: 20px;
  border: 1px solid $border;
  display: none;
  text-align: left;
 }

// styles for active tab
// Consider using Sass loops
.tabs-state:nth-child(1):checked ~ .flex-tabs .tab:nth-child(1),
.tabs-state:nth-child(2):checked ~ .flex-tabs .tab:nth-child(2),
.tabs-state:nth-child(3):checked ~ .flex-tabs .tab:nth-child(3),
.tabs-state:nth-child(4):checked ~ .flex-tabs .tab:nth-child(4),
.tabs-state:nth-child(5):checked ~ .flex-tabs .tab:nth-child(5)
{
    background-color: $white;
    color: $blue;
    cursor: default;
    border-top: 1px solid $border;
    border-right: 1px solid $border;
    border-bottom: 1px solid $white;
    border-left: 1px solid $border;
}

// content display on click
.tabs-state:nth-child(1):checked ~ .content .panel:nth-child(1),
.tabs-state:nth-child(2):checked ~ .content .panel:nth-child(2),
.tabs-state:nth-child(3):checked ~ .content .panel:nth-child(3),
.tabs-state:nth-child(4):checked ~ .content .panel:nth-child(4),
.tabs-state:nth-child(5):checked ~ .content .panel:nth-child(5) {
    display: block;
}