Tabs

Tabs are an important complement to navigation as they are used to organize information and show different views of the same information. 

Usage

Use one row of tabs with clear one- or two-word labels to best utilize this component.

Example

Columbia Design System tabs component showing events in two tabs: upcoming and ongoing 
<div class="custom_tabs">
<div class="w3-bar w3-black"><button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">My Pending Proposals</button><button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">All My Approved</button><button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">School Course Inventory</button></div>

<div class="w3-container w3-border city" id="London">
<h2>My Pending Proposals</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat, nec sodales odio sollicitudin a. Nunc quis placerat enim, a pulvinar tortor. Fusce eu lectus nec ligula mollis tempor.</p>
</div>

<div class="w3-container w3-border city" id="Paris" style="display:none">
<h2>All My Approved</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat, nec sodales odio sollicitudin a. Nunc quis placerat enim, a pulvinar tortor. Fusce eu lectus nec ligula mollis tempor.</p>
</div>

<div class="w3-container w3-border city" id="Tokyo" style="display:none">
<h2>School Course Inventory</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat, nec sodales odio sollicitudin a. Nunc quis placerat enim, a pulvinar tortor. Fusce eu lectus nec ligula mollis tempor.</p>
</div>
</div>