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

NameValue
$formlist-shadow$box-shadow
$formlist-border-radius$radius-large
$formlist-border1px solid $border
$formlist-padding1.25em