Banner

A prominent call-to-action banner section that can use either a background image or color.

Configuration

yaml

- sectionType: banner
  containerTag: aside
  classes: ''
  id: ''
  isDisabled: false
  isReverse: false
  isAnimated: true
  containerFields:
    inContainer: false          # Stretch across viewport
    noMargin:
      top: true
      bottom: true
    noPadding:
      top: false
      bottom: false
    background:
      color: ''
      image: '/assets/images/sample8.jpg'
      imageScreen: 'light'     # Options: light, dark, none
  text:
    leadIn: 'With Background Image'
    title: CTA Banner Example
    titleTag: 'h2'
    subTitle: Uses light image screen for better text contrast
    prose: Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies.
  ctas:
    - url: 'https://apple.com'
      label: 'go to apple'
      isButton: true
      buttonStyle: 'primary'
    - url: 'https://ibm.com'
      label: 'go to big brother'
      isButton: false
      buttonStyle: 'primary'

Configuration Options

Container Layout

Property	Type	Required	Description
`inContainer`	boolean	No	`true` restricts width to content width, `false` stretches banner across viewport

Background Options

Property	Type	Required	Description
`image`	string	No	Background image URL
`color`	string	No	Background color
`isDark`	boolean	No	Indicates dark background for text color adjustment
`imageScreen`	string	No	Screen overlay for better text readability ('light', 'dark', 'none')

Content

Property	Type	Required	Description
`text`	object	Yes	Standard text block with leadIn, title, subtitle, and prose
`ctas`	array	No	Array of call-to-action buttons or links

Accordion Mode

A banner can act as an accordion header that toggles the section directly below it. Add banner-accordion-header to the banner's classes, and add banner-accordion-content is-closed to the classes of the following section (any section type works, rich-text is typical). The is-closed class sets the panel's initial collapsed state.

yaml

# Accordion header
- sectionType: banner
  containerTag: aside
  classes: 'banner-accordion-header'
  containerFields:
    inContainer: false
    background:
      image: '/assets/images/sample9.jpg'
      imageScreen: 'dark'
  text:
    title: Accordion Header Banner
    titleTag: 'h3'
    prose: ''
  ctas: []

# Accordion content (must immediately follow the header)
- sectionType: rich-text
  containerTag: article
  classes: 'banner-accordion-content is-closed'
  text:
    prose: |-
      Etiam porta sem malesuada magna mollis euismod.

The toggle is keyboard accessible (Enter/Space), announces state changes to screen readers, and is SWUP-compatible. It works on non-SWUP sites as well.

This panel is the accordion content. Any section type can serve as the panel; it only needs the banner-accordion-content is-closed classes and must immediately follow the header banner.

Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.

Styling

The banner's adjustable values are component-scoped custom properties, declared on the component root with fallbacks into the global design tokens. Override the properties from lib/overrides/banner/banner.css, not the rules that consume them.

Property	Default	Controls
`--banner-padding`	`var(--space-s-l)`	Text block padding
`--banner-gap`	`var(--space-m-l)`	Gap between text and media
`--banner-border-radius`	`var(--glass-border-radius)`	Image corner radius
`--banner-transition-duration`	`0.5s`	Accordion open/close speed
`--banner-transition-timing`	`ease-in-out`	Accordion easing
`--banner-max-accordion-height`	`1000px`	Open accordion height cap