Panel
Display important information in a prominent container.
Example usage
{{
html.panel({
'title': 'In West Philadelphia born and raised',
'body': 'In the playground was where I spent most of my days.'
})
}}
See the Pen docs - html - panel by Pulsar (@pulsar) on CodePen.
Options
| Option | Type | Description |
|---|---|---|
| body | string | The main content of the panel |
| class | string | CSS classes, space separated |
| icon | string | Icon to display next to the panel title (optional) |
| id | string | A unique identifier, if required |
| title | string | The title of the panel (optional) |
| data-* | string | Data attributes, eg: 'data-foo': 'bar' |
State Variations
Use the standard state variations to reinforce the message your panel is displaying.
See the Pen docs - html - panel inverse by Pulsar (@pulsar) on CodePen.
.panel--info
See the Pen docs - html - panel info by Pulsar (@pulsar) on CodePen.
.panel--success
See the Pen docs - html - panel success by Pulsar (@pulsar) on CodePen.
.panel--warning
See the Pen docs - html - panel default by Pulsar (@pulsar) on CodePen.
.panel--danger
See the Pen docs - html - panel danger by Pulsar (@pulsar) on CodePen.
.panel--inverse
See the Pen docs - html - panel inverse by Pulsar (@pulsar) on CodePen.
Additional styles
Chain together styles to achieve the most appropriate layout for your needs.
Panel without title/icon
See the Pen docs - html - panel without title by Pulsar (@pulsar) on CodePen.
.panel--padded
See the Pen docs - html - panel padded by Pulsar (@pulsar) on CodePen.
.centered
See the Pen docs - html - panel centered by Pulsar (@pulsar) on CodePen.