Teasernavigationhomepage (v1)
Functional component variations
Default state – all required fields at minimal values
file (minimal value)
file (maximal value)
actionsEnabled = true
actionsEnabled = false
alternativeText (minimal value)
alternativeText (maximal value)
linksCards – internal link
linksCards – external link
linksCards – document link
linksCards – anchor link
linksCards – gap link
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)
mobileFile (minimal value, inherited)
mobileFile (maximal value, inherited)
descriptionFromPage = true (inherited)
descriptionFromPage = false (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