Components

Input / Label

This is another section that includes the section with the different modifiers of 1.1

<insert-markup>2.1-</insert-markup>

Name:

Markup: templates/02_components/input_label.html

<div class="form-field [modifier]">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

Source: source/scss/02_components/_form.scss, line 1

<insert-markup>2.2-</insert-markup>

Markup: templates/02_components/form.html

<form action="#" method="get" class="form ">
    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    <div class="form-field form-field--inner">
	<label class="form-field__label">Name:</label>
	<input class="form-input {{modifier_class}}" type="text" placeholder="Text Input" />
</div>

    
<button class="btn btn--cta">Send</button>
</form>

Source: source/scss/02_components/_form.scss, line 40

KSS-Scheibo - Styleguide

Components

Input / Label

Form