UCLA Component Library

Tabs 

<!-- .tabs is the container for both tabs and panels -->
<div class="tabs">
    <!-- .tablist is the container for tabs only -->
    <div role="tablist" aria-label="content-tabs">
        <button role="tab" aria-selected="true" aria-controls="panel-01-tab" id="panel-01" class="btn tablinks">
            Leadership
        </button>
        <button role="tab" aria-selected="false" aria-controls="panel-02-tab" id="panel-02" class="btn tablinks" tabindex="-1">
            Tenured
        </button>
        <button role="tab" aria-selected="false" aria-controls="panel-03-tab" id="panel-03" class="btn tablinks" tabindex="-1" data-deletable="">
            Adjunct
        </button>
    </div>
    <!-- .tabcontent contain panels of content -->
    <div tabindex="0" role="tabpanel" id="panel-01-tab" aria-labelledby="panel-01" class="tabcontent">
        <p>Panel 1: Leadership</p>
        <p>Include content about your department's faculty leadership here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
    <div tabindex="0" role="tabpanel" id="panel-02-tab" aria-labelledby="panel-02" hidden="" class="tabcontent">
        <p>Panel 2: Tenured</p>
        <p>Include content about your department's tenured faculty here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
    <div tabindex="0" role="tabpanel" id="panel-03-tab" aria-labelledby="panel-03" hidden="" class="tabcontent">
        <p>Panel 3: Adjunct</p>
        <p>Include content about your department's adjunct faculty here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
</div>