v2.1.0

Tab

  • Basic

    Outset

    <div class="tab">
      <ul class="tab-list">
        <li><a id="tab-1" class="current">tab1</a></li>
        <li><a id="tab-2">tab2</a></li>
        <li><a id="tab-3">tab3</a></li>
      </ul>
      <ul class="tab-content outset-neomo">
        <li id="content-1" class="tab-content--list">
          <div class="tab-content--title">title1</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
        <li id="content-2" class="tab-content--list">
          <div class="tab-content--title">title2</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
        <li id="content-3" class="tab-content--list">
          <div class="tab-content--title">title3</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
      </ul>
    </div>
    
    • title1
      You can insert any type of content with this tab class.
    • title2
      You can insert any type of content with this tab class.
    • title3
      You can insert any type of content with this tab class.

    Inset

    <div class="tab">
      <ul class="tab-list">
        <li><a id="tab-4" class="current">tab4</a></li>
        <li><a id="tab-5">tab5</a></li>
        <li><a id="tab-6">tab6</a></li>
      </ul>
      <ul class="tab-content inset-neomo">
        <li id="content-4" class="tab-content--list">
          <div class="tab-content--title">title4</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
        <li id="content-5" class="tab-content--list">
          <div class="tab-content--title">title5</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
        <li id="content-6" class="tab-content--list">
          <div class="tab-content--title">title6</div>
          <div class="tab-content--text">
            You can insert any type of content with this tab class.
          </div>
        </li>
      </ul>
    </div>
    
    • title4
      You can insert any type of content with this tab class.
    • title5
      You can insert any type of content with this tab class.
    • title6
      You can insert any type of content with this tab class.
  • Vertical

    Vertical

    <div class="tab vertical">
      <div class="columns">
        <div class="column size-4">
          <ul class="tab-list">
            <li><a id="tab-7" class="current">tab7</a></li>
            <li><a id="tab-8">tab8</a></li>
            <li><a id="tab-9">tab9</a></li>
          </ul>
        </div>
        <div class="column size-8">
          <ul class="tab-content inset-neomo">
            <li id="content-7" class="tab-content--list">
              <div class="tab-content--title">title7</div>
              <div class="tab-content--text">
                You can insert any type of content with this tab class.
              </div>
            </li>
            <li id="content-8" class="tab-content--list">
              <div class="tab-content--title">title8</div>
              <div class="tab-content--text">
                You can insert any type of content with this tab class.
              </div>
            </li>
            <li id="content-9" class="tab-content--list">
              <div class="tab-content--title">title9</div>
              <div class="tab-content--text">
                You can insert any type of content with this tab class.
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    • title7
      You can insert any type of content with this tab class.
    • title8
      You can insert any type of content with this tab class.
    • title9
      You can insert any type of content with this tab class.