Moxi Design System

# Timelines

Timelines are used to display a list of events in chronological order. The mx-timeline component is used to wrap a list of mx-timeline-card components.

Mon 7 Jan 2092 Ellen Ripley was born Tue Sep 12 2023 2:52 PM Widget was submitted for review
In Review
Sat Nov 12 1955 10:04 PM Lightning struck the Clock Tower in Hill Valley Fri Aug 29 1997 2:14 AM SkyNet, the highly advanced computer system created by Cyberdyne Systems Corporation, became fully self-aware
Danger
Mon 1st January 2024 12:00 AM Happy New Year! 🎉
Action Button
<mx-timeline>
  <mx-timeline-card status-color="var(--mds-color-success-hover)">
    <span slot="date">Mon 7 Jan 2092</span>
    Ellen Ripley was born
  </mx-timeline-card>
  <mx-timeline-card status-color="var(--mds-color-tertiary-light)">
    <span slot="date">Tue Sep 12 2023 2:52 PM</span>
    Widget was submitted for review
    <div slot="status" class="uppercase flex items-center gap-10 text-small font-bold">
      <i class="text-3 leading-none ph-bold ph-clock" style="color: var(--mds-color-tertiary-light)"></i>
      In Review
    </div>
  </mx-timeline-card>
  <mx-timeline-card status-color="var(--mds-color-warning-hover)">
    <span slot="date">Sat Nov 12 1955 10:04 PM</span>
    Lightning struck the Clock Tower in Hill Valley
  </mx-timeline-card>
  <mx-timeline-card status-color="var(--mds-color-error-hover">
    <span slot="date">Fri Aug 29 1997 2:14 AM</span>
    SkyNet, the highly advanced computer system created by Cyberdyne Systems Corporation, became fully self-aware
    <div slot="status" class="uppercase flex items-center gap-10 text-small font-bold">
      <i class="text-3 leading-none ph-bold ph-warning-circle" style="color: var(--mds-color-error-hover)"></i>
      Danger
    </div>
  </mx-timeline-card>
</mx-timeline>
<mx-timeline>
  <mx-timeline-card status-color="var(--mds-color-primary-light)">
    <span slot="date">Mon 1st January 2024 12:00 AM</span>
    Happy New Year! 🎉
  </mx-timeline-card>
  <div class="flex items-center justify-center py-20">
    <mx-button btn-type="outlined">Action Button</mx-button>
  </div>
</mx-timeline>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# mx-timeline-card

# Properties

Property Attribute Description Type Default
statusColor status-color The color for the status indicator on the side of the card (e.g. #ffff00 or var(--mds-color-success-hover)) string undefined

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Tooltips →