Timeline

The timeline has no choices: it is drawn one way.

A project's activity, newest first: a dot for each kind of event, what happened, when, and who did it.

Success: Homepage published
15:28
Website rebuild · by Ana Silva
Information: Brand review approved
14:02
Website rebuild · by Jonas Weber
Warning: Two images failed to upload
11:40
Media library · by the uploader
Project started
09:15
Website rebuild · by Ana Silva

Neutral, info, success, warning and danger. Each title says the kind in words too, and a screen reader hears it before the title.

Comment added
16:10
Pricing page · by Mia Chen
Information: Review requested
15:52
Pricing page · by Mia Chen
Success: Checks passed
15:40
Build 482 · 3 minutes
Warning: Storage nearly full
14:05
Media library · 92% used
Error: Deploy failed
13:31
Build 481 · stopped at the tests

A detail line in code type under the meta line, for a commit, an error or a branch.

Success: Deployed to production
15:28
by Ana Silva
commit 90e608a · 4 files changed
Error: Deploy failed
14:51
by Ana Silva
error: test 'checkout total' timed out after 30 s
Branch created
10:02
by Jonas Weber
feature/new-checkout from main

The page chooses the order: an order's history reads from the first event to the last.

Order placed
Mon 9:12
Order 20431 · 3 items
Information: Packed and handed to the courier
Tue 14:30
Warehouse in Lisbon
Success: Delivered
Thu 11:05
Signed for by A. Silva

An event can hold more than its title and meta line: a press shows it in place, and a screen reader hears whether it is shown. The first is open; the last has nothing more, so it does not unfold.

Success: Checkout moved to the new payment provider16:45Shop · by Ana Silva
Changed: the card form now loads from the new provider, and refunds go through it too.
Why: the old provider stops taking new payments at the end of the month.
Checked: a test order, a refund and a declined card, on a phone and a laptop.
Warning: Search left half done13:20Help center · by Jonas Weber
Changed: the search box finds articles by their titles.
Left open: finding words inside an article, which waits for the new index.
Help center started
09:05
Help center · by Jonas Weber

A long title wraps beside its time, which keeps its place at the end of the line.

Warning: Two images failed to upload because they were larger than the limit
11:40
Media library · by the uploader
Project started
09:15
Website rebuild · by Ana Silva

Purpose

Shows things that happened, one after another, so the reader can follow a history: a project's activity, the steps of a deploy, an order on its way. Each event has a dot for its kind, what happened, when, and who or what did it. It differs from the stepper, which shows where the reader is in steps still to come, and from the list, whose rows are not tied to a moment.

When to use

A record of what happened to one thing, newest first or oldest first.
The stages a piece of work went through, with when each happened.
A short activity panel on a dashboard.

When not to use

Steps the reader is still working through. Use the stepper.
Items that are not tied to a moment, or that the reader acts on. Use the list.
Messages or log lines in the hundreds. Use a log or a table that can be searched.

Usage rules

Do

Say what happened in the title, in a few words.
Keep one order through the whole timeline, newest first or oldest first.
Give the time in the reader's own form, and a machine-readable date beside it.

Don't

Leave the dot's color alone to say that something failed.
Mix events of different things in one timeline without saying in the meta line which each is about.

Error: Deploy failed
13:31
Build 481

Say what happened in the title, so the kind of event is in words and not only in the dot's color.

Error: Build 481
13:31
Production

Don't

A title that only names the thing leaves the dot's color to say what went wrong.

Anatomy

The block, an ordered list of events.
The item part, a list item for each event. Its tone is a modifier of the part: default, info, success, warning or danger.
The rail part: the marker part, a 16 circle in the kind's soft color holding the dot part, and the line part, down to the next event. The last event has no line.
The body part: the top part holding the title part, what happened, and the time part, when; then the meta part, who or what did it; then the detail part, an optional line in code type on a sunken box.
An event that unfolds: the body holds the disclosure part, a details element whose summary part holds the top, meta and detail parts, with the caret part after the time, and the more part, what it shows when open.
The hidden part: the event's kind in words for screen readers, before its title.

Behavior

The events keep the order the page gives them; the timeline does not sort. The title wraps beside its time, which stays at the end of the line. The detail wraps inside its box. Nothing moves and nothing takes focus, except an event that unfolds.

An event can hold more than its title, time, meta line and detail (more), such as the whole entry of a log, shown in place when the reader presses the event. The event's title, time, meta line and detail are then one row that opens and closes it, with a caret after the time that turns when it is open; the more unfolds under the row with the expand motion, as an accordion's item does, in Body SM and the secondary text color, its paragraphs a small step apart. It starts closed unless defaultExpanded is set, or the page holds it with expanded and onExpandedChange. Under reduced motion the height lands at once and the fade still plays. Written by hand, the body holds a details element with the disclosure class, its summary with the summary class holding spans with the top, title, time, meta and detail classes, and the more after it.

What it does for you

The events are an ordered list.
The rail is decoration and hidden from screen readers.
The kind of event is said in words before the title, such as "Warning: Two images failed to upload".
With a machine-readable date, the time is a time element carrying it.
It takes no focus of its own; a link in a title or a detail is a Tab stop.
An event that unfolds is a native disclosure: its row is a Tab stop, named by the kind, title, time, meta line and detail, says whether it is expanded, and opens and closes with Enter and Space, with no script.

What you must do

Name the list with aria-label when the page has more than one.
Say the kind in the title's own words too ("Deploy failed", not "Build 481"), so a reader who cannot tell the dots' colors apart still knows it.
In markup written by hand, add the kind's words in the hidden part.
Keep links and buttons out of an unfolding event's title, meta line and detail: they sit inside the row that opens it. Put them in the more.

How to test

With a screen reader, the events are read as an ordered list in the order given, each with its kind before its title.
Tab through the page: focus skips the timeline itself and lands only on a link in a title or a detail.
With text at 200% and the page 320 pixels wide, the title wraps beside its time, and the detail wraps inside its box.
Tab to an event that unfolds and press Enter or Space: the more shows under it and a screen reader hears it expanded; press again and it closes.

Keyboard

Timeline keys
Key	What it does
`Tab`	Moves focus to the row of each event that unfolds, and to a link in a title, a detail or an open more.
`Enter`or`Space`	On an event's row, shows its more, or hides it when shown.

The files the timeline is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

timeline.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329

/* smbk-timeline — Timeline. Figma "Timeline" 7607:118483 and "Timeline item" 7580:1607.
 * Events one under another. Each has a rail, a 16 marker with a dot for its kind and a line down to the next
 * event, beside its body: what happened and when on one line, who or what did it under that, and an optional
 * detail in code type on a sunken box. The last event has no line below it. The dot's kind is also said in
 * words, for screen readers; the words a reader sees say it too. An event can hold more that it shows in place
 * when pressed: its body is then a native details element, what happened, when, who and the detail its summary
 * with a caret after the time, and the more under them (see the unfolding rules at the end). */

.smbk-timeline {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
   frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
   that places the block keeps its say. */
:where(.smbk-timeline) {
  position: relative;
}

.smbk-timeline__item {
  /* The plain kind (default); each feedback kind sets these again below (the tone recipe). */
  --smbk-tone-surface: var(--smbk-color-surface-sunken);
  --smbk-tone-icon: var(--smbk-color-border-strong);
  display: flex;
  gap: var(--smbk-space-inline-md);
  min-width: 0;
}

/* In forced colors the neutral dot takes the palette's text color (the high contrast block at the end); a feedback
   kind's dot keeps its own color, set below. */
@media (forced-colors: active) {
  .smbk-timeline__item {
    --smbk-tone-icon: CanvasText;
  }
}

.smbk-timeline__rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--smbk-space-4);
  width: var(--smbk-size-mark-sm);
  padding-top: var(--smbk-space-2);
}

.smbk-timeline__marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--smbk-size-mark-sm);
  height: var(--smbk-size-mark-sm);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-tone-surface);
}

.smbk-timeline__dot {
  width: var(--smbk-size-8);
  height: var(--smbk-size-8);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-tone-icon);
}

.smbk-timeline__line {
  flex: 1 1 auto;
  width: var(--smbk-border-width-emphasis);
  background: var(--smbk-color-border-subtle);
}

.smbk-timeline__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
  padding-bottom: var(--smbk-space-stack-lg);
}

/* The last event: no line below it, and no room kept for the next. */
.smbk-timeline__item:last-child .smbk-timeline__line {
  display: none;
}

.smbk-timeline__item:last-child .smbk-timeline__body {
  padding-bottom: 0;
}

.smbk-timeline__top {
  display: flex;
  align-items: flex-start;
  gap: var(--smbk-space-inline-md);
  min-width: 0;
}

.smbk-timeline__title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-body-sm-medium-font-family);
  font-size: var(--smbk-typography-body-sm-medium-font-size);
  font-weight: var(--smbk-typography-body-sm-medium-font-weight);
  line-height: var(--smbk-typography-body-sm-medium-line-height);
  letter-spacing: var(--smbk-typography-body-sm-medium-letter-spacing);
  text-transform: var(--smbk-typography-body-sm-medium-text-transform);
  overflow-wrap: anywhere;
}

.smbk-timeline__time,
.smbk-timeline__meta {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
  text-transform: var(--smbk-typography-body-xs-text-transform);
}

.smbk-timeline__time {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.smbk-timeline__meta {
  margin: 0;
  overflow-wrap: anywhere;
}

.smbk-timeline__detail {
  margin: 0;
  padding: var(--smbk-space-inset-xs) var(--smbk-space-inset-sm);
  border-radius: var(--smbk-radius-control-sm);
  background: var(--smbk-color-surface-sunken);
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-code-sm-font-family);
  font-size: var(--smbk-typography-code-sm-font-size);
  font-weight: var(--smbk-typography-code-sm-font-weight);
  line-height: var(--smbk-typography-code-sm-line-height);
  letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
  text-transform: var(--smbk-typography-code-sm-text-transform);
  overflow-wrap: anywhere;
}

/* ---- an event that unfolds to more ----
   The summary lays out what happened, when, who and the detail as the body does, so the event looks the same closed;
   a caret after the time, in the small icon size the title's text takes, centred on the title's first line, turns
   when it is open. Pointing at the summary darkens the caret, and keyboard focus rings the summary. The more is Body
   SM in the secondary text color, a small stack step under the summary, its paragraphs a small stack step apart. */

.smbk-timeline__summary {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
  border-radius: var(--smbk-radius-control-sm);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.smbk-timeline__summary::-webkit-details-marker {
  display: none;
}

/* On a touch screen a summary shorter than the comfortable target takes an invisible press area out to it; the room
   under each event keeps it clear of the next. */
@media (pointer: coarse) {
  .smbk-timeline__summary {
    position: relative;
  }

  .smbk-timeline__summary::after {
    content: '';
    position: absolute;
    inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
  }
}

.smbk-timeline__summary:focus-visible {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
}

.smbk-timeline__caret {
  flex: none;
  margin-top: calc((var(--smbk-typography-body-sm-medium-font-size) * var(--smbk-typography-body-sm-medium-line-height) - var(--smbk-size-icon-sm)) / 2);
  color: var(--smbk-color-icon-subtle);
  font-size: var(--smbk-size-icon-sm);
  transition: transform var(--smbk-motion-expand-duration) var(--smbk-motion-expand-easing);
}

@media (hover: hover) {
  .smbk-timeline__summary:hover .smbk-timeline__caret {
    color: var(--smbk-color-icon-default);
  }
}

/* An event the React component is closing (data-closing) is still open until its motion ends; its caret turns back
   as the motion starts. */
.smbk-timeline__disclosure[open]:not([data-closing]) > .smbk-timeline__summary .smbk-timeline__caret {
  transform: rotate(180deg);
}

.smbk-timeline__more {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-sm);
  padding-top: var(--smbk-space-stack-sm);
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
  text-transform: var(--smbk-typography-body-sm-text-transform);
  overflow-wrap: anywhere;
}

/* Paragraphs and lists in the more are spaced by its gap, not by their own margins. */
.smbk-timeline__more > * {
  margin: 0;
}

/* ---- motion: the more unfolds with the expand purpose and folds back the same way, as an accordion's item does.
   The body's height grows from the summary to its own while the more fades in from the purpose's slight blur, and the
   caret turns with it. The React component moves it, the same in every browser, and marks the disclosure data-motion
   once it runs. While it moves (data-moving) it is clipped, with room for the summary's focus ring, and the foot of
   what shows fades out over a spacing step, or over what is still hidden when that is less. Markup written by hand is
   moved by the stylesheet alone where the browser can animate to a natural height, without the fading foot, and opens
   at once elsewhere. Under reduced motion the height lands at once and the fade and the blur still play. ---- */

/* How much of the more shows while the body moves, from its top: the React component moves it with the height. */
@property --smbk-timeline-reveal {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

.smbk-timeline__disclosure[data-moving] {
  overflow: clip;
  overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
}

/* The mask reads only how opaque its paint is, so the text color stands in for "shown". */
.smbk-timeline__disclosure[data-moving] > .smbk-timeline__more {
  mask-image: linear-gradient(currentcolor calc(var(--smbk-timeline-reveal) - min(var(--smbk-space-16), 100% - var(--smbk-timeline-reveal))), transparent var(--smbk-timeline-reveal));
}

@supports (interpolate-size: allow-keywords) {
  .smbk-timeline__disclosure:not([data-motion]) {
    interpolate-size: allow-keywords;
  }

  .smbk-timeline__disclosure:not([data-motion])::details-content {
    block-size: 0;
    opacity: 0;
    filter: blur(var(--smbk-motion-expand-blur));
    overflow: clip;
    overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
    transition-property: block-size, opacity, filter, content-visibility;
    transition-duration: var(--smbk-motion-expand-duration);
    transition-timing-function: var(--smbk-motion-expand-easing);
    transition-behavior: allow-discrete;
  }

  .smbk-timeline__disclosure:not([data-motion])[open]::details-content {
    block-size: auto;
    opacity: 1;
    filter: none;
  }

  /* Under reduced motion the height steps: at once as it opens, and only once it has faded as it closes. */
  @media (prefers-reduced-motion: reduce) {
    .smbk-timeline__disclosure:not([data-motion])::details-content {
      transition-duration: 0s, var(--smbk-motion-expand-duration), var(--smbk-motion-expand-duration), var(--smbk-motion-expand-duration);
      transition-delay: var(--smbk-motion-expand-duration), 0s, 0s, 0s;
    }

    .smbk-timeline__disclosure:not([data-motion])[open]::details-content {
      transition-delay: 0s;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .smbk-timeline__caret {
    transition: none;
  }
}

/* Words for screen readers only: the kind of event the dot shows. */
/* .smbk-timeline__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */

/* ---- tone: the tone recipe, the marker in the kind's soft surface, the dot in its icon color ---- */

.smbk-timeline__item--tone-info { --smbk-tone-surface: var(--smbk-color-feedback-info-surface-subtle); --smbk-tone-icon: var(--smbk-color-feedback-info-icon); }
.smbk-timeline__item--tone-success { --smbk-tone-surface: var(--smbk-color-feedback-success-surface-subtle); --smbk-tone-icon: var(--smbk-color-feedback-success-icon); }
.smbk-timeline__item--tone-warning { --smbk-tone-surface: var(--smbk-color-feedback-warning-surface-subtle); --smbk-tone-icon: var(--smbk-color-feedback-warning-icon); }
.smbk-timeline__item--tone-danger { --smbk-tone-surface: var(--smbk-color-feedback-danger-surface-subtle); --smbk-tone-icon: var(--smbk-color-feedback-danger-icon); }

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills, so the dot and the line would vanish. The line and the
   neutral dot take the palette's text color (the dot's is set beside the item rule, so a feedback kind's dot keeps
   its own color). Nothing here applies outside that mode. */

@media (forced-colors: active) {
  .smbk-timeline__dot {
    forced-color-adjust: none;
  }

  .smbk-timeline__line {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .smbk-timeline__detail {
    outline: var(--smbk-border-width-hairline) solid CanvasText;
    outline-offset: calc(-1 * var(--smbk-border-width-hairline));
  }
}

Tokens it reads

Timeline tokens
Token and CSS	Value	Preview	Foundation
color.surface.sunken--smbk-color-surface-sunken	light: #373d430ddark: #00000066changes with theme		Color
color.border.strong--smbk-color-border-strong	light: #9ba5b1dark: #373d43changes with theme		Color
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
space.4--smbk-space-4	4px		Spacing
size.mark.sm--smbk-size-mark-sm	16px		Size
space.2--smbk-space-2	2px		Spacing
radius.full--smbk-radius-full	9999px		Radius
size.8--smbk-size-8	8px		Size
border-width.emphasis--smbk-border-width-emphasis	2px		Border width
color.border.subtle--smbk-color-border-subtle	light: #c4cdd8dark: #2d3237changes with theme		Color
space.stack.lg--smbk-space-stack-lg	comfortable: 16pxcompact: 12pxchanges with density		Spacing
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.body-sm-medium--smbk-typography-body-sm-medium-font-family--smbk-typography-body-sm-medium-font-size--smbk-typography-body-sm-medium-font-weight--smbk-typography-body-sm-medium-line-height--smbk-typography-body-sm-medium-letter-spacing--smbk-typography-body-sm-medium-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.body-xs--smbk-typography-body-xs-font-family--smbk-typography-body-xs-font-size--smbk-typography-body-xs-font-weight--smbk-typography-body-xs-line-height--smbk-typography-body-xs-letter-spacing--smbk-typography-body-xs-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inset.xs--smbk-space-inset-xs	4px		Spacing
space.inset.sm--smbk-space-inset-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
radius.control.sm--smbk-radius-control-sm	4px		Radius
typography.code-sm--smbk-typography-code-sm-font-family--smbk-typography-code-sm-font-size--smbk-typography-code-sm-font-weight--smbk-typography-code-sm-line-height--smbk-typography-code-sm-letter-spacing--smbk-typography-code-sm-text-transform	fontFamily: Geist Mono, Geist Mono Fallback, ui-monospace, monospacefontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.target.comfortable--smbk-size-target-comfortable	44px		Size
focus.ring.width--smbk-focus-ring-width	2px		Focus
color.border.focus--smbk-color-border-focus	light: #cc0d0ddark: #f34336changes with theme		Color
focus.ring.offset--smbk-focus-ring-offset	2px		Focus
size.icon.sm--smbk-size-icon-sm	16px		Size
color.icon.subtle--smbk-color-icon-subtle	light: #4e555edark: #c4cdd8changes with theme		Color
motion.expand.duration--smbk-motion-expand-duration	320ms		Motion
motion.expand.easing--smbk-motion-expand-easing	cubic-bezier(0.215, 0.61, 0.355, 1)		Motion
color.icon.default--smbk-color-icon-default	light: #232527dark: #e7ebf0changes with theme		Color
space.stack.sm--smbk-space-stack-sm	comfortable: 8pxcompact: 6pxchanges with density		Spacing
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.16--smbk-space-16	16px		Spacing
motion.expand.blur--smbk-motion-expand-blur	2px		Motion
color.feedback.info.surface-subtle--smbk-color-feedback-info-surface-subtle	light: #e3ebfedark: #162352changes with theme		Color
color.feedback.info.icon--smbk-color-feedback-info-icon	light: #3b5ce3dark: #7fa0ffchanges with theme		Color
color.feedback.success.surface-subtle--smbk-color-feedback-success-surface-subtle	light: #dffddfdark: #0a2d0echanges with theme		Color
color.feedback.success.icon--smbk-color-feedback-success-icon	light: #037a1fdark: #54b85bchanges with theme		Color
color.feedback.warning.surface-subtle--smbk-color-feedback-warning-surface-subtle	light: #ffe6dbdark: #431b07changes with theme		Color
color.feedback.warning.icon--smbk-color-feedback-warning-icon	light: #b14904dark: #fa8349changes with theme		Color
color.feedback.danger.surface-subtle--smbk-color-feedback-danger-surface-subtle	light: #fee5e1dark: #4b130echanges with theme		Color
color.feedback.danger.icon--smbk-color-feedback-danger-icon	light: #cc0d0ddark: #fe7d6dchanges with theme		Color
border-width.hairline--smbk-border-width-hairline	1px		Border width

Manifest

timeline.manifest.json

{
  "name": "timeline",
  "block": "smbk-timeline",
  "summary": "Things that happened, one after another: each event a dot for its kind, what happened, when, and who or what did it, joined by a line.",
  "adapt": "css",
  "axes": {},
  "flags": {},
  "parts": [
    "item",
    "rail",
    "marker",
    "dot",
    "line",
    "body",
    "disclosure",
    "summary",
    "top",
    "title",
    "time",
    "caret",
    "meta",
    "detail",
    "more",
    "hidden"
  ],
  "figmaNodeId": "7607:118483"
}

Menu

Customize the preview

Options

Examples

Usage

Kinds of event

With details

Oldest first

Events that unfold

In a narrow space

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Source

Options

Examples

Usage

Kinds of event

With details

Oldest first

Events that unfold

In a narrow space

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Related

Source