Timeline

The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.

To view different colors of icon circle, visit Icon Circle Kit.

Summary

Default

import React from 'react'

import { Timeline, Body, TitleDetail } from 'playbook-ui'

const TimelineDefault = (props) => (
  <div>
    <Timeline>
      <Timeline.Item
          icon="user"
          iconColor="royal"
      >
        <Body
            color="light"
            text="Conversation started"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <Body
            color="light"
            text="Trip #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="credit-card"
          iconColor="red"
      >
        <Body
            color="light"
            text="Refund issue #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="smile"
          iconColor="green"
      >
        <Body
            color="light"
            text="Conversation resolved"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />

    <Timeline>
      <Timeline.Item
          icon="user"
          iconColor="royal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineDefault

Vertical

import React from 'react'

import { Timeline, Body, TitleDetail } from 'playbook-ui'

const TimelineVertical = (props) => (
  <div>
    <Timeline orientation="vertical">
      <Timeline.Item
          icon="user"
          iconColor="royal"
      >
        <Body
            color="light"
            text="Conversation started"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <Body
            color="light"
            text="Trip #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="credit-card"
          iconColor="red"
      >
        <Body
            color="light"
            text="Refund issue #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="smile"
          iconColor="green"
      >
        <Body
            color="light"
            text="Conversation resolved"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />

    <Timeline orientation="vertical">
      <Timeline.Item
          icon="user"
          iconColor="royal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineVertical

With Date

Use the optional showDate prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

import React from 'react'

import { Timeline, TitleDetail } from 'playbook-ui'

const TimelineWithDate = (props) => (
  <div>
    <Timeline
        orientation="horizontal"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date().setDate(new Date().getDate() + 1)}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />
    <br />

    <Timeline
        orientation="vertical"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date().setDate(new Date().getDate() + 1)}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>

    <br/>
    <br/>
    <br/>

    <Timeline
        orientation="vertical"
        showDate
    >
      <Timeline.Item
          date={new Date('20 Mar 2018')}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date('20 May 2018')}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineWithDate

With Children

Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.

import React from 'react'

import { Timeline, Title, Pill, TitleDetail } from 'playbook-ui'

const TimelineWithChildren = (props) => (
  <div>
    <Timeline orientation="horizontal"
        showDate
    >
      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label>
          <Title size={2}
              text='Any Kit Here'
          />
        </Timeline.Label>
        <Timeline.Step icon="user"
            iconColor="royal"
        />
        <Timeline.Detail>
          <TitleDetail detail="37-27 74th Street"
              title="Jackson Heights"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="dotted"
      >
        <Timeline.Step>
          <Pill text="Any Kit"
              variant="success"
          />
        </Timeline.Step>
        <Timeline.Detail>
          <TitleDetail detail="81 Gate St Brooklyn"
              title="Greenpoint"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
        <Timeline.Step icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>

    <br />
    <br />
    <br />

    <Timeline orientation="vertical"
        showDate
    >
      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label>
          <Title size={4}
              text='Any Kit'
          />
        </Timeline.Label>
        <Timeline.Step icon="user"
            iconColor="royal"
        />
        <Timeline.Detail>
          <TitleDetail detail="37-27 74th Street"
              title="Jackson Heights"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="dotted"
      >
        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
        <Timeline.Step icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Step>
          <Pill text="3"
              variant="success"
          />
        </Timeline.Step>
        <Timeline.Detail>
          <TitleDetail detail="81 Gate St Brooklyn"
              title="Greenpoint"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineWithChildren

With Gap

Use the optional itemGap prop to render the timeline kit with adjusted spacing between nodes. The itemGap prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

import React from 'react'

import { Timeline, Flex, FlexItem, Body } from 'playbook-ui'

const TimelineWithGap = (props) => (
  <div>
    <Flex justify="evenly">
    <FlexItem>
        <Timeline
            itemGap="xs"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="sm"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="md"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="lg"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
    </Flex>
  </div>
)

export default TimelineWithGap

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat