Section header with "red" elements - Keyline font style "default"

sceenshot section header

Keyline font style "Title large"

sceenshot section header

Section header with fullbleed background color

large port view

Section heading with link at top right

large port view

How it works

  • The section header is part of the grid control.
  • Elements (all optional)
    • Keyline
    • Decorative red line
    • Infoline
    • Link (top right)
  • For the keyline two font sizes are available.
  • In all sizes the section header is marked up as 'H2' and therefore has high relevance on SEO.
  • In the infoline, single words may be highlighted in red (only without background color).
  • It is possible to show / hide red line below key line.
  • The empty space below the section header area can be ajusted (from 20 to 120 px in the desktop viewport)

How to use it

  • The section header can help to generate a visual break between two sections.
  • Use it also for grouping to comply with SEO and Accessibility standards.
  • Choose the right font size and message area width that best fits your specific message.

Further information

Please refer to our brand design guidelines on details about using the message concept with a keyline and infoline.

Brand design guidelines (goto/bdp)

Crosslinks

Reference for publisher

AEM view

The section header is part of the grid control. It consists of the keyline, infoline and an image (all optional).

AEM view
  1. First part of the Keyline can underlined in red.
  2. Link text for the link at top right
  3. Part of the infoline can be formatted (bold) in red.
AEM view

The empty space can be selected in the Styles Tab,  a several options are added: small, medium, large (from 20 to 120 px in the desktop viewport)

Crosslinks

ubs.com AEM user guide