Timeline

The Timeline component is used to display items on a vertical Timeline, connected by Timeline elements.

React examples

Default

This is a message

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

This is a message

<Timeline clipSidebar>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline clipSidebar>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

Condensed items

This is a message

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

The Timeline.Break component allows for content in Timeline to be visually seperated. This should be used for decorative purposes only. Since this component is decorative, it is not conveyed to assistive technologies like screen readers.

The content within Timeline.Item should clearly communicate the status and state of that item, so that if there is a need to seperate content, the context of the seperation is communicated in Timeline.Item.

This is a message

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

Props

Loading data for timeline...

Timeline

React examples

Default

Clipped sidebar

Condensed items

With a break

Timeline breaks

Props