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?
<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>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?
<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.