Skip to main content

Block List

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​

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

Helper options​

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
footerstringString/markup to display in the footer row
headerstringString/markup to display in the header row
itemsarrayAn options hash which will be added as attributes to the block list item, the markup of which is determined by the type
typestringMarkup 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.

FooBarBaz
{{
  html.block_list({
    'type': 'link',
    'items': [
      {'label': 'Foo', 'href': '#foo'},
      {'label': 'Bar', 'href': '#bar'},
      {'label': 'Baz', 'href': '#baz'}
    ]
  })
}}

Div​

Foo
Bar
Baz
{{
  html.block_list({
    'type': 'div',
    'items': [
      {'label': 'Foo', 'href': '#foo'},
      {'label': 'Bar', 'href': '#bar'},
      {'label': 'Baz', 'href': '#baz'}
    ]
  })
}}

Ordered list​

  1. Foo
  2. Bar
  3. Baz
{{
  html.block_list({
    'type': 'ol',
    'items': [
      {'label': 'Foo', 'href': '#foo'},
      {'label': 'Bar', 'href': '#bar'},
      {'label': 'Baz', 'href': '#baz'}
    ]
  })
}}

Unordered list​

  • Foo
  • Bar
  • Baz
{{
  html.block_list({
    'type': 'ul',
    'items': [
      {'label': 'Foo', 'href': '#foo'},
      {'label': 'Bar', 'href': '#bar'},
      {'label': 'Baz', 'href': '#baz'}
    ]
  })
}}

Headers and footers​

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

  • This is the header
  • Foo
  • Bar
  • Baz
  • This is the footer
{{
  html.block_list({
    'header': 'This is the header',
    'footer': 'This is the footer',
    'items': [
      {'value': 'One'},
      {'value': 'Two'},
      {'value': 'Three'}
    ]
  })
}}

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
  • This is the footer
{{
  html.block_list({
    'class': 'block-list--underlined',
    'header': 'This is the header',
    'footer': 'This is the footer',
    'items': [
      {'value': 'One'},
      {'value': 'Two'},
      {'value': 'Three'}
    ]
  })
}}

Bordered​

  • This is the header
  • Foo
  • Bar
  • Baz
  • This is the footer
{{
  html.block_list({
    'class': 'block-list--bordered',
    'header': 'This is the header',
    'footer': 'This is the footer',
    'items': [
      {'value': 'One'},
      {'value': 'Two'},
      {'value': 'Three'}
    ]
  })
}}

Full width​

Can be used in conjunction with underlined or bordered variations.

  • This is the header
  • Foo
  • Bar
  • Baz
  • This is the footer
{{
  html.block_list({
    'class': 'block-list--full',
    'header': 'This is the header',
    'footer': 'This is the footer',
    'items': [
      {'value': 'One'},
      {'value': 'Two'},
      {'value': 'Three'}
    ]
  })
}}

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
{{
  html.block_list({
    'class': 'block-list--horizontal',
    'items': [
      {'value': 'One'},
      {'value': 'Two'},
      {'value': 'Three'}
    ]
  })
}}