Teaserarticle (v3)

Functional component variations

Default state – all required fields at minimal values

file (minimal value)

file (maximal value)

actionsEnabled = true

actionsEnabled = false

Link & Actions – linkType = internal

Link & Actions – linkType = external

Link & Actions – linkType = document

Link & Actions – linkType = anchor

Link & Actions – linkType = gap

All dialog fields populated with minimal values

jcr:title (minimal value, inherited)

jcr:title (maximal value, inherited)

jcr:description (minimal value, inherited)

jcr:description (maximal value, inherited)

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

id (minimal value, inherited)

id (maximal value, inherited)

mobileFile (minimal value, inherited)

mobileFile (maximal value, inherited)

alternativeText (minimal value, inherited)

alternativeText (maximal value, inherited)

Style variations

Style: Type > Homepage banner

Style: Type > Banner with right CTA

Style: Alignment > Center

Style: Alignment > Right

Style: Mobile Alignment > Top

Style: Mobile Alignment > Bottom

Style: Title Color > AG Green

Style: Title Color > AG Blue

Style: Title Color > White

Style: Title Color > Mobility

Style: Title Color > Home

Style: Title Color > Family

Style: Title Color > Health

Style: Title Color > Invest

Style: Title Color > Pension

Style: Background Color (Teaser with CTA) > Mobility

Style: Background Color (Teaser with CTA) > Home

Style: Background Color (Teaser with CTA) > Family

Style: Background Color (Teaser with CTA) > Health

Style: Background Color (Teaser with CTA) > Invest

Style: Background Color (Teaser with CTA) > Pension

Style: Description Color > White

Style: Description Color > Gray

Style: Style > Rounded corners

Style: Style > Positive line

Default style (no explicit style applied)

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

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

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

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

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

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

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

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

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

Critical integration: required dialog fields combined with primary style