Content Timeline

Content Timeline allows displaying historical events with vertical timeline items. The block contains various customization options; you can add a title, description, icon, date to the timeline items.

General

Number of Items - You can select the total number of items to display in a grid.

Orientation for the icon and a post grid can be set to Center, Left, Right from Orientation.

Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.

Stack - Select on what breakpoint the columns/tiles will stack.

Timeline Item

Heading tag - Select the HTML tag for heading as h1, h2, h3, h4, h5, h6.

Border Style - Select the border style of the tiles as Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge.

Border Width - Adjust the border width of the tiles in the timeline.

Border Radius - Adjust the border radius of the tiles in the timeline.

Border Color - Select the color for the border of the tiles in the timeline.

Padding - Space can be managed for the content of the grid from the Padding tab.

Date Settings

Display Post Date - Toggle button to display/hide the post date.

Date Format - Select the format of the post date from the multiple options.

Date Settings - Select the date to be displayed for each tile in the timeline.

Connector Settings

Select Icon - Select an icon to be displayed in the connector from multiple icons.

Icon Size -Adjust the size of the icon displayed in the connector.

Icon Background Size - Adjust the size of the background of the icon displayed in the connector.

Border Width - Adjust the width of the border surrounding the icon element in the connector.

Connector Width - Adjust the width of the connector bar in the timeline.

Connector Color Settings - Select the colors of Line, Icon, Background & Border of the connector for Normal and Focus states.

Spacing

Spacing tab offer options to customize the horizontal and vertical spacing and also bottom margin for heading.

Typography

Under the Typography tab, options for font family, font size, font-weight and line-height are available for Date, Heading, and Content.

Colors

Under the Colors tab, color options are available for Background, Heading, Content and Date.

Opacity - Adjust the opacity of the background of the tiles.