Form template
Use this as a base for forms.
html
<div class="grid form-example"> <form class="cs1 ce12 form-example--main-content"> <div class="form-group"> <label for="form-example-input-1">Input label</label> <input class="input" type="text" id="form-example-input-1" placeholder="Enter something"/> </div> <div class="form-group"> <label for="form-example-input-3">Input label</label> <select class="select" id="form-example-input-3"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> </select> </div> <div class="form-group"> <label class="checkbox"> <input type="checkbox"/> <span>Select this option</span> </label> </div> <div class="form-group"> <label class="radiobutton"> <input type="radio" name="radio"/> <span>Option 1</span> </label> <label class="radiobutton"> <input type="radio" name="radio"/> <span>Option 2</span> </label> </div> </form> <button type="button" class="cs1 ce12 button button-primary"> Primary action </button> </div>
🏓 Interactive playground
css
.form-example { grid-auto-rows: 1fr auto } .form-example--main-content { align-self: flex-start }
🏓 Interactive playground