PF-Tabs
beta

Introduction

Taaaaaaabs

Examples

Basic example

One Two Three 
<div class="pf-tabs">
        <a href="#" class=" pf-tabs--active">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
    </div>

Long copy

One In-school onboarding in-progress applications Three 
<div class="pf-tabs">
        <a href="#">One</a>
        <a href="#" class=" pf-tabs--active">In-school onboarding in-progress applications</a>
        <a href="#">Three</a>
    </div>

Excessive tabs

One Two Three Four Five Six Seven Eight Nine Ten 
<div class="pf-tabs">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
        <a href="#">Four</a>
        <a href="#">Five</a>
        <a href="#">Six</a>
        <a href="#">Seven</a>
        <a href="#">Eight</a>
        <a href="#">Nine</a>
        <a href="#" class=" pf-tabs--active">Ten</a>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_pf-tabs.scss

Usage

Class/JavaScript Hook Description Required?
.pf-tabs Placed on the list of links you want to style. Required
.pf-tabs--active Placed on the tab you want to look active Optional