Card (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

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

titleFromPage = true (inherited)

Sample text

titleFromPage = false (inherited)

Sample text

descriptionFromPage = true (inherited)

Sample text

descriptionFromPage = false (inherited)

Sample text

Style variations

Style: Display > Mini-image card

Sample text

Style: Display > Icon left

Sample text

Style: Display > Icon in background

Sample text

Style: Display > Image as header

Sample text

Style: Display > Column format

Sample text

Style: Background > Gray

Sample text

Style: Background > Transparent

Sample text

Style: Padding around texts and CTA > Large

Sample text

Style: Borders > Rounded

Sample text

Style: Borders > Dotted

Sample text

Style: Borders > No border

Sample text

Style: Border color > Green

Sample text

Style: Shadow > Yes

Sample text

Style: Highlighted border position > Top

Sample text

Style: Highlighted border position > Left

Sample text

Style: Highlighted border color > AG Blue

Sample text

Style: Highlighted border color > Mobility

Sample text

Style: Highlighted border color > Building

Sample text

Style: Highlighted border color > Family / Enterprise

Sample text

Style: Highlighted border color > Pension

Sample text

Style: Highlighted border color > Health

Sample text

Style: Highlighted border color > Save-Invest

Sample text

Style: Image size (default 170px, only with 'Image as header') > Small (120px)

Sample text

Style: Text horizontal alignment > Center

Sample text

Style: Text horizontal alignment > Right

Sample text

Style: Text vertical alignment > Top

Sample text

Style: Thumbnail alignment (only with 'Column format') > Right

Sample text

Style: Call to Action > Secondary (gray)

Sample text

Style: Call to Action > Secondary (green)

Sample text

Style: Call to Action > Secondary (arrow)

Sample text

Style: Call to Action > Simple

Sample text

Style: Call to Action > Simple (arrow)

Sample text

Default style (no explicit style applied)

Sample text

Style combo 1: Display>Mini-image card + Background>Gray + Padding around texts and CTA>Large + Borders>Rounded + Border color>Green + Shadow>Yes + Highlighted border position>Top + Highlighted border color>AG Blue + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Center + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Secondary (gray)

Sample text

Style combo 2: Display>Icon left + Background>Transparent + Padding around texts and CTA>Large + Borders>Dotted + Border color>Green + Shadow>Yes + Highlighted border position>Left + Highlighted border color>Mobility + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Right + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Secondary (green)

Sample text

Style combo 3: Display>Icon in background + Background>Gray + Padding around texts and CTA>Large + Borders>No border + Border color>Green + Shadow>Yes + Highlighted border position>Top + Highlighted border color>Building + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Center + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Secondary (arrow)

Sample text

Style combo 4: Display>Image as header + Background>Transparent + Padding around texts and CTA>Large + Borders>Rounded + Border color>Green + Shadow>Yes + Highlighted border position>Left + Highlighted border color>Family / Enterprise + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Right + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Simple

Sample text

Style combo 5: Display>Column format + Background>Gray + Padding around texts and CTA>Large + Borders>Dotted + Border color>Green + Shadow>Yes + Highlighted border position>Top + Highlighted border color>Pension + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Center + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Simple (arrow)

Sample text

Style combo 6: Display>Mini-image card + Background>Transparent + Padding around texts and CTA>Large + Borders>No border + Border color>Green + Shadow>Yes + Highlighted border position>Left + Highlighted border color>Health + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Right + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Secondary (gray)

Sample text

Style combo 7: Display>Icon left + Background>Gray + Padding around texts and CTA>Large + Borders>Rounded + Border color>Green + Shadow>Yes + Highlighted border position>Top + Highlighted border color>Save-Invest + Image size (default 170px, only with 'Image as header')>Small (120px) + Text horizontal alignment>Center + Text vertical alignment>Top + Thumbnail alignment (only with 'Column format')>Right + Call to Action>Secondary (green)

Sample text

Critical integration: required dialog fields combined with primary style