p Tabs enable quick switch between different views.
      
.docs-demo.columns
  .column.col-6.col-sm-12
    ul.tab
      li.tab-item.active
        a(href="#tabs")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
      li.tab-item
        a(href="#tabs")
          | Store
  .column.col-6.col-sm-12
    ul.tab.tab-block
      li.tab-item.active
        a(href="#tabs")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio

p
  | Add a container element with the #[code tab] class. 
  | And add child elements with the #[code tab-item] class. 
  | You can add the #[code tab-block] class for a full-width tab.
  | The #[code tab-item] or its child #{''} with the #[code active] class will be highlighted.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-           Music

-           Playlists

-           Radio

-           Connect

.docs-demo.columns
  .column.col-sm-12
    ul.tab
      li.tab-item.active
        a.badge(href="#tabs" data-badge="999")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
  .column.col-sm-12
    ul.tab.tab-block
      li.tab-item.active
        a.badge(href="#tabs" data-badge="9")
          | Music
      li.tab-item
        a.badge(href="#tabs" data-badge="99")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio

p
  | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-           
            Music

.docs-demo.columns
  .column.col-12
    ul.tab
      li.tab-item.active
        a(href="#tabs")
          | Music
          span.btn.btn-clear
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
      li.tab-item
        a(href="#tabs")
          | Store
      li.tab-item.tab-action
        .input-group.input-inline
          input.form-input.input-sm(type="text" placeholder="search")
          button.btn.btn-primary.btn-sm.input-group-btn Search

p
  | You could add a search box or buttons inside a tab.
  | Add the #[code tab-action] class to the #[code tab-item].

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-           
            Music

-           
            
            Search

