ÃÛ¶¹ÊÓƵ

Timeline Container: Holds the entire timeline.

Timeline Teaser: Placed within the container, it can be styled in three ways:

• Portrait
• Landscape
• Milestones (allows multiple teasers per year/topic)
• Navigation

Navigation: Users can navigate using arrows, scroll, or auto play.

The component is structured with a container that holds various items, similar to the vertical tab teaser. This setup allows you to create individual agenda entries. Within each entry, you can integrate different components, such as:

• Event item: This could be a specific activity or session within the agenda, including details like the title, time, and description.
• Profile component: This might include information about the speakers or presenters, such as their names, titles, and brief bios.
• Text and image component: This allows you to add descriptive text and images to enhance the agenda entry, providing more context or visual appeal.

By combining these components, you can create a comprehensive and visually appealing event agenda that clearly outlines the schedule and provides relevant information for each entry.

The vertical tab teaser component is designed to display content using tab navigation elements. It allows for various content to be shown inside the tabs, with each tab capable of containing multiple components.

The component supports only up to 5 tabs.

For medium and larger viewports, one tab is always open, while on small and extra-small viewports, the component is displayed as an accordion. Additionally, the component must be placed in a 100% grid.

The tab teaser component is a versatile tool that can be used in various scenarios to enhance user experience and content organization. 

The tab teaser component is ideal for breaking down complex topics into manageable sections. For example, if you have a long article or guide, you can use tabs to separate different sections, making it easier for users to navigate and find the information they need.

An accordion is a UI component that organizes content into collapsible sections. Each section has a heading, and clicking on it reveals more details. This helps reduce visible content on a page, making navigation easier.

Users can quickly scan headings to find what interests them and expand sections for more information, saving space and enhancing the user experience.

This component allows you to visualize a sequence of process steps in a clear and organized manner. The component can be displayed either horizontally or vertically, depending on your preference or configuration. When viewed on a mobile device, the timeline automatically switches to a vertical layout for better readability.

Each step in the timeline can include an image, providing a visual representation of the process. This feature enhances the clarity and engagement of the timeline, making it easier for users to understand and follow the steps.

The timeline is designed to be simple yet effective, ensuring that each step is clearly marked and labeled with the corresponding date and description. This makes it an excellent tool for illustrating project milestones, workflow processes, or any other sequential events.