Awesomeness

Selection

Checkboxes Inside a Form Group

Form groups can be used to visually group several checkboxes. Use the class .form-component--group as a wrapper. The checkboxes themeselves consist of a .media__img Element for the checkbox and a .media__bd Element for the label.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component--group">
	<div class="media checkbox">
		<div class="media__img">
			<input id="cb-1" type="checkbox" checked/>
		</div>
		<div class="media__bd">
			<label for="cb-1">Hi, I'm a Checkbox</label>
		</div>
	</div>
	<div class="media checkbox">
		<div class="media__img">
			<input id="cb-2" type="checkbox"/>
		</div>
		<div class="media__bd">
			<label for="cb-2">Please check me too!</label>
		</div>
	</div>
</div>

Nested Checkbox

Checkboxes that belong to input fields can be grouped with the .input--with-nested-element.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="input--with-nested-element">
	<label class="input-required" for="email">E-Mail Address</label>
	<input type="email" id="email" data-validation-type="email" data-validation-message="Bitte geben Sie eine gültige E-mail Adresse ein" placeholder="office@intuio.at" required>
	<div class="media checkbox">
		<div class="media__img">
			<input type="checkbox" checked name="invite" id="mail-invite">
		</div>
		<div class="media__bd">
			<label for="mail-invite">Send me an invitation.</label>
		</div>
	</div>
</div>

Radio Buttons

Radio Buttons can be grouped through a form group to visually indicate, that they belong together. Use the .form-component--group element as a wrapper.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component--group">
	<div class="media radio">
		<div class="media__img">
			<input id="r-1" type="radio" name="rg-1" checked/>
		</div>
		<div class="media__bd">
			<label for="r-1">Hi, I'm a selected Radio Button.</label>
		</div>
	</div>
	<div class="media radio">
		<div class="media__img">
			<input id="r-2" type="radio" name="rg-1"/>
		</div>
		<div class="media__bd">
			<label for="r-2">Please choose me!</label>
		</div>
	</div>
</div>

Dropdown

Dropdowns are styled to fit the design of other form elements

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<select id="dropdown" class="space-lover">
	<option>Drop</option>
	<option>It</option>
	<option>Like</option>
	<option>It's</option>
	<option>Hot</option>
</select>