UI Atoms
Labels
1.1 Labels colors
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="default" class="amui-a-label is--default">Default</label>
<label for="primary" class="amui-a-label is--primary">Primary</label>
<label for="secondary" class="amui-a-label is--secondary">Secondary</label>
<label for="sucess" class="amui-a-label is--success">Success</label>
<label for="info" class="amui-a-label is--info">Info</label>
<label for="warning" class="amui-a-label is--warning">Warning</label>
<label for="danger" class="amui-a-label is--danger">Danger</label>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="item-1" class="amui-a-label is--filter-1">Item 1</label>
<label for="item-2" class="amui-a-label is--filter-2">Item 2</label>
<label for="item-3" class="amui-a-label is--filter-3">Item 3</label>
<label for="item-4" class="amui-a-label is--filter-4">Item 4</label>
<label for="item-5" class="amui-a-label is--filter-5">Item 5</label>
<label for="item-6" class="amui-a-label is--filter-6">Item 6</label>
<label for="item-7" class="amui-a-label is--filter-7">Item 7</label>
<label for="item-8" class="amui-a-label is--filter-8">Item 8</label>
<label for="item-9" class="amui-a-label is--filter-9">Item 9</label>
<label for="item-10" class="amui-a-label is--filter-10">Item 10</label>
</div>
</div>
1.2 Labels icons (On right)
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="default" class="amui-a-label is--icon-right is--default">Default<i class="material-icons md-16">close</i></label>
<label for="primary" class="amui-a-label is--icon-right is--primary">Primary<i class="material-icons md-16">close</i></label>
<label for="secondary" class="amui-a-label is--icon-right is--secondary">Secondary<i class="material-icons md-16">close</i></label>
<label for="sucess" class="amui-a-label is--icon-right is--success">Success<i class="material-icons md-16">close</i></label>
<label for="info" class="amui-a-label is--icon-right is--info">Info<i class="material-icons md-16">close</i></label>
<label for="warning" class="amui-a-label is--icon-right is--warning">Warning<i class="material-icons md-16">close</i></label>
<label for="danger" class="amui-a-label is--icon-right is--danger">Danger<i class="material-icons md-16">close</i></label>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="item-1" class="amui-a-label is--icon-right is--filter-1">Item 1<i class="material-icons md-16">close</i></label>
<label for="item-2" class="amui-a-label is--icon-right is--filter-2">Item 2<i class="material-icons md-16">close</i></label>
<label for="item-3" class="amui-a-label is--icon-right is--filter-3">Item 3<i class="material-icons md-16">close</i></label>
<label for="item-4" class="amui-a-label is--icon-right is--filter-4">Item 4<i class="material-icons md-16">close</i></label>
<label for="item-5" class="amui-a-label is--icon-right is--filter-5">Item 5<i class="material-icons md-16">close</i></label>
<label for="item-6" class="amui-a-label is--icon-right is--filter-6">Item 6<i class="material-icons md-16">close</i></label>
<label for="item-7" class="amui-a-label is--icon-right is--filter-7">Item 7<i class="material-icons md-16">close</i></label>
<label for="item-8" class="amui-a-label is--icon-right is--filter-8">Item 8<i class="material-icons md-16">close</i></label>
<label for="item-9" class="amui-a-label is--icon-right is--filter-9">Item 9<i class="material-icons md-16">close</i></label>
<label for="item-10" class="amui-a-label is--icon-right is--filter-10">Item 10<i class="material-icons md-16">close</i></label>
</div>
</div>
1.3 Labels rounded
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="default" class="amui-a-label is--rounded is--default">Default</label>
<label for="primary" class="amui-a-label is--rounded is--primary">Primary</label>
<label for="secondary" class="amui-a-label is--rounded is--secondary">Secondary</label>
<label for="sucess" class="amui-a-label is--rounded is--success">Success</label>
<label for="info" class="amui-a-label is--rounded is--info">Info</label>
<label for="warning" class="amui-a-label is--rounded is--warning">Warning</label>
<label for="danger" class="amui-a-label is--rounded is--danger">Danger</label>
</div>
<div class="amui-g-grid__item col-xs-12">
<label for="item-1" class="amui-a-label is--rounded is--filter-1">Item 1</label>
<label for="item-2" class="amui-a-label is--rounded is--filter-2">Item 2</label>
<label for="item-3" class="amui-a-label is--rounded is--filter-3">Item 3</label>
<label for="item-4" class="amui-a-label is--rounded is--filter-4">Item 4</label>
<label for="item-5" class="amui-a-label is--rounded is--filter-5">Item 5</label>
<label for="item-6" class="amui-a-label is--rounded is--filter-6">Item 6</label>
<label for="item-7" class="amui-a-label is--rounded is--filter-7">Item 7</label>
<label for="item-8" class="amui-a-label is--rounded is--filter-8">Item 8</label>
<label for="item-9" class="amui-a-label is--rounded is--filter-9">Item 9</label>
<label for="item-10" class="amui-a-label is--rounded is--filter-10">Item 10</label>
</div>
</div>
1.4 Labels rounded icons (On right)
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="default" class="amui-a-label is--rounded is--icon-right is--default">Default<i class="material-icons md-16">close</i></label>
<label for="primary" class="amui-a-label is--rounded is--icon-right is--primary">Primary<i class="material-icons md-16">close</i></label>
<label for="secondary" class="amui-a-label is--rounded is--icon-right is--secondary">Secondary<i class="material-icons md-16">close</i></label>
<label for="sucess" class="amui-a-label is--rounded is--icon-right is--success">Success<i class="material-icons md-16">close</i></label>
<label for="info" class="amui-a-label is--rounded is--icon-right is--info">Info<i class="material-icons md-16">close</i></label>
<label for="warning" class="amui-a-label is--rounded is--icon-right is--warning">Warning<i class="material-icons md-16">close</i></label>
<label for="danger" class="amui-a-label is--rounded is--icon-right is--danger">Danger<i class="material-icons md-16">close</i></label>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12">
<label for="item-1" class="amui-a-label is--rounded is--icon-right is--filter-1">Item 1<i class="material-icons md-16">close</i></label>
<label for="item-2" class="amui-a-label is--rounded is--icon-right is--filter-2">Item 2<i class="material-icons md-16">close</i></label>
<label for="item-3" class="amui-a-label is--rounded is--icon-right is--filter-3">Item 3<i class="material-icons md-16">close</i></label>
<label for="item-4" class="amui-a-label is--rounded is--icon-right is--filter-4">Item 4<i class="material-icons md-16">close</i></label>
<label for="item-5" class="amui-a-label is--rounded is--icon-right is--filter-5">Item 5<i class="material-icons md-16">close</i></label>
<label for="item-6" class="amui-a-label is--rounded is--icon-right is--filter-6">Item 6<i class="material-icons md-16">close</i></label>
<label for="item-7" class="amui-a-label is--rounded is--icon-right is--filter-7">Item 7<i class="material-icons md-16">close</i></label>
<label for="item-8" class="amui-a-label is--rounded is--icon-right is--filter-8">Item 8<i class="material-icons md-16">close</i></label>
<label for="item-9" class="amui-a-label is--rounded is--icon-right is--filter-9">Item 9<i class="material-icons md-16">close</i></label>
<label for="item-10" class="amui-a-label is--rounded is--icon-right is--filter-10">Item 10<i class="material-icons md-16">close</i></label>
</div>
</div>