Labels Colors Labels Icons Labels Rounded Labels Rounded Icons

UI Atoms

Labels

1.1 Labels colors

Default Primary Secondary Success Info Warning Danger
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--default">Default</span>
    <span class="amui-a-label is--primary">Primary</span>
    <span class="amui-a-label is--secondary">Secondary</span>
    <span class="amui-a-label is--success">Success</span>
    <span class="amui-a-label is--info">Info</span>
    <span class="amui-a-label is--warning">Warning</span>
    <span class="amui-a-label is--danger">Danger</span>
  </div>
</div>

<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--filter-1">Item 1</span>
    <span class="amui-a-label is--filter-2">Item 2</span>
    <span class="amui-a-label is--filter-3">Item 3</span>
    <span class="amui-a-label is--filter-4">Item 4</span>
    <span class="amui-a-label is--filter-5">Item 5</span>
    <span class="amui-a-label is--filter-6">Item 6</span>
    <span class="amui-a-label is--filter-7">Item 7</span>
    <span class="amui-a-label is--filter-8">Item 8</span>
    <span class="amui-a-label is--filter-9">Item 9</span>
    <span class="amui-a-label is--filter-10">Item 10</span>
  </div>
</div>

1.2 Labels icons (On right)

Defaultclose Primaryclose Secondaryclose Successclose Infoclose Warningclose Dangerclose
Item 1close Item 2close Item 3close Item 4close Item 5close Item 6close Item 7close Item 8close Item 9close Item 10close 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--icon-right is--default">Default<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--primary">Primary<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--secondary">Secondary<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--success">Success<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--info">Info<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--warning">Warning<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--danger">Danger<i class="material-icons md-16">close</i></span>
  </div>
</div>

<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--icon-right is--filter-1">Item 1<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-2">Item 2<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-3">Item 3<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-4">Item 4<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-5">Item 5<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-6">Item 6<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-7">Item 7<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-8">Item 8<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-9">Item 9<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--icon-right is--filter-10">Item 10<i class="material-icons md-16">close</i></span>
  </div>
</div>

1.3 Labels rounded

Default Primary Secondary Success Info Warning Danger
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--rounded is--default">Default</span>
    <span class="amui-a-label is--rounded is--primary">Primary</span>
    <span class="amui-a-label is--rounded is--secondary">Secondary</span>
    <span class="amui-a-label is--rounded is--success">Success</span>
    <span class="amui-a-label is--rounded is--info">Info</span>
    <span class="amui-a-label is--rounded is--warning">Warning</span>
    <span class="amui-a-label is--rounded is--danger">Danger</span>
  </div>
</div>

<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--rounded is--filter-1">Item 1</span>
    <span class="amui-a-label is--rounded is--filter-2">Item 2</span>
    <span class="amui-a-label is--rounded is--filter-3">Item 3</span>
    <span class="amui-a-label is--rounded is--filter-4">Item 4</span>
    <span class="amui-a-label is--rounded is--filter-5">Item 5</span>
    <span class="amui-a-label is--rounded is--filter-6">Item 6</span>
    <span class="amui-a-label is--rounded is--filter-7">Item 7</span>
    <span class="amui-a-label is--rounded is--filter-8">Item 8</span>
    <span class="amui-a-label is--rounded is--filter-9">Item 9</span>
    <span class="amui-a-label is--rounded is--filter-10">Item 10</span>
  </div>
</div>

1.4 Labels rounded icons (On right)

Defaultclose Primaryclose Secondaryclose Successclose Infoclose Warningclose Dangerclose
Item 1close Item 2close Item 3close Item 4close Item 5close Item 6close Item 7close Item 8close Item 9close Item 10close 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--rounded is--icon-right is--default">Default<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--primary">Primary<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--secondary">Secondary<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--success">Success<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--info">Info<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--warning">Warning<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--danger">Danger<i class="material-icons md-16">close</i></span>
  </div>
</div>

<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <span class="amui-a-label is--rounded is--icon-right is--filter-1">Item 1<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-2">Item 2<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-3">Item 3<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-4">Item 4<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-5">Item 5<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-6">Item 6<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-7">Item 7<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-8">Item 8<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-9">Item 9<i class="material-icons md-16">close</i></span>
    <span class="amui-a-label is--rounded is--icon-right is--filter-10">Item 10<i class="material-icons md-16">close</i></span>
  </div>
</div>
← Infography Logo →