Block List
Supported products
- Central CMS
- Central Forms
- Central Connect
A block list is a simple way to present lists of information and supports different markup schemes depending on what is most appropriate for the data. Markup can be based around ul
, ol
, div
or link
elements.
- One
- Two
- Three
Basic usage
- Twig
- HTML
{{
html.block_list({
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<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>
Helper options
You can configure this helper using the common helper options, the following options are specific to this helper.
Option | Type | Description |
---|---|---|
footer | string | String/markup to display in the footer row |
header | string | String/markup to display in the header row |
items | array | An options hash which will be added as attributes to the block list item, the markup of which is determined by the type |
type | string | Markup scheme to use: ul (default), ol , div or link |
Markup types
Choose the most appropriate markup scheme depending on the data you need to display.
Link
- Twig
- HTML
{{
html.block_list({
'type': 'link',
'items': [
{'label': 'Foo', 'href': '#foo'},
{'label': 'Bar', 'href': '#bar'},
{'label': 'Baz', 'href': '#baz'}
]
})
}}
<div class="block-list">
<a href="#foo" class="block-list__item">Foo</a>
<a href="#bar" class="block-list__item">Bar</a>
<a href="#baz" class="block-list__item">Baz</a>
</div>
Div
Foo
Bar
Baz
- Twig
- HTML
{{
html.block_list({
'type': 'div',
'items': [
{'label': 'Foo', 'href': '#foo'},
{'label': 'Bar', 'href': '#bar'},
{'label': 'Baz', 'href': '#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>
Ordered list
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'type': 'ol',
'items': [
{'label': 'Foo', 'href': '#foo'},
{'label': 'Bar', 'href': '#bar'},
{'label': 'Baz', 'href': '#baz'}
]
})
}}
<ol class="block-list">
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
</ol>
Unordered list
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'type': 'ul',
'items': [
{'label': 'Foo', 'href': '#foo'},
{'label': 'Bar', 'href': '#bar'},
{'label': 'Baz', 'href': '#baz'}
]
})
}}
<ul class="block-list">
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
</ul>
Headers and footers
Add an optional header and/or footer to a block list.
- This is the header
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'header': 'This is the header',
'footer': 'This is the footer',
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<ul class="block-list">
<li class="block-list__header">This is the header</li>
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
<li class="block-list__footer">This is the footer</li>
</ul>
Style variations
There are a number of different styels available depending on the needs of your UI.
Underlined
- This is the header
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'class': 'block-list--underlined',
'header': 'This is the header',
'footer': 'This is the footer',
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<ul class="block-list block-list--underlined">
<li class="block-list__header">This is the header</li>
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
<li class="block-list__footer">This is the footer</li>
</ul>
Bordered
- This is the header
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'class': 'block-list--bordered',
'header': 'This is the header',
'footer': 'This is the footer',
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<ul class="block-list block-list--bordered">
<li class="block-list__header">This is the header</li>
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
<li class="block-list__footer">This is the footer</li>
</ul>
Full width
Can be used in conjunction with underlined or bordered variations.
- This is the header
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'class': 'block-list--full',
'header': 'This is the header',
'footer': 'This is the footer',
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<ul class="block-list block-list--full">
<li class="block-list__header">This is the header</li>
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
<li class="block-list__footer">This is the footer</li>
</ul>
Horizontal
caution
Don't use a header or footer with a horizontal block list
Horizontal
- Foo
- Bar
- Baz
Horizontal and underlined
- Foo
- Bar
- Baz
Horizontal and bordered
- Foo
- Bar
- Baz
- Twig
- HTML
{{
html.block_list({
'class': 'block-list--horizontal',
'items': [
{'value': 'One'},
{'value': 'Two'},
{'value': 'Three'}
]
})
}}
<ul class="block-list block-list--horizontal">
<li class="block-list__item">Foo</li>
<li class="block-list__item">Bar</li>
<li class="block-list__item">Baz</li>
</ul>