Banner

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

Configuration

- 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

Use as an Accordion Header

The banner can be used as a prominent accordion header. Add accordion-header to classes, select an appropriate background and an appropriate imageScreen and leave the other fields empty.

- sectionType: banner
  containerTag: aside
  classes: 'accordion-header'
  #more settings

  containerFields:
    inContainer: false
    #more settings

    background:
      color: ''
      isDark: true
      image: '/assets/images/sample9.jpg'
      imageScreen: 'dark' # light, dark, none
  text:
    leadIn: ''
    title: Fancy Accordion Header
    titleTag: 'h3'
    subTitle: ''
    prose: ''

Now add a text-only section underneath with classes: 'accordion-content is-closed'.

sectionType: text-only
containerTag: article
classes: 'accordion-content is-closed'
# more settings

containerFields:
  inContainer: false
  # more settings

text:
  leadIn: ''
  title: ''
  titleTag: 'h1'
  subTitle: ''
  prose: |-
    Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod.

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

... et voilà.

Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.