Banner

Description

The banner is a component of varying size, intended for use with announcements or calls to action. It can be rendered in 'small', 'narrow', and standard sizes.

Default Banner, Full Size, w/ Optional Buttons

Rendered



Banner, Narrow

Rendered



Banner, Small

Rendered



Options

classes : string

type : small | narrow | null
This value determines the type of banner to be rendered, and greatly changes the appearance of the component. Leave blank to use default value.

header : string

body : string

primary_button : string

primary_btn_link : string

primary_btn_class : string

secondary_button : string
Please note: this value is only available on the default layout.

secondary_btn_link : string
Please note: this value is only available on the default layout.

secondary_btn_class : string
Please note: this value is only available on the default layout.


Default Banner, Full Size, w/ Optional Buttons

Code


{% include components/banner.html classes="inverted" header="Header Goes Here" primary_button="primary button" secondary_button="secondary button" %}

Rendered



Banner, Narrow

Code


{% include components/banner.html header="Header Goes Here." body="This is optional body copy." primary_button="primary button" classes="inverted" type="narrow" %}

Rendered



Banner, Small

Code


{% include components/banner.html type="small" header="Header Goes Here." body="This is optional body copy." primary_button="primary button" %}

Rendered