Banner Component - Metalsmith Call-to-Action Section

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. Addbanner-accordion-headerto the banner'sclasses, and addbanner-accordion-content is-closedto theclassesof the following section (any section type works,rich-textis typical). Theis-closedclass 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.