Timeline

A customizable timeline that allows users to view events in a visually pleasing manner chronologically.

() => {
  return <Timeline events={data.simpleEvents} variant="simple" />;
};

Props

Prop	Type	Default	Description
variant	"simple" \| "complex"	"simple"	The variant prop determines the complexity of the timeline. If the variant is set to "simple", the timeline will only display the title of the event. If the variant is set to "complex", the timeline will display the title, description, time frame, and button of the event.
position	"left" \| "right"	"right"	An extension of the position prop from MUI. In MUI, the position prop determines the position of the timeline content relative to the center line. In prism, it also determines whether the entire timeline is left aligned or right aligned. The timeline will be aligned opposite of where the content is positioned. If position is right, the content will appear on the right side of the center line, but the timeline itself will hug the left side of the div.
events	{ title: string, description?: string, timeFrame?: number, timeFrameUnit?: string, button?: () => JSX.Element, timelineItemFooter?: () => JSX.Element, customFooter?: () => JSX.Element, position?: Position, dotVariant?: "filled" \| "outlined", tags?: { title: string, infoText?:string }[]}[], shouldHaveBorderBottom?: boolean		An array of events to be displayed on the timeline. An events array is required. Properties that return JSX.Element can return whatever the developer requires. timelineItemFooter will render just below the tags container but still within the borders of the timeline item, while customFooter spans the entire left to right of the timeline parent container, below the bottom border of each timeline item. If you utilize either the customFooter or timelineItemFooter fields, please note that a border will appear above either of those content boxes. In those cases, you may want to set shouldHaveBorderBottom to false, and style a border bottom on your footer content accordingly.

Examples

Timeline with Opposite content and tags

() => {
  return <Timeline events={data.events} position="right" variant="complex" />;
};

Right aligned timeline

() => {
  return <Timeline events={data.events} position="left" variant="complex" />;
};

Timeline with outlined dots

() => {
  return <Timeline events={data.simpleOutlinedEvents} position="right" variant="simple" />;
};