Homepageteaser (v2)
Functional component variations
Default state – all required fields at minimal values

Sample text


Sample text

file (minimal value)

Sample text


Sample text

file (maximal value)

Sample text


Sample text

actionsEnabled = true

actionsEnabled = false

Sample text


Sample text

Link & Actions – linkType = internal

Sample text



Link & Actions – linkType = external

Sample text



Link & Actions – linkType = document

Sample text



Link & Actions – linkType = anchor

Sample text



Link & Actions – linkType = gap

Sample text



All dialog fields populated with minimal values

Sample text



jcr:title (minimal value, inherited)

Sample text


Sample text

jcr:title (maximal value, inherited)

Comprehensive test content for jcr:title


Sample text

jcr:description (minimal value, inherited)

Sample text


Sample text

jcr:description (maximal value, inherited)

Sample text


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


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

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


id (minimal value, inherited)

Sample text


Sample text

id (maximal value, inherited)

Sample text


Sample text

mobileFile (minimal value, inherited)

Sample text


Sample text

mobileFile (maximal value, inherited)

Sample text


Sample text

Style variations
Style: Type > Homepage banner

Sample text


Sample text

Style: Type > Banner with right CTA

Sample text


Sample text

Style: Alignment > Center

Sample text


Sample text

Style: Alignment > Right

Sample text


Sample text

Style: Mobile Alignment > Top

Sample text


Sample text

Style: Mobile Alignment > Bottom

Sample text


Sample text

Style: Title Color > AG Green

Sample text


Sample text

Style: Title Color > AG Blue

Sample text


Sample text

Style: Title Color > White

Sample text


Sample text

Style: Title Color > Mobility

Sample text


Sample text

Style: Title Color > Home

Sample text


Sample text

Style: Title Color > Family

Sample text


Sample text

Style: Title Color > Health

Sample text


Sample text

Style: Title Color > Invest

Sample text


Sample text

Style: Title Color > Pension

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Mobility

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Home

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Family

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Health

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Invest

Sample text


Sample text

Style: Background Color (Teaser with CTA) > Pension

Sample text


Sample text

Style: Description Color > White

Sample text


Sample text

Style: Description Color > Gray

Sample text


Sample text

Style: Style > Rounded corners

Sample text


Sample text

Style: Style > Positive line

Sample text


Sample text

Default style (no explicit style applied)

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

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

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

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

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

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

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

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

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

Critical integration: required dialog fields combined with primary style

Sample text


Sample text