KSS-Scheibo - Styleguide

Input / Label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

<insert-markup>2.1-</insert-markup>
form-field--inner
The label into the input
<insert-markup>2.1-0</insert-markup>
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