<View width="260px" maxWidth="100%"><Timeline><Timeline.Item><Placeholder /></Timeline.Item><Timeline.Item ><Placeholder /></Timeline.Item></Timeline></View>
Implemented as a compound component for easier composition
Timeline is a compound component that works directly with its children by default and automatically wraps them with Timeline.Item. Therefore each child component you pass to it is treated as a separate item.
<Timeline><Placeholder /><Placeholder /></Timeline>
You can also wrap children items with Timeline.Item manually in case you want to change any of its props. For example you can change the default marker to any other content. One of the most popular options is to use it for rendering icons.
function item() {const marker = <Icon svg={IconZap} size={5} color="neutral-alt" />;return (<Timeline><Timeline.Item markerSlot={marker}><Placeholder /></Timeline.Item><Timeline.Item markerSlot={marker}><Placeholder /></Timeline.Item></Timeline>);}
function cards() {return (<Timeline><Timeline.Item markerSlot={null}><Card><Placeholder /></Card></Timeline.Item><Timeline.Item markerSlot={null}><Card><Placeholder /></Card></Timeline.Item></Timeline>);}