Block list

A simple way to present lists of information using whatever markup scheme is most appropriate for the data. Markup can be based around ul (default), ol, div or link elements.

Example usage

{{
    html.block_list({
        'items': [
            {'value': 'One'},
            {'value': 'Two'},
            {'value': 'Three'}
        ]
    })
}}

Will result in:

<ul class="block-list">
    <li class="block-list__item">One</li>
    <li class="block-list__item">Two</li>
    <li class="block-list__item">Three</li>
</ul>

See the Pen zGQryX by Paul Stanton (@stanton) on CodePen.

List items can be a singular block-level element, or a collection of elements in a wrapper.

Options

Option Type Description
class string CSS classes, space separated
footer string String/Markup to display in the footer row
header string String/Markup to display in the header row
id string A unique identifier, if required
items array An options hash which will added as attributes to the div, li or a element (defined by type)
type string Markup scheme to use: ul (default), ol, div or link
data-* string Data attributes, eg: 'data-foo': 'bar' 
{{
    html.block_list({
        'type': 'link',
        'items': [
            {'label': 'Foo', 'href': '#foo'},
            {'label': 'Bar', 'href': '#bar'},
            {'label': 'Baz', 'href': '#baz'}
        ]
    })
}}

Output:

<div class="block-list">
    <a class="block-list__item" href="#foo">Foo</a>
    <a class="block-list__item" href="#bar">Bar</a>
    <a class="block-list__item" href="#baz">Baz</a>
</div>

Example using div markup scheme

{{
    html.block_list({
        'type': 'div',
        'items': [
            {'value': 'Foo'},
            {'value': 'Bar'},
            {'value': 'Baz'}
        ]
    })
}}

<div class="block-list">
    <div class="block-list__item">Foo</div>
    <div class="block-list__item">Bar</div>
    <div class="block-list__item">Baz</div>
</div>

Header / Footer

Add an optional header and/or footer row to your block list.

{{
    html.block_list({
        'header': 'My Header',
        'footer': 'My Footer',
        'items': [ ... ]
    })
}}

Modifiers

Selected item

Use .is-selected on a block-list__item to highlight a currently selected item.

See the Pen Block list - selected item by Paul Stanton (@stanton) on CodePen.

States

See the Pen zGQKgQ by Paul Stanton (@stanton) on CodePen.

Variations

Underlined

.block-list--underlined

See the Pen jPoWdx by Paul Stanton (@stanton) on CodePen.

Bordered

.block-list--bordered

See the Pen mJYVoO by Paul Stanton (@stanton) on CodePen.

Full width

.block-list--full

See the Pen doEpKy by Paul Stanton (@stanton) on CodePen.

Horizontal

.block-list--horizontal

See the Pen Block list - horizontal by Paul Stanton (@stanton) on CodePen.

Contrast

.block-list--contrast

See the Pen Block list - contrast by Paul Stanton (@stanton) on CodePen.

results matching ""

    No results matching ""