UI Molecules

<ul class="amui-m-nav-tabs nav nav-tabs">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#menu1" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#menu2" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#menu3" data-toggle="tab">Tab</a></li>
</ul>

<div class="tab-content amui-h-p-md">
  <div id="menu1" class="tab-pane fade in active">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <div id="menu2" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut</p>
      </div>
    </div>
  </div>

  <div id="menu3" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut, magni vitae dignissimos provident, neque dicta modi quis distinctio hic, quam vero aliquam. Necessitatibus minus omnis consectetur error?</p>
      </div>
    </div>
  </div>
</div>

<ul class="amui-m-nav-tabs nav nav-tabs is--xs">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs is--sm">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs is--lg">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#" data-toggle="tab">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs nav-stacked amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#menu4" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#menu5" data-toggle="tab">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#menu6" data-toggle="tab">Tab</a></li>
</ul>

<div class="tab-content amui-h-p-md amui-g-grid__item col-md-9">
  <div id="menu4" class="tab-pane fade in active">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <div id="menu5" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut</p>
      </div>
    </div>
  </div>

  <div id="menu6" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut, magni vitae dignissimos provident, neque dicta modi quis distinctio hic, quam vero aliquam. Necessitatibus minus omnis consectetur error?</p>
      </div>
    </div>
  </div>
</div>

<ul class="amui-m-nav-tabs nav nav-tabs nav-stacked is--xs amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs nav-stacked is--sm amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs nav-stacked amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
</ul>

<ul class="amui-m-nav-tabs nav nav-tabs nav-stacked is--lg amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-tabs__item active"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
  <li role="presentation" class="amui-m-nav-tabs__item"><a href="#">Tab</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#menu7" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#menu8" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#menu9" data-toggle="pill">Messages</a></li>
</ul>

<div class="tab-content amui-h-p-md amui-g-grid__item col-md-9">
  <div id="menu7" class="tab-pane fade in active">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <div id="menu8" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut</p>
      </div>
    </div>
  </div>

  <div id="menu9" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut, magni vitae dignissimos provident, neque dicta modi quis distinctio hic, quam vero aliquam. Necessitatibus minus omnis consectetur error?</p>
      </div>
    </div>
  </div>
</div>

<ul class="amui-m-nav-pills nav nav-pills is--xs">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills is--sm">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills is--lg">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills nav-stacked amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#menu10" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#menu11" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#menu12" data-toggle="pill">Messages</a></li>
</ul>

<div class="tab-content amui-h-p-md amui-g-grid__item col-md-9">
  <div id="menu10" class="tab-pane fade in active">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>

  <div id="menu11" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut</p>
      </div>
    </div>
  </div>

  <div id="menu12" class="tab-pane fade">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item col-xs-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum accusantium ab ut, magni vitae dignissimos provident, neque dicta modi quis distinctio hic, quam vero aliquam. Necessitatibus minus omnis consectetur error?</p>
      </div>
    </div>
  </div>
</div>

<ul class="amui-m-nav-pills nav nav-pills nav-stacked is--xs amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills nav-stacked is--sm amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills nav-stacked amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>

<ul class="amui-m-nav-pills nav nav-pills nav-stacked is--lg amui-g-grid__item col-md-3">
  <li role="presentation" class="amui-m-nav-pills__item active"><a href="#" data-toggle="pill">Home</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Profile</a></li>
  <li role="presentation" class="amui-m-nav-pills__item"><a href="#" data-toggle="pill">Messages</a></li>
</ul>