The Avonni Timeline Component is a dynamic and interactive tool designed to display chronological data or events in an organized and visually appealing way. It's ideal for showcasing project timelines, historical events, or sequence-based data on Salesforce Experience Cloud websites.
Basic Configuration Visual and Functional Elements Interactivity and Customization Data Source
Name Description The main heading for the timeline.
Customize the font style of the title for visual emphasis.
A brief description or supplementary text for the timeline.
Adjust the font style of the caption to complement the title.
Name Description Choose an icon from the Salesforce Lightning Design System to represent timeline items.
Determine the size of the icon for visual consistency.
Select between 'vertical' and 'horizontal' layouts based on content and space considerations.
Choose 'asc' for ascending or 'desc' for descending chronological order.
Organize timeline items by 'week', 'month', or 'year' for easier navigation and understanding
Format the display of dates on timeline items for clarity and consistency
Choose whether timeline items are visually connected by a line or path
Toggle whether the timeline is closed or open-ended
Enable sections of the timeline to be collapsible, enhancing user interaction
Allow users to search within the timeline for specific items or events
Implement pagination for timelines with a large number of items
Set the maximum number of items to display before pagination kicks in
Name Description Add action buttons in the header of the timeline for user commands and interactions.
Implement action buttons at the item level for specific functionalities.
Configure the display of fields within timeline items, including the number of columns and variants for field presentation
Include a filtering mechanism displayed as a popover for sorting or narrowing down timeline items
Customize the search functionality with placeholder text and position settings
Adjust the alignment and customize the labels and icons for 'first', 'last', and 'next' pagination controls
Name Description Manually input timeline items and their details.
Use a query to automatically populate the timeline with items from a data source.
Header Header Title Header Caption Header Avatar Pagination Buttons
Name Description Sets the color of the header's background.
Determines the color of the header's border.
Adjusts the thickness of the border around the header.
Selects the style of the border (e.g., solid, dashed, dotted).
Rounds the corners of the header for a softer look.
Bottom Border color (Is Joined)
If the timeline items are joined, this sets the color of the bottom border.
Bottom Border Size (Is Joined)
Adjusts the thickness of the bottom border when items are joined.
Bottom Border Style (Is Joined)
Chooses the style of the bottom border for joined items.
Padding (Top, Right, Bottom, Left)
Sets the internal spacing within the header.
Determines the space below the header.
Name Description Changes the color of the title text.
Changes the color of the title text.
Alters the boldness or thickness of the title text.
Applies styling (e.g., italic, normal) to the title text.
Name Description Sets the color of the caption text.
Adjusts the size of the caption text.
Alters the boldness or thickness of the caption text.
Applies styling to the caption text
Name Description Sets the background color of the avatar.
Changes the color of the avatar's content (e.g., icon or image).
Adjusts the utility color for contrast or emphasis
Rounds the corners of the avatar for a softer appearance.
Name Description Sets the border properties of the pagination buttons.
Changes the background color of the buttons.
Adjusts the color of the text or icons within the buttons.
Specifies the color of the pagination button when it is active or selected.
