• Components
  • Tab

Tab

Tab 1 Tab 2 Tab 3 
@jrmc.tabs()
  @!jrmc.tabs.tab({ text: 'Tab 1', href: '#' })
  @!jrmc.tabs.tab({ text: 'Tab 2', href: '#', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3', href: '#' })
@end
<div role="tablist" class="tabs">
  
  <a
    href="#"
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    href="#"
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    href="#"
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab bordered

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-border' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-border">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab lift

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-lift' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-lift">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab box

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-box' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-box">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab sizes

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3 
<!-- xs -->
@jrmc.tabs({ class: 'tabs-box tabs-xs' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2',  active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- sm -->
@jrmc.tabs({ class: 'tabs-box tabs-sm' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- md -->
@jrmc.tabs({ class: 'tabs-box'})
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- lg -->
@jrmc.tabs({ class: 'tabs-box tabs-lg' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<!-- xs -->
<div role="tablist" class="tabs tabs-box tabs-xs">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- sm -->
<div role="tablist" class="tabs tabs-box tabs-sm">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- md -->
<div role="tablist" class="tabs tabs-box">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- lg -->
<div role="tablist" class="tabs tabs-box tabs-lg">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>