# Timeline > A timeline is a list of events in order, with an icon or an avatar per event and a card for its content, for activity feeds and histories. Visualize events in chronological order with a timeline. Add icons, avatars, and text to present processes and activity feeds. Source: https://docs.tabler.io/ui/components/timeline --- ## Overview A timeline is a list of events in order. Build it from three parts: - `.timeline` on a `ul` element wraps the whole list. - `.timeline-event` on each `li` holds one event and draws the line to the next one. - `.timeline-event-icon` marks the event, and `.timeline-event-card` holds its content. The line between events is drawn by the events themselves, so the last one never gets a trailing line. ```html ``` ## Event icons The icon marker is a plain box, so any [icon](/ui/components/icon) or [avatar](/ui/components/avatar) fits inside. Add a `bg-*-lt` class to tint it and tell event types apart at a glance. ```html ``` ## Simple timeline Add `.timeline-simple` to hide the icons and pull the cards to the edge. Use it when the events need less decoration, for example in a narrow column. ```html ``` ## Examples A timeline works well as an activity feed, where each event mixes text, links and its own time. ```html ``` ## Accessibility A timeline is a list of events, so keep the list markup and let the content say what happened. - Use `ul` and `li` elements. A screen reader then announces how many events there are and where the reader is in the list. - Put the event time in a `time` element with a `datetime` attribute, so "2 hrs ago" also has an exact value. - The icon is decoration on top of the text. Keep the meaning in the heading or the body of the card, never in the icon color alone. - Keep heading levels in order. `h4` inside a card only sets the look - pick the level that fits the page outline. ## SCSS variables The size of the icon marker comes from one custom property, which also sets where the line is drawn: | Variable | Description | Default | |-----------------------------|------------------------------------|----------| | `--tblr-timeline-icon-size` | Width and height of the event icon | `2.5rem` |