Tab panel

Tab label 1

Heading 1

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Tab label 2

Heading 2

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.

Tab label 3

Heading 3

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

HTML

    
<div class="tab-panel">
  
    <div class="tab-panel__pane">
      <div class="tab-panel__tab-label">Tab label 1</div>
      <div class="tab-panel__content">
        <h1 class="subheading">Heading 1</h1>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur…</p>
      </div>
    </div>
    <div class="tab-panel__pane">
      <div class="tab-panel__tab-label">Tab label 2</div>
      <div class="tab-panel__content">
        <h1 class="subheading">Heading 2</h1>
        <p>Vestibulum id ligula porta felis euismod semper. Maecenas sed diam…</p>
      </div>
    </div>
    <div class="tab-panel__pane">
      <div class="tab-panel__tab-label">Tab label 3</div>
      <div class="tab-panel__content">
        <h1 class="subheading">Heading 3</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam…</p>
      </div>
    </div>
    
</div>

SCSS

    .heading {
  @include heading-font();
  margin: 28px 0;

  .heading__label {
    font-weight: 400;
  }
}