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>
Cards 
<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>
Importing 
import { DapDSTimeline } from 'dap-design-system'
Importing React 
import { DapDSTimelineReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTimeline } from 'dap-design-system/components'
Attributes

No custom attributes available.

Slots
NameDescription
(default)The default slot for the timeline items.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main timeline container.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-timeline::part(base) {
  /* Your custom styles */
}

Example usage:

<dap-ds-timeline class="my-custom-dap-ds-timeline">
  Timeline
</dap-ds-timeline>

.my-custom-dap-ds-timeline::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties

No CSS custom properties available.

Components Timeline item <dap-ds-timeline-item/> Attributes

No custom attributes available.

Slots
NameDescription
(default)The default slot for the item content.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main timeline item container.
connectorThe connector element between two timeline items.
contentThe content of the timeline item.
CSS Custom Properties
Property NameDescription
--dds-timeline-positionPosition of the timeline dot (default: 28px)
--dds-timeline-connector-widthWidth of the timeline connector line (default: 1px)
--dds-timeline-connector-left-positionLeft position of the timeline connector (default: 5.5px)
--dds-timeline-dot-sizeSize of the timeline dot (default: var(--dds-spacing-300))
--dds-timeline-item-margin-bottomBottom margin of timeline items (default: var(--dds-spacing-200))
--dds-timeline-item-padding-leftLeft padding of timeline items (default: var(--dds-spacing-400))