<h3 style="margin-top:0">Addons</h3> <div class="ui-g ui-fluid"> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span> <a:inputText placeholder="Username" /> </div> </div> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon">$</span> <a:inputText placeholder="Price" /> <span class="ui-inputgroup-addon">.00</span> </div> </div> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon">www</span> <a:inputText placeholder="Website" /> </div> </div> </div> <h3>Multiple Addons</h3> <div class="ui-g"> <div class="ui-g-12"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span> <span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span> <a:inputText placeholder="Price" /> <span class="ui-inputgroup-addon">$</span> <span class="ui-inputgroup-addon">.00</span> </div> </div> </div> <h3>Button Addons</h3> <div class="ui-g ui-fluid"> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <a:commandButton value="Search"/> <a:inputText placeholder="Keyword" /> </div> </div> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <a:inputText placeholder="Keyboard" /> <a:commandButton icon="fa fa-search" styleClass="white-button"/> </div> </div> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <a:commandButton icon="fa fa-check" styleClass="green-button"/> <a:inputText placeholder="Vote" /> <a:commandButton icon="fa fa-close" styleClass="red-button"/> </div> </div> </div> <h3>Checkbox</h3> <div class="ui-g ui-fluid"> <div class="ui-g-12 ui-md-4"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon-checkbox"><a:selectBooleanCheckbox /></span> <a:inputText placeholder="Username" /> </div> </div> </div> /* Demo Style */ <style type="text/css"> .white-button.ui-button.ui-state-default { background-color: #ffffff; color: #222222; border-color: #d6d6d6; } .white-button.ui-button.ui-state-default:enabled:hover, .white-button.ui-button.ui-state-default:focus { background-color: #f2f2f2; border-color: #ccc; color: #373a3c; } .green-button.ui-button.ui-state-default { background-color: #5cb85c; border-color: #5cb85c; color: #fff; } .green-button.ui-button.ui-state-default:enabled:hover, .green-button.ui-button.ui-state-default:focus { background-color: #4cae4c; border-color: #5cb85c; } .red-button.ui-button.ui-state-default { background-color: #d9534f; border-color: #d9534f; color: #fff; } .red-button.ui-button.ui-state-default:enabled:hover, .red-button.ui-button.ui-state-default:focus { background-color: #d43f3a; border-color: #d9534f; } </style>