Tabs

mb-tab is used when you want to change the content on a page. The active tab is visible by a green border at the bottom when aria-selected="true".

Example

Tab 1 content

<div role="tablist" aria-label="Filter Tabs" class="flex gas mbm">
<button class="mb-tab flex flex-dir-col tl phm pvs" role="tab" aria-selected="true" aria-controls="panel1"
  id="tab1"> 
  <span class="mrm">In transit</span><span class="fwb">11</span></button>
<button class="mb-tab flex flex-dir-col tl phm pvs" role="tab" aria-selected="false" aria-controls="panel2"
  id="tab2">
  <span class="mrm">Loaded on vehicle</span><span class="fwb">43</span>
</button>
<button class="mb-tab flex flex-dir-col tl phm pvs" role="tab" aria-selected="false" aria-controls="panel3"
  id="tab3">
  <span class="mrm">Delivered</span><span class="fwb">243</span>
</button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1" class="bg-gray2 pam">
<p>Tab 1 content</p>
</div>
<div id="panel2" hidden role="tabpanel" aria-labelledby="tab2" class="bg-gray2 pam">
<p>Tab 2 content</p>
</div>
<div id="panel3" hidden role="tabpanel" aria-labelledby="tab3" class="bg-gray2 pam">
<p>Tab 3 content</p>
</div>