Teaser (v4)

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

Click here

actionsEnabled = false

Sample text

mobileFile (minimal value)

Sample text

mobileFile (maximal value)

Sample text

iconPath (minimal value)

Sample text

iconPath (maximal value)

Sample text

linkType = internal

Sample text

linkType = external

Sample text

linkType = document

Sample text

linkType = anchor

Sample text

linkType = gap

Sample text

internalLink (minimal value)

Sample text

Comprehensive test content for text

Click here

internalLink (maximal value)

Sample text

Comprehensive test content for text

Click here

externalLink (minimal value)

Sample text

Comprehensive test content for text

Click here

externalLink (maximal value)

Sample text

Comprehensive test content for text

Click here

document (minimal value)

Sample text

Comprehensive test content for text

Click here

document (maximal value)

Sample text

Comprehensive test content for text

Click here

anchorLink (minimal value)

Sample text

Comprehensive test content for text

Click here

anchorLink (maximal value)

Sample text

Comprehensive test content for text

Click here

gapLink (minimal value)

Sample text

Comprehensive test content for text

Click here

gapLink (maximal value)

Sample text

Comprehensive test content for text

Click here

items – internal link

Sample text

Link text

Second link text

items – external link

Sample text

Link text

Second link text

items – document link

Sample text

Link text

Second link text

items – anchor link

Sample text

Link text

Second link text

items – gap link

Sample text

Link text

Second link text

titleIconPath (minimal value)

Sample text

titleIconPath (maximal value)

Sample text

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

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