Playbook logo
14.19.0

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

Conversation started
Trip #12422
Refund issue #12422
Conversation resolved


Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Vertical

Conversation started
Trip #12422
Refund issue #12422
Conversation resolved


Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

With Date

May

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn
May

Society Hill

72 E St Astoria



May

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn
May

Society Hill

72 E St Astoria



Mar

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn
May

Society Hill

72 E St Astoria

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.

With Children

Any Kit Here

Jackson Heights

37-27 74th Street
Any Kit

Greenpoint

81 Gate St Brooklyn
May

Society Hill

72 E St Astoria



Any Kit

Jackson Heights

37-27 74th Street
May

Society Hill

72 E St Astoria
3

Greenpoint

81 Gate St Brooklyn

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.

With Gap

Conversation started
Trip #12422
Refund issue #12422
Conversation started
Trip #12422
Refund issue #12422
Conversation started
Trip #12422
Refund issue #12422
Conversation started
Trip #12422
Refund issue #12422

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.



Available Props

Props Type Values Default

orientation

enum
vertical
horizontal
horizontal

show_date

boolean
false

item_gap

enum
xs
sm
md
lg
none
none