Timeline

Design

Interface guidelines Octicons Prototyping Presentations

Development

Primer CSS Primer Components

About

Table of contents

Example with in-line links
Default Color example
Adding color to a Badge
Condensed items
Timeline Break
System props
Component props
- Timeline
- Timeline.Item

Table of contents

Example with in-line links
Default Color example
Adding color to a Badge
Condensed items
Timeline Break
System props
Component props
- Timeline
- Timeline.Item

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

Example with in-line links

Monalisacreated one hot potato Just now

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={Flame} />
    </Timeline.Badge>
    <Timeline.Body>
      <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
        Monalisa
      </Link>
      created one <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
        hot potato
      </Link>
      <Link href="#" color="gray.7" muted>
        Just now
      </Link>
    </Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={Flame} />
    </Timeline.Badge>
    <Timeline.Body>
      <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
        Monalisa
      </Link>
      created one <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
        hot potato
      </Link>
      <Link href="#" color="gray.7" muted>
        Just now
      </Link>
    </Timeline.Body>
  </Timeline.Item>
</Timeline>

Default Color example

The default Timeline.Badge color is dark text on a light grey background.

Default badge color

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={Flame} />
    </Timeline.Badge>
    <Timeline.Body>Default badge color</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={Flame} />
    </Timeline.Badge>
    <Timeline.Body>Default badge color</Timeline.Body>
  </Timeline.Item>
</Timeline>

Adding color to a Badge

To have color variants, use the bg prop on the Timeline.Badge. If an icon is being used, set the color prop of the child StyledOcticon if necessary.

Red background used when closed events occur

Green background when opened or passed events occur

Purple background used when pull requests are merged

Blue background to indicate new events below

<Timeline>
  <Timeline.Item>
    <Timeline.Badge bg="red.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="green.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="purple.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Purple background used when pull requests are merged</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="blue.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Blue background to indicate new events below</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge bg="red.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="green.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="purple.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Purple background used when pull requests are merged</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge bg="blue.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Blue background to indicate new events below</Timeline.Body>
  </Timeline.Item>
</Timeline>

Condensed items

Timeline has a condensed prop that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. To condense a single item, remove the top or bottom padding with the pt={0} or pb={0} prop.

This is the message of a condensed TimelineItem

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommit} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommit} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommit} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommit} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
</Timeline>

Timeline Break

To create a visual break in the timeline, use Timeline.Break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.

Red background used when closed events occur

Green background when opened or passed events occur

<Timeline>
  <Timeline.Item>
    <Timeline.Badge bg="red.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge bg="green.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge bg="red.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Red background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge bg="green.5">
      <StyledOcticon icon={Flame} color="white" />
    </Timeline.Badge>
    <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
</Timeline>

System props

Timeline and Timeline.Item components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Timeline

Prop name	Type	Description
clipSidebar	Boolean	Hides the sidebar above the first Timeline.Item and below the last Timeline.Item.

Timeline.Item

Prop name	Type	Description
condensed	Boolean	Reduces vertical padding and removes background from an item's badge.

Edit this page on GitHub

1 contributor

Last edited by dmarcey on February 27, 2020