Timeline
A timeline is a graphical representation of a series of events.
Examples
Default timeline
Timeline items must be wrapped in a dap-ds-timeline-item component.
Content of the timeline item component can contain any component, it is very easy to use if you use the card elements. Here is the most common example:
<dap-ds-timeline>
<dap-ds-timeline-item>
<dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
<dap-ds-card-content parentSized="false" size="md">
The best event ever 1
</dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
<dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
<dap-ds-card-content parentSized="false" size="md">
The best event ever 2
</dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
<dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
<dap-ds-card-content parentSized="false" size="md">
The best event ever 3
</dap-ds-card-content>
</dap-ds-timeline-item>
</dap-ds-timeline>
<dap-ds-timeline>
<dap-ds-timeline-item>
<dap-ds-card interactive size="md">
<dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
<dap-ds-card-content>
The best event ever 1
</dap-ds-card-content>
</dap-ds-card>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
<dap-ds-card interactive size="md">
<dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
<dap-ds-card-content>
The best event ever 2
</dap-ds-card-content>
</dap-ds-card>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
<dap-ds-card interactive size="md">
<dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
<dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
<dap-ds-card-content>
The best event ever 3
</dap-ds-card-content>
</dap-ds-card>
</dap-ds-timeline-item>
</dap-ds-timeline>
No custom attributes available.
Slots
| Name | Description |
|---|
(default) | The default slot for the timeline items. |
Events
No custom events available.
CSS Parts
| Part Name | Description |
|---|
base | The main timeline container. |
CSS Custom Properties
No CSS custom properties available.
Components
Timeline item
<dap-ds-timeline-item/>
Attributes
No custom attributes available.
Slots
| Name | Description |
|---|
(default) | The default slot for the item content. |
Events
No custom events available.
CSS Parts
| Part Name | Description |
|---|
base | The main timeline item container. |
connector | The connector element between two timeline items. |
content | The content of the timeline item. |
CSS Custom Properties
| Property Name | Description |
|---|
--dds-timeline-position | Position of the timeline dot (default: 28px) |
--dds-timeline-connector-width | Width of the timeline connector line (default: 1px) |
--dds-timeline-connector-left-position | Left position of the timeline connector (default: 5.5px) |
--dds-timeline-dot-size | Size of the timeline dot (default: var(--dds-spacing-300)) |
--dds-timeline-item-margin-bottom | Bottom margin of timeline items (default: var(--dds-spacing-200)) |
--dds-timeline-item-padding-left | Left padding of timeline items (default: var(--dds-spacing-400)) |
