Timeline

Show events in date or phase order.

How to use

Add dates, headings and descriptions and arrange the events.
Choose orientation, markers and line colors.
Check that descriptions do not overlap.

Things to check

Date labels are content; verify their order separately.

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.

Find a property

25 / 25

animated

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

cardBackground

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

cardBorderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

cardBorderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

cardBorderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

cardShadow

Enables or configures the associated visual emphasis; check legibility on the background.

boolean

connectorColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

connectorStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'solid' | 'dashed' | 'dotted' | 'gradient' | 'none'

connectorWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

descriptionColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

descriptionFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

direction

Sets the associated element alignment, placement or direction; preview it within the content area.

'horizontal' | 'vertical'

itemSpacing

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

items

Repeated module items. Add and order them in their editor and complete each item field.

TimelineItem[]

nodeBorderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

nodeBorderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

nodeGlow

Enables or configures the associated visual emphasis; check legibility on the background.

boolean

nodeShape

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'circle' | 'square' | 'diamond' | 'hexagon'

nodeSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

subtitleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

subtitleFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

timelineStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'modern' | 'classic' | 'minimal' | 'cards' | 'steps' | 'zigzag'

titleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

titleFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

titleWeight

Font weight. Use consistent weights for text at the same level of emphasis.

'normal' | 'medium' | 'semibold' | 'bold'