Form list
This content is for v4. Click here to see the latest version.
Wraps a list of fields inside of a box.
Showcase
Code
<!-- Wrap your fields in a div with the class 'form-list' -->
<div class="form-list">
<div class="field"><label class="label">Name of book #1</label>
<div class="control">
<input readonly="true" type="text" class="input" placeholder="" value="The warded man">
</div>
<p class="help"></p>
</div>
<div class="field"><label class="label">Author of book #1</label>
<div class="control">
<input readonly="true" type="text" class="input" placeholder="" value="Peter V. Brett">
</div>
<p class="help"></p>
</div>
<div class="field"><label class="label">Summary of book #1</label>
<div class="control">
<textarea class="textarea" readonly="true" placeholder="">
The Painted Man, book one of the Demon Cycle, is a captivating
and thrilling fantasy adventure, pulling the reader
into a world of demons, darkness and heroes.
</textarea>
</div>
<p class="help"></p>
</div>
</div>
See form list example for an interactive example.
Variables
Name | Value |
---|---|
$formlist-shadow | $box-shadow |
$formlist-border-radius | $radius-large |
$formlist-border | 1px solid $border |
$formlist-padding | 1.25em |