Complement Section
Create hero, announcement, list and progress layouts.
How to use
- Choose a variant and fill its heading, description and relevant fields.
- For lists, put comma-separated items in itemsText; separate each FAQ question and answer with a vertical bar.
- For progress, set the percentage and duration, then replace sample copy.
Things to check
Newsletter fields and buttons are presentational; this block does not subscribe emails or process payments.
Property reference
Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.
83 / 83
accentColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
avatarSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
backgroundColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
badgeRadius
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
bodyColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
bodyFontFamily
Font family. Keep headings and body text consistent with the presentation typography.
bodyFontSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
bodyFontStyle
Controls italic or decorated text; excessive emphasis can reduce legibility.
bodyFontWeight
Font weight. Use consistent weights for text at the same level of emphasis.
bodyLetterSpacing
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
bodyLineHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
bodyTextAlign
Sets the associated element alignment, placement or direction; preview it within the content area.
bodyTextDecoration
Controls italic or decorated text; excessive emphasis can reduce legibility.
bodyTextTransform
Changes uppercase/lowercase appearance; also check the original copy.
borderColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
borderRadius
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
borderWidth
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
buttonBackgroundColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
buttonColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
buttonFontFamily
Font family. Keep headings and body text consistent with the presentation typography.
buttonFontSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
buttonFontStyle
Controls italic or decorated text; excessive emphasis can reduce legibility.
buttonFontWeight
Font weight. Use consistent weights for text at the same level of emphasis.
buttonLetterSpacing
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
buttonLineHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
buttonText
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
buttonTextAlign
Sets the associated element alignment, placement or direction; preview it within the content area.
buttonTextColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
buttonTextDecoration
Controls italic or decorated text; excessive emphasis can reduce legibility.
buttonTextTransform
Changes uppercase/lowercase appearance; also check the original copy.
checkedItems
Indices of list items that are initially checked.
description
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
eyebrow
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
eyebrowColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
eyebrowFontFamily
Font family. Keep headings and body text consistent with the presentation typography.
eyebrowFontSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
eyebrowFontStyle
Controls italic or decorated text; excessive emphasis can reduce legibility.
eyebrowFontWeight
Font weight. Use consistent weights for text at the same level of emphasis.
eyebrowLetterSpacing
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
eyebrowLineHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
eyebrowTextAlign
Sets the associated element alignment, placement or direction; preview it within the content area.
eyebrowTextDecoration
Controls italic or decorated text; excessive emphasis can reduce legibility.
eyebrowTextTransform
Changes uppercase/lowercase appearance; also check the original copy.
firstItemOpen
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
gap
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
imageHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
imageUrl
An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.
imageWidth
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
items
Repeated module items. Add and order them in their editor and complete each item field.
itemsText
Comma-separated list text; in the FAQ variant a vertical bar separates question and answer.
metaText
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
mutedColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
padding
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
placeholder
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
priceFontSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
priceText
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
progressAnimated
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
progressDuration
Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.
progressHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
progressLoop
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
progressStart
The starting percentage of the progress animation.
progressValue
Progress percentage; use 0–100. It does not automatically update from a live data source.
secondaryButtonColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
secondaryButtonText
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
shadowEnabled
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
showEyebrow
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
showProgressValue
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
showSecondaryButton
Enables or disables the associated behavior or visible element. Check the result in presentation preview.
textAlign
Sets the associated element alignment, placement or direction; preview it within the content area.
textColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
title
Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.
titleColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
titleFontFamily
Font family. Keep headings and body text consistent with the presentation typography.
titleFontSize
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
titleFontStyle
Controls italic or decorated text; excessive emphasis can reduce legibility.
titleFontWeight
Font weight. Use consistent weights for text at the same level of emphasis.
titleLetterSpacing
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
titleLineHeight
Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.
titleTextAlign
Sets the associated element alignment, placement or direction; preview it within the content area.
titleTextDecoration
Controls italic or decorated text; excessive emphasis can reduce legibility.
titleTextTransform
Changes uppercase/lowercase appearance; also check the original copy.
trackColor
Sets the color of the associated element or surface. Use the color picker and check text contrast.
variant
Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.