Forms

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, pariatur iure sequi officia! Officiis facere ipsa, cumque praesentium aliquid explicabo nobis mollitia nihil, nemo, ratione omnis accusantium voluptatum sequi, laborum?

i Large Form

Markup

<div class="card card-title card-title-red">

	<h4>Title</h4>

	<div class="copy-wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, pariatur iure sequi officia! Officiis facere ipsa, cumque praesentium aliquid explicabo nobis mollitia nihil, nemo, ratione omnis accusantium voluptatum sequi, laborum?</p>
		<form action="" class="form">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-block">
						<label class="visuallyhidden" for="input-large">input large</label>
						<input type="text" class="form-input" id="input-large" placeholder="input large">
					</div>

					<div class="row">
						<div class="col-sm-8">
							<div class="form-block">
								<label class="visuallyhidden" for="input-medium">input medium</label>
								<input type="text" class="form-input" id="input-medium" placeholder="input medium">
							</div>
						</div>

						<div class="col-sm-4">
							<div class="form-block">
								<label class="visuallyhidden" for="input-small">input small</label>
								<input type="text" class="form-input" id="input-small" placeholder="input small">
							</div>
						</div>
					</div>

					<div class="form-block select">

						<label class="visuallyhidden" for="select">Select field:</label>

						<div class="form-input">

							<select name="select" id="select">
							  <option value="1">1</option>
							  <option value="2">2</option>
							  <option value="3">3</option>
							  <option value="4">4</option>
							  <option value="5">5</option>
							</select>

							<i class="icon icon-arrow">
	                <svg><use xlink:href="img/spritemap.svg#icon-arrow-down"></use><svg>
	            </i>

						</div>

					</div>

					<div class="row">
						<div class="col-sm-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" value="value"> Checkbox
									<div class="control-indicator"></div>
								</label>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" value="value" checked> Selected
									<div class="control-indicator"></div>
								</label>
							</div>
						</div>
					</div>

				</div>
				<div class="row col-sm-6">
					<div class="form-block">
						<label class="visuallyhidden" for="textarea">Label for Text Area</label>
						<textarea id="textarea" class="form-input"text-area" rows="5" placeholder="Text Area"></textarea>
					</div>
					<div class="form-block cf">
						<button type="submit" class="button-link button-link-default alt fl-right">Submit</button>
					</div>
				</div>
			</div>
		</form>
	</div>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=forms" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Large Form</span>
	</a>
	<!-- Do not implement this link -->

</div>

Topic Goes Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, pariatur iure sequi officia! Officiis facere ipsa, cumque praesentium aliquid explicabo nobis mollitia nihil, nemo, ratione omnis accusantium voluptatum sequi, laborum?

i Small Form

Markup

<div class="card card-title card-title-red">

	<h4>Title</h4>

	<div class="copy-wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, pariatur iure sequi officia! Officiis facere ipsa, cumque praesentium aliquid explicabo nobis mollitia nihil, nemo, ratione omnis accusantium voluptatum sequi, laborum?</p>
		<form action="" class="form">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-block">
						<label class="visuallyhidden" for="input-large">input large</label>
						<input type="text" class="form-input" id="input-large" placeholder="input large">
					</div>

					<div class="row">
						<div class="col-sm-8">
							<div class="form-block">
								<label class="visuallyhidden" for="input-medium">input medium</label>
								<input type="text" class="form-input" id="input-medium" placeholder="input medium">
							</div>
						</div>

						<div class="col-sm-4">
							<div class="form-block">
								<label class="visuallyhidden" for="input-small">input small</label>
								<input type="text" class="form-input" id="input-small" placeholder="input small">
							</div>
						</div>
					</div>

					<div class="form-block select">

						<label class="visuallyhidden" for="select">Select field:</label>

						<div class="form-input">

							<select name="select" id="select">
							  <option value="1">1</option>
							  <option value="2">2</option>
							  <option value="3">3</option>
							  <option value="4">4</option>
							  <option value="5">5</option>
							</select>

							<i class="icon icon-arrow">
	                <svg><use xlink:href="img/spritemap.svg#icon-arrow-down"></use><svg>
	            </i>

						</div>

					</div>

					<div class="row">
						<div class="col-sm-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" value="value"> Checkbox
									<div class="control-indicator"></div>
								</label>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" value="value" checked> Selected
									<div class="control-indicator"></div>
								</label>
							</div>
						</div>
					</div>

				</div>
				<div class="row col-sm-6">
					<div class="form-block">
						<label class="visuallyhidden" for="textarea">Label for Text Area</label>
						<textarea id="textarea" class="form-input"text-area" rows="5" placeholder="Text Area"></textarea>
					</div>
					<div class="form-block cf">
						<button type="submit" class="button-link button-link-default alt fl-right">Submit</button>
					</div>
				</div>
			</div>
		</form>
	</div>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=forms" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Large Form</span>
	</a>
	<!-- Do not implement this link -->

</div>

The first is a larger version to be used in general content for more comprehensive tasks. The second can be used as a support element for smaller tasks. These are ultimately suggestions, each form will have to be tailored to its unique task.