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:

Event date or time Event title The best event ever 1 Event date or time Event title The best event ever 2 Event date or time Event title The best event ever 3
Cards
Event date or time Event title The best event ever 1 Event date or time Event title The best event ever 2 Event date or time Event title The best event ever 3
Custom styling

You can customize the timeline appearance using CSS custom properties and parts. This example demonstrates custom gradient styling for the timeline connectors and markers:

Event date or time Event title nagyon meno event Event date or time Event title nagyon meno event Event date or time Event title Event date or time Event title 

dap-ds-timeline-item::part(connector) {
    background: linear-gradient(
      180deg,
      rgba(75, 160, 255, 1) 0%,
      rgba(0, 212, 255, 1) 100%
    );
  }

  dap-ds-timeline-item::part(base)::after {
    background: radial-gradient(
      circle,
      rgba(212, 0, 0, 1) 0%,
      rgba(255, 0, 0, 1) 8%,
      rgba(106, 255, 0, 1) 100%
    );
    box-shadow: 0 0 10px 0 rgb(255 0 0 / 100%);
  }
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))