Structures

<h3 class="mrgt0">Basic form</h3>
<form>
	<div class="form-group">
		<label for="name" class="field-label">Name</label>
		<input type="text" id="name">
	</div>
	<div class="form-group">
		<label for="email" class="field-label">Email</label>
		<input type="text" id="email">
	</div>
	<div class="form-group">
		<label for="subject" class="field-label">Subject</label>
		<select id="subject">
			<option></option>
			<option>Lorem ipsum</option>
			<option>Dolor sit amet</option>
			<option>Consectur dolor emet</option>
		</select>
	</div>
	<div class="form-group">
		<label for="message" class="field-label">Message</label>
		<textarea id="message" rows="4"></textarea>
	</div>
	<div class="form-group">
		<button type="submit" class="btn btn--primary">Send</button>
	</div>
</form>

<h3>Horizontal form groups</h3>
<form>
	<div class="form-group grid">
		<label for="email" class="field-label grid__item w-1/5">Email</label>
		<div class="grid__item w-4/5">
			<input type="email" name="email">
		</div>
	</div>
	<div class="form-group grid">
		<label for="password" class="field-label grid__item w-1/5">Password</label>
		<div class="grid__item w-4/5">
			<input type="password" name="password">
			<p class="field-help">
				A least 8 characters.
			</p>
		</div>
	</div>
	<div class="form-group grid grid--right">
		<div class="grid__item w-4/5">
			<label class="label--inline"><input type="checkbox"> Remember me</label>
		</div>
	</div>
	<div class="form-group grid grid--right">
		<div class="grid__item w-4/5">
			<button type="submit" class="btn btn--primary">Log in</button>
		</div>
	</div>
</form>

<h3>Fields group</h3>
<div class="form-group">
	<div class="mosaic">
		<input type="text" class="input--small mosaic__cell">
		<div class="mosaic__cell mosaic__cell--fit pdgl--">
			<button class="btn btn--small btn--primary">Button</button>
		</div>
	</div>
</div>
<div class="form-group">
	<div class="mosaic">
		<input type="text" class="mosaic__cell">
		<div class="mosaic__cell mosaic__cell--fit pdgl--">
			<button class="btn btn--primary">Button</button>
		</div>
	</div>
</div>
<div class="form-group">
	<div class="mosaic">
		<input type="text" class="input--large mosaic__cell">
		<div class="mosaic__cell mosaic__cell--fit pdgl--">
			<button class="btn btn--large btn--primary">Button</button>
		</div>
	</div>
</div>