Forms

Ensemble forms are created by adding the form class to the form tag. Inputs are styled using the input class, and labels receive their styling through the label class.

Ensemble forms can be used with the grid system inside them, giving you the flexibility to layout your forms as needed.

In this example we have laid out the form using the Ensemble grid to achieve our desired layout.

<form action="" class="form">
	<div class="grid-container">
		<div class="grid-row">
			<div class="column-6">
				<label class="label" for="name">Name</label>
				<input class="input" type="text">
			</div>
			<div class="column-6">
				<label class="label" for="email">Email</label>
				<input class="input" type="email">
			</div>
		</div>
		<div class="grid-row">
			<div class="column-12 margin-top-30">
				<label class="label" for="message">Message</label>
				<textarea class="input" name="message" rows="8" cols="40"></textarea>
			</div>
		</div>
		<div class="grid-row">
			<div class="column-12 margin-top-20">
				<button class="button button--green text-color-10" type="button" name="button">Submit</button>
			</div>
		</div>
	</div>
</form>