Tabs Tabs sizing Tabs stacked Tabs stacked sizing Pills Pills sizing Pills stacked Pills stacked sizing
UI Molecules
Navs
1.1 Tabs
<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>
1.1 Tabs sizing
<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>
1.1 Tabs
<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>
1.2 Tabs stacked sizing
<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>
1.3 Pills
<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>
1.3 Pills sizing
<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>
1.4 Pills stacked
<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>
1.4 Pills stacked sizing
<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>