UI Organisms
Form
1.1 Vertical Form
<form class="amui-o-form-group form-inline clearfix">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label is--inline" for="exampleInputName1">Name</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
</div>
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label is--inline" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
<div class="amui-m-form-group form-group amui-h-mt-md">
<button type="button" class="amui-a-btn is--default is--sm">Default button</button>
</div>
</form>
1.2 Horizontal form
<form class="amui-o-form-group form-horizontal clearfix">
<div class="amui-m-form-group form-group">
<label for="exampleInputName1" class="col-sm-2 control-label amui-a-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
</div>
</div>
<div class="amui-m-form-group form-group">
<label for="exampleInputEmail1" class="col-sm-2 control-label amui-a-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="amui-m-form-group form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="amui-a-btn is--default is--sm">Default button</button>
</div>
</div>
</form>
1.1 Form custom widths
<form class="amui-o-form-group clearfix">
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName1">Name</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
</div>
</div>
<div class="amui-g-grid__item col-xs-12">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 col-sm-2">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputName1">Name</label>
<input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-2">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-2">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-4">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 col-sm-2">
<div class="amui-m-form-group form-group">
<label class="amui-a-form-label" for="exampleInputEmail1">Email</label>
<input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
</form>