Intro Section
This page is a reference page to evaluate and update all block elements.
The assemblySection evaluation is done on a different page to avoid extreme InSection -- link is coming.
Every new section will be built as follows:
- Section name = element name
- intro section with all Attributes and Values of the element
- showcases of ouput for set of values of the element
- closing remarks about the element
quicklinks to section / elements
AssemblyCTA
Creates a Call to Action
| Attribute | required | locale specific | Type | Values * = default | description |
| Assembly Image | yes | no | Object | AssemblyImage | Image included in CTA (only shows when Display is not No Image) |
| Title | no | yes | text | Title above CTA | |
| Sub Title | no | yes | text | Sub Title above CTA | |
| Body | no | yes | Richtext | Text above CTA | |
| Button Text | no | yes | text | Text for the "button" no text = no button | |
| Button Link | no | yes | Object | Page ExternalURL | Link behind the "button" no link = no button |
| New Tab | no | no | checkbox | unticked * ticked | Link opens in same tab Link opens in new tab |
| Button Style | yes | no | dropdown | primary button * secondary button ghost button Text | button in primary color button in secondary color white button with primary border no button, but text link |
| Display | yes | no | dropdown | Default Image * Background Image No Image | image + text below + button image + text on top + button (no image + ) text + button |
| Background Color | no | no | dropdown | (Empty) Default * + All X2O colors | transparent transparent color (only when Display is default) |
Default
----
DEFAULT SETUP:
image shown + Rich text shown aligned left + no button/link (both empty default and not required)
----
Title
Sub Title
Body text is Richt text and start here.
Options ALL DEFAULT
Button Text = empty
Button Link = empty
New Tab = unchecked
Button Style = primary button
Button Style = Default Image
Background Color = Default
Body Rich text ends here.
Button Style
----
If a button text is set AND a link is set (both!), a "button" shows, the whole card becomes clickable with the link behind the button.
Varying Button Style - all the other attributes constant - shows different types of button is this 4 column splitsection
----
Button Style
Primary
Body text is Richt text and start here.
Options
Button Text = empty
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Default Image
Background Color = Default
Body Rich text ends here.
Button Style
Secondary
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = secondary button
Display = Default Image
Background Color = Default
Body Rich text ends here.
Button Style
ghost button
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = ghost button
Display = Default Image
Background Color = Default
Body Rich text ends here.
Button Style
Text
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = Text
Display = Default Image
Background Color = Default
Body Rich text ends here.
Display
----
Varying Display - all the other attributes constant - shows different types of button is this 3 column splitsection
----
Display
Default Image
Body text is Richt text and start here.
Options all Default, same as above. Body ends here.
Display
Background Image
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Background image
Background Color = Default
Body Rich text ends here.
Display
No Image
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Background image
Background Color = Default
Body Rich text ends here.
Background Color
----
Varying Background Color - for all 3 Display options bg 3xORANGE-400 + 1x(Empty) in 4 column splitsection
----
Display + Background Color
Default Image + X2O-Orange-400
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Default Image
Background Color = X2O-Orange-400
Body Rich text ends here.
Display + Background Color
Background Image + X2O-Orange-400
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Background image
Background Color = X2O-Orange-400
Body Rich text ends here.
Display + Background Color
No Image + X2O-Orange-400
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Background image
Background Color = X2O-Orange-400
Body Rich text ends here.
Display + Background Color
Default Image + (Empty)
Body text is Richt text and start here.
Options
Button Text = Button Text
Button Link = this page
New Tab = unchecked
Button Style = primary button
Display = Default Image
Background Color = (Empty)
Body Rich text ends here.
Summary and Discussion AssemblyCTA
----
Font Color on dark images
Background Color on No Image missing?
Padding Title/Sub Title on Default Image?
Title/Sub Title becomes centered when two lined
Background Image is stretched? starts top right?
----
AssemblySingleClickableImage
Creates a Single Clickable Image
| Attribute | required | locale specific | Type | Values * = default | description |
| Title | no | yes | text | Title above CTA | |
| Sub Title | no | yes | text | Sub Title above CTA | |
| Media | yes | yes | Asset | Image (Asset) | Image used |
| Mobile Image | no | yes | Asset | Image (Asset) | Image used on mobile if empty = Media |
| Link | yes | yes | Object | Page ExternalURL | Link behind the Image |
| HighlightColor | yes | no | dropdown | Default * + All X2O colors | transparent color // used or not depends on Card Styling |
| Card Styling | yes | no | dropdown | Default * bordered polaroid grid arrow cta tile | see output below |
| Font-color Title | yes | no | dropdown | Inherit from parent * Primary / Secondary Black / Red / Grey / Green / White | |
| Font-color SubTitle | no | no | dropdown | Inherit from parent * Primary / Secondary Black / Red / Grey / Green / White |
Default
----
DEFAULT SETUP:
Clickable image (to link) with under it = Title and SubTitle left aligned and an arrow cta right aligned
desktop = square 1920 x 1920
mobile = landscape 1920 x 960
----
Colors
----
If HighlightColor is set (first pane, set to X2O-blue-700) in Default Card Styling, this becomes the background of the card; note the Title and Subtitle Color becomes white (set to Default) - nice, but why?
Font-Color Title (second pane, set to Red) and Font-color SubTitle (third pane, set to Red).
----
Card Styling
----
Card Styling | Default | bordered | polaroid | grid | arrow cta tile
First row - no HighllightColor
Second row - Highlightcolor = X2O-Yellow-50 | X2O-Blue-700 | X2O-Gray-50 | X2O-Orange-400 | X2O-Green-50 |
----
Asset Dimensions
----
Image Dimensions
desktop = landscape 1920 x 960
mobile = square 1920 x 1920
----
Summary and Discussion AssemblySingleClickableImage
----
Font Color on Highlight Color automatically changes, but how?
Line-height not clean -> cuts the text!
----
AssemblyClickableImages
Creates a block of Clickable Images
| Attribute | required | locale specific | Type | Values * = default | description |
| Items | no | no | list of Objects | List of AssemblySingleClickableImages | list of SCIs |
| Display | yes | no | dropdown | list (max. 6) / slider (> 6) * grid (max. 6 items per row) fixed grid | see output below |
Default = list (max. 6) / slider (> 6)
----
DEFAULT SETUP:
List of AssemblySingleClickableImage with Display = list (max. 6) / slider (> 6)
set of 3
set of 6
set of 8
----
grid (max. 6 items per row)
----
List of AssemblySingleClickableImage with Display = grid (max. 6 items per row)
set of 3
set of 6
set of 8
----
fixed grid
----
List of AssemblySingleClickableImage with Display = fixed grid
set of 3
set of 6
set of 8
----
fixed grid
----
List of AssemblySingleClickableImage with different start SCI Display
set of 4 start SCI bordered
set of 4 start SCI polaroid
set of 4 start SCI grid
set of 4 start SCI cta from tile
to check if better or different rendered
----
AssemblyGrid
Creates a Grid
| Attribute | required | locale specific | Type | Values * = default | description |
| Title | no | yes | text | (Clickable) Images used in the grid | |
| Content | yes | yes | list of objects | List of AssemblyClickableImage AssemblyImage | list of SCIs |
| Layout | yes | no | dropdown |
not set * | see output below |
| Video | no | no | list of objects |
List of | video in 2x2 image Layout |
| Video | no | no | Asset |
Video (Asset) | video in 2x2 image Layout |
| Image | no | no | Asset |
Image (Asset) | image in 2x2 image Layout |
| Background Color | yes | no | dropdown |
Default * | |
| Font-color | yes | no | dropdown |
Inherit from parent * | |
| Spacing | yes | no | dropdown |
None |
Default
----
DEFAULT SETUP:
SCI grid
1x2
----
