Teaser (v3)

Functional component variations

Default state – all required fields at minimal values

Sample text

file (minimal value)

Sample text

file (maximal value)

Sample text

actionsEnabled = true

Sample text

Comprehensive test content for text

actionsEnabled = false

Sample text

Link & Actions – linkType = internal

Sample text

Link

Second link

Link & Actions – linkType = external

Sample text

Link

Second link

Link & Actions – linkType = document

Sample text

Link

Second link

Link & Actions – linkType = anchor

Sample text

Link

Second link

Link & Actions – linkType = gap

Sample text

Link

Second link

All dialog fields populated with minimal values

Sample text

Link

Second link

jcr:title (minimal value, inherited)

Sample text

jcr:title (maximal value, inherited)

Comprehensive test content for jcr:title

Sample text

jcr:description (minimal value, inherited)

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

Ordered item 1
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

id (maximal value, inherited)

Sample text

mobileFile (minimal value, inherited)

Sample text

mobileFile (maximal value, inherited)

Sample text

iconPath (minimal value, inherited)

Sample text

iconPath (maximal value, inherited)

Sample text

titleFromPage = true (inherited)

Sample text

titleFromPage = false (inherited)

Sample text

descriptionFromPage = true (inherited)

Sample text

descriptionFromPage = false (inherited)

Sample text

Style variations

Style: Type > Homepage banner

Style: Type > Banner with right CTA

Sample text

Style: Alignment > Center

Sample text

Style: Alignment > Right

Sample text

Style: Mobile Alignment > Top

Sample text

Style: Mobile Alignment > Bottom

Sample text

Style: Title Color > AG Green 1

Sample text

Style: Title Color > AG Green 2

Sample text

Style: Title Color > AG Green 3

Sample text

Style: Title Color > AG Green 4

Sample text

Style: Title Color > AG Blue 1

Sample text

Style: Title Color > AG Blue 2

Sample text

Style: Title Color > AG Blue 3

Sample text

Style: Title Color > AG Blue 4

Sample text

Style: Title Color > AG Blue 5

Sample text

Style: Background Color (Teaser with CTA) > AG Green 1

Sample text

Style: Background Color (Teaser with CTA) > AG Green 2

Sample text

Style: Background Color (Teaser with CTA) > AG Green 3

Sample text

Style: Background Color (Teaser with CTA) > AG Green 4

Sample text

Style: Background Color (Teaser with CTA) > AG Blue 1

Sample text

Style: Background Color (Teaser with CTA) > AG Blue 2

Sample text

Style: Background Color (Teaser with CTA) > AG Blue 3

Sample text

Style: Background Color (Teaser with CTA) > AG Blue 4

Sample text

Style: Background Color (Teaser with CTA) > AG Blue 5

Sample text

Style: Description Color > White

Sample text

Style: Description Color > Gray

Sample text

Style: Style > Rounded corners

Sample text

Style: Style > Positive line

Sample text

Default style (no explicit style applied)

Sample text

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

Sample text

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

Sample text

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

Sample text

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

Sample text

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

Sample text

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

Sample text

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

Sample text

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

Sample text

Style combo 9: Type>Homepage banner + Alignment>Center + Mobile Alignment>Top + Title Color>AG Blue 5 + Background Color (Teaser with CTA)>AG Blue 5 + Description Color>White + Style>Rounded corners

Sample text

Critical integration: required dialog fields combined with primary style