Skip to main content

Panel

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Display important information in a prominent container.

In West Philadelphia born and raised

In the playground was where I spent most of my days.

Basic usage

{{
html.panel({
'title': 'In West Philadelphia born and raised',
'body': 'In the playground was where I spent most of my days.',
'icon': 'info-sign'
})
}}

Helper options

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

OptionTypeDescription
actionsarrayAn array of html.button options to be displayed within the panel
actions_positionstringPosition of the actions, left (default), inline, center, right
bodystringThe main content of the panel
classstringCSS classes, space separated
iconstringIcon to display next to the panel title
idstringA unique identifier, if required
titlestringThe title of the panel
data-*stringData attributes, eg: 'data-foo': 'bar'

Title

The title is optional and will be displayed next to the optional icon. You should carefully choose your title to quickly summarise the information or choice the panel is presenting to the user.

tip

A panel without a title will render as a div, not a section

Icon

You can choose any icon to reinforce the visual distinction of the panel, you will need to carefully consider the appropriate icon to pair with any panel state class you may be providing. It’s not a good idea to use an error icon with a success state, for example.

Actions

A panel can contain optional calls to action which allow the user to act on the important information the panel is bringing to their attention.

Pass a hash of key:value pairs to the actions and they'll be rendered as buttons, the available options are the same as the regular button helper.

tip

You can also pass fully-formed HTML instead of a hash if you need to render anything other than a button

{{
html.panel({
'title': 'Default (left) placement',
'icon': 'info-sign',
'body': 'You need to do a thing.',
'actions': [
{
'label': 'Don’t Do The Thing',
'class': 'btn--outline btn--small btn--inverse'
},
{
'label': 'Do The Thing',
'class': 'btn--outline btn--small btn--inverse',
'type': 'link',
'href': '#path-to-action'
}
]
})
}}

Default (left) placement

You need to do a thing.
Do The Thing