12 #Form Form
12.1 #Form.condensed Condensed
.sf-form.-condensed
Field is required
Example: Input example text
Html
<div class="sf-form -condensed">
<div class="sf-input">
<label class="sf-input__label" for="form_input_9">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_9" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_10">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_10" placeholder="Search the blog..." />
</div>
</div>
12.2 #Form.default-small-large Default, Small, Large
.sf-form, .sf-form.-small, .sf-form.-large
Field is required
Example: Input example text
Field is required
Example: Input example text
Field is required
Example: Input example text
Html
<div class="sf-form">
<div class="sf-input">
<label class="sf-input__label" for="form_input_1">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_1" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_2">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_2" placeholder="Search the blog..." />
</div>
</div>
<div class="sf-form -small">
<div class="sf-input">
<label class="sf-input__label" for="form_input_3">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_3" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_4">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_4" placeholder="Search the blog..." />
</div>
</div>
<div class="sf-form -large">
<div class="sf-input">
<label class="sf-input__label" for="form_input_5">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_5" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_6">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_6" placeholder="Search the blog..." />
</div>
</div>
12.3 #Form.framed Framed
.sf-form.-framed
Html
<div class="sf-form -framed">
<div class="sf-input">
<label class="sf-input__label" for="form_input_7">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_7" placeholder="Search the blog..." />
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_8">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_8" placeholder="Search the blog..." />
</div>
</div>
12.4 #Form.medium Medium Form
.sf-form.-medium
Field is required
Example: Input example text
Html
<div class="sf-form -medium">
<div class="sf-input">
<label class="sf-input__label" for="form_input_3">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_3" placeholder="Search the blog ..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_4">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_4" placeholder="Search the blog ..." />
</div>
</div>
12.5 #Form.shrinked-row Shrinked row — no bottom margin
.sf-form > .sf-input.-shrinked
Field is required
Example: Input example text
Html
<div class="sf-form">
<div class="sf-input -shrinked">
<label class="sf-input__label" for="form_input_11">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_11" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input -shrinked">
<label class="sf-input__label" for="form_input_12">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_12" placeholder="Search the blog..." />
</div>
</div>