Visualvideoparagraph (v1)

Functional component variations

Default state – all required fields at minimal values

Sample text

Inherited mandatory fields populated – validates parent behaviour

Sample text

Component-specific mandatory fields populated – validates new/overridden behaviour

Sample text

text (minimal value)

Sample text

text (maximal value)

Sample text

This is rich text content for text with underline, a link, and AG Green style.

text (RTE showcase – all formatting options)

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

description (minimal value)

Sample text

description (maximal value)

This is rich text content for description with underline, a link, and AG Green style.

Sample text

description (RTE showcase – all formatting options)

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

Sample text

assetType = image

Sample text

assetType = youtube

Sample text

assetType = vimeo

Sample text

popupMode = true

Sample text

popupMode = false

Sample text

image/imageFilePath (minimal value)

Sample text

image/imageFilePath (maximal value)

Sample text

image/imageFilePathMobile (minimal value)

Sample text

image/imageFilePathMobile (maximal value)

Sample text

youtubeVideo/id (minimal value)

Sample text

youtubeVideo/id (maximal value)

Sample text

youtubeVideo/imageFilePath (minimal value)

Sample text

youtubeVideo/imageFilePath (maximal value)

Sample text

youtubeVideo/imageAltText (minimal value)

Sample text

youtubeVideo/imageAltText (maximal value)

Sample text

youtubeVideo/imageFilePathMobile (minimal value)

Sample text

youtubeVideo/imageFilePathMobile (maximal value)

Sample text

youtubeVideo/imageAltTextMobile (minimal value)

Sample text

youtubeVideo/imageAltTextMobile (maximal value)

Sample text

vimeoVideo/id (minimal value)

Sample text

vimeoVideo/id (maximal value)

Sample text

vimeoVideo/hash (minimal value)

Sample text

vimeoVideo/hash (maximal value)

Sample text

vimeoVideo/imageFilePath (minimal value)

Sample text

vimeoVideo/imageFilePath (maximal value)

Sample text

vimeoVideo/imageAltText (minimal value)

Sample text

vimeoVideo/imageAltText (maximal value)

Sample text

vimeoVideo/imageFilePathMobile (minimal value)

Sample text

vimeoVideo/imageFilePathMobile (maximal value)

Sample text

vimeoVideo/imageAltTextMobile (minimal value)

Sample text

vimeoVideo/imageAltTextMobile (maximal value)

Sample text

All dialog fields populated with minimal values

Sample text

imageModifiers (minimal value, inherited)

Sample text

imageModifiers (maximal value, inherited)

Sample text

alt (minimal value, inherited)

Sample text

alt (maximal value, inherited)

Sample text

jcr:title (minimal value, inherited)

Sample text

jcr:title (maximal value, inherited)

Sample text

linkURL (minimal value, inherited)

Sample text

linkURL (maximal value, inherited)

Sample text

id (minimal value, inherited)

Sample text

id (maximal value, inherited)

Sample text

isDecorative = true (inherited)

Sample text

isDecorative = false (inherited)

Sample text

altValueFromDAM = true (inherited)

Sample text

altValueFromDAM = false (inherited)

Sample text

titleValueFromDAM = true (inherited)

Sample text

Style variations

Style: Corners > Remove rounded corners

Sample text

Style: Image/Video Width (Default 50 : 50) > 1 : 2

Sample text

Style: Image/Video Width (Default 50 : 50) > 2 : 1

Sample text

Style: Image/Video Width (Default 50 : 50) > Full width

Sample text

Style: Desktop Padding (around) > 15px

Sample text

Style: Desktop Padding (around) > 20px

Sample text

Style: Desktop Padding (around) > 30px

Sample text

Style: Desktop Padding (around) > 40px

Sample text

Style: Desktop Padding (around) > 60px

Sample text

Style: Mobile Padding (around) > 15px

Sample text

Style: Mobile Padding (around) > 20px

Sample text

Style: Mobile Padding (around) > 30px

Sample text

Style: Mobile Padding (around) > 40px

Sample text

Style: Mobile Padding (around) > 60px

Sample text

Style: Main Text Alignment > Main text left - Image right

Sample text

Style: Color of list bullets > AG Corporate Green

Sample text

Style: Color of list bullets > AG Corporate Blue

Sample text

Style: Color of list bullets > AG Blue 1

Sample text

Style: Color of list bullets > White

Sample text

Style: Color of list bullets > Light gray

Sample text

Style: Unordered list bullet type > Limitation

Sample text

Style: Unordered list bullet type > Bullets

Sample text

Style: Description Alignment (No text) > Description Bottom

Sample text

Style: Description Alignment (No text) > Description Top

Sample text

Style: Description Alignment (No text) > Description Left

Sample text

Style: Description panel > Secondary AG Green 2

Sample text

Style: Description panel > Secondary AG Blue 2

Sample text

Default style (no explicit style applied)

Sample text

Style combo 1: Corners>Remove rounded corners + Image/Video Width (Default 50 : 50)>1 : 2 + Desktop Padding (around)>15px + Mobile Padding (around)>15px + Main Text Alignment>Main text left - Image right + Color of list bullets>AG Corporate Green + Unordered list bullet type>Limitation + Description Alignment (No text)>Description Bottom + Description panel>Secondary AG Green 2

Sample text

Style combo 2: Corners>Remove rounded corners + Image/Video Width (Default 50 : 50)>2 : 1 + Desktop Padding (around)>20px + Mobile Padding (around)>20px + Main Text Alignment>Main text left - Image right + Color of list bullets>AG Corporate Blue + Unordered list bullet type>Bullets + Description Alignment (No text)>Description Top + Description panel>Secondary AG Blue 2

Sample text

Style combo 3: Corners>Remove rounded corners + Image/Video Width (Default 50 : 50)>Full width + Desktop Padding (around)>30px + Mobile Padding (around)>30px + Main Text Alignment>Main text left - Image right + Color of list bullets>AG Blue 1 + Unordered list bullet type>Limitation + Description Alignment (No text)>Description Left + Description panel>Secondary AG Green 2

Sample text

Style combo 4: Corners>Remove rounded corners + Image/Video Width (Default 50 : 50)>1 : 2 + Desktop Padding (around)>40px + Mobile Padding (around)>40px + Main Text Alignment>Main text left - Image right + Color of list bullets>White + Unordered list bullet type>Bullets + Description Alignment (No text)>Description Bottom + Description panel>Secondary AG Blue 2

Sample text

Style combo 5: Corners>Remove rounded corners + Image/Video Width (Default 50 : 50)>2 : 1 + Desktop Padding (around)>60px + Mobile Padding (around)>60px + Main Text Alignment>Main text left - Image right + Color of list bullets>Light gray + Unordered list bullet type>Limitation + Description Alignment (No text)>Description Top + Description panel>Secondary AG Green 2

Sample text

Critical integration: required dialog fields combined with primary style

Sample text