title icon Other websites
Guidanceteaser (v3)
Functional component variations
Default state – all required fields at minimal values
Sample text
Sample text
Sample text

Sample text

Inherited mandatory fields populated – validates parent behaviour
Sample text
Sample text
Sample text

Sample text

file (minimal value)
Sample text
Sample text
Sample text

Sample text

file (maximal value)
Sample text
Sample text
Sample text

Sample text

actionsEnabled = true
Sample text
Sample text
Sample text

Sample text

actionsEnabled = false
Sample text
Sample text
Sample text

Sample text

linkType = internal
Sample text
Sample text
Sample text

Sample text

linkType = external
Sample text
Sample text
Sample text

Sample text

linkType = document
Sample text
Sample text
Sample text

Sample text

linkType = anchor
Sample text
Sample text
Sample text

Sample text

linkType = gap
Sample text
Sample text
Sample text

Sample text

All dialog fields populated with minimal values
Sample text
Sample text
Sample text

Sample text

simpleLink/linkType = simpleLink/internal (inherited)
Sample text
Sample text
Sample text

Sample text

simpleLink/linkType = simpleLink/external (inherited)
Sample text
Sample text
Sample text

Sample text

simpleLink/linkType = simpleLink/document (inherited)
Sample text
Sample text
Sample text

Sample text

simpleLink/linkType = simpleLink/anchor (inherited)
Sample text
Sample text
Sample text

Sample text

simpleLink/linkType = simpleLink/gap (inherited)
Sample text
Sample text
Sample text

Sample text

primaryLink/linkType = primaryLink/internal (inherited)
Sample text
Sample text
Sample text

Sample text

primaryLink/linkType = primaryLink/external (inherited)
Sample text
Sample text
Sample text

Sample text

primaryLink/linkType = primaryLink/document (inherited)
Sample text
Sample text
Sample text

Sample text

primaryLink/linkType = primaryLink/anchor (inherited)
Sample text
Sample text
Sample text

Sample text

primaryLink/linkType = primaryLink/gap (inherited)
Sample text
Sample text
Sample text

Sample text

jcr:title (minimal value, inherited)
Sample text
Sample text
Sample text

Sample text

jcr:title (maximal value, inherited)
Sample text
Sample text
Sample text

Comprehensive test content for jcr:title

jcr:description (minimal value, inherited)
Sample text
Sample text
Sample text

Sample text

jcr:description (maximal value, inherited)
Sample text
Sample text

This is rich text content for jcr:description with underline, a link, and AG Green style.

Sample text

jcr:description (RTE showcase – all formatting, inherited)
Sample text
Sample text

Heading 1 – RTE showcase

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold text, italic text, underlined text, bold-italic, bold-underline

  • Unordered item 1
  • Unordered item 2
  1. Ordered item 1
  2. Ordered item 2

Internal link | External link

AG Green styled text AG Blue styled text AG White styled text

Special characters: © € ® ™ – —

Left aligned

Center aligned

Right aligned

Sample text

Style variations
Style: Type > Homepage banner
Sample text
Sample text
Sample text

Sample text

Style: Type > Banner with right CTA
Sample text
Sample text
Sample text

Sample text

Style: Alignment > Center
Sample text
Sample text
Sample text

Sample text

Style: Alignment > Right
Sample text
Sample text
Sample text

Sample text

Style: Mobile Alignment > Top
Sample text
Sample text
Sample text

Sample text

Style: Mobile Alignment > Bottom
Sample text
Sample text
Sample text

Sample text

Style: Title Color > AG Green
Sample text
Sample text
Sample text

Sample text

Style: Title Color > AG Blue
Sample text
Sample text
Sample text

Sample text

Style: Title Color > White
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Mobility
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Home
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Family
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Health
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Invest
Sample text
Sample text
Sample text

Sample text

Style: Title Color > Pension
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Mobility
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Home
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Family
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Health
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Invest
Sample text
Sample text
Sample text

Sample text

Style: Background Color (Teaser with CTA) > Pension
Sample text
Sample text
Sample text

Sample text

Style: Description Color > White
Sample text
Sample text
Sample text

Sample text

Style: Description Color > Gray
Sample text
Sample text
Sample text

Sample text

Style: Style > Rounded corners
Sample text
Sample text
Sample text

Sample text

Style: Style > Positive line
Sample text
Sample text
Sample text

Sample text

Default style (no explicit style applied)
Sample text
Sample text
Sample text

Sample text

Style combo 1: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>AG Green + Background Color (Teaser with CTA)>Mobility + Description Color>White + Style>Rounded corners
Sample text
Sample text
Sample text

Sample text

Style combo 2: Type>Banner with right CTA + Alignment>Right + Mobile Alignment>Bottom + Title Color>AG Blue + Background Color (Teaser with CTA)>Home + Description Color>Gray + Style>Positive line
Sample text
Sample text
Sample text

Sample text

Style combo 3: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>White + Background Color (Teaser with CTA)>Family + Description Color>White + Style>Rounded corners
Sample text
Sample text
Sample text

Sample text

Style combo 4: Type>Banner with right CTA + Alignment>Right + Mobile Alignment>Bottom + Title Color>Mobility + Background Color (Teaser with CTA)>Health + Description Color>Gray + Style>Positive line
Sample text
Sample text
Sample text

Sample text

Style combo 5: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>Home + Background Color (Teaser with CTA)>Invest + Description Color>White + Style>Rounded corners
Sample text
Sample text
Sample text

Sample text

Style combo 6: Type>Banner with right CTA + Alignment>Right + Mobile Alignment>Bottom + Title Color>Family + Background Color (Teaser with CTA)>Pension + Description Color>Gray + Style>Positive line
Sample text
Sample text
Sample text

Sample text

Style combo 7: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>Health + Background Color (Teaser with CTA)>Mobility + Description Color>White + Style>Rounded corners
Sample text
Sample text
Sample text

Sample text

Style combo 8: Type>Banner with right CTA + Alignment>Right + Mobile Alignment>Bottom + Title Color>Invest + Background Color (Teaser with CTA)>Home + Description Color>Gray + Style>Positive line
Sample text
Sample text
Sample text

Sample text

Style combo 9: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>Pension + Background Color (Teaser with CTA)>Family + Description Color>White + Style>Rounded corners
Sample text
Sample text
Sample text

Sample text

Critical integration: required dialog fields combined with primary style
Sample text
Sample text
Sample text

Sample text