Table of contents

Table of contents options
Choice	Values	Default	What it does
`opensmbk-toc--open`	On or off	Off	The narrow form only: the list shows under the heading row. Figma: Open. In a wide space the list always shows.

Partssmbk-toc__navsmbk-toc__labelsmbk-toc__label-textsmbk-toc__togglesmbk-toc__headingsmbk-toc__heading-textsmbk-toc__iconsmbk-toc__caretsmbk-toc__bodysmbk-toc__indicatorsmbk-toc__listsmbk-toc__itemsmbk-toc__extra

The sections of a page, children indented, the first marked by a line and bolder words.

A child section marked as the one in view.

Content that belongs with the contents, under the list inside the same box.

Version 2.4Updated 12 March

A title longer than the column wraps onto more lines instead of being cut short.

In a narrow space, a box whose heading row opens the list; it starts closed.

Open: a rule and the links under the heading row, the caret turned down.

Purpose

Lists the sections of a long page so the reader can see its shape and jump to a part of it, and marks the section they are in as they scroll. It sits beside the content; the sidebar is for moving between pages, this is for moving within one. In a narrow space, where there is no column beside the content, it becomes a small box that opens and closes, set at the top of the page's body.

When to use

Documentation and long reading pages with three or more sections.

When not to use

Short pages. A list of two entries is noise.
Moving between pages. Use the sidebar.

Usage rules

Do

Give every section a stable id.
Keep titles short; the box is narrow.

Don't

Nest more than one level.

Keep section titles short, so each fits one line and the list reads at a glance.

Don't

Long titles wrap onto two or three lines each, and the list becomes slow to scan.

Keep to one level of children, so the indent says one thing: this belongs under that.

Don't

A second level of children gets no deeper indent and blurs what belongs where.

Anatomy

The block, a bordered box.
The label part, the heading row: the icon part, a list icon, and the label text part, its words.
The body part, a rule and under it the list part, holding one item part per section, the items touching. A child item sits indented under its parent, along a thin tree line that runs down the children.
The item in view carries a brand line and its words one weight bolder: on a parent the line runs down its left edge, on a child it lights that child's stretch of the tree line. The line is the indicator part, one line that moves to whichever item is current. Without the wrapper the current item draws the line itself. Under the pointer an item's words and its line turn brand too.
An optional extra part under the list, inside the same box and set off by the same rule: content that belongs with the contents, such as a page's key facts. It is not navigation, so with it the box holds the navigation landmark and the extra part beside it.
In a narrow space: the toggle part takes the label's place, the same heading row as a button (the icon part, the heading text, and the caret part at the far end) that opens and closes the body. The label part is not shown there; the toggle carries the same words.

Behavior

Each item scrolls to its section. Unless the consumer sets which item is current, the component watches the sections and marks the one in view: the last whose top has passed the upper third of the window, or the first before any has. Pressing an item marks it at once, the line sliding to it with the state motion and the words changing color with the feedback motion, and it stays marked until the reader scrolls on their own, so a short section near the end of the page, which cannot scroll up that far, is still marked when chosen. The line slides the same way as the reader scrolls from section to section, and lands at once when the page first draws or the list changes size; under reduced motion it never slides. How the page itself moves to a section is the page's choice: a page that wants it to glide sets smooth scrolling on its scrolling part, as the Showroom does. A long entry wraps onto more lines rather than being cut short; a short one keeps one line's height.

The form follows the layout switch, so a wrapper can force either. The two forms are drawn alike. In a wide space the box always shows its list. In a narrow one it is a box the width of its column: pressing the heading row opens the list under a rule and presses again close it, the caret turning from pointing at the list to pointing down it. The list grows open with the enter motion and closes a little faster with the exit motion, and the caret turns with the state motion; under reduced motion all of it happens at once. It always starts closed, so the page's words are not pushed down (Figma's component shows it open only to draw the list); a page can start it open, as the open example does. The whole top of the box takes a press, not only the row's own small height.

What it does for you

It is a navigation landmark named by its heading, "On this page" by default.
The current item carries the current marker, which screen readers announce. It is shown by its line and its bolder words as well as by color.
Each item jumps to its section. Items are links to the section ids, so they work without script.
In a narrow space the heading row is a button that says whether the list is open and names the list it opens. A closed list is out of the tab order. Only one of the label and the button is ever shown, so the name is read once.

What you must do

Give each of several tables of contents on a page its own name; to keep the heading and change only the name, give the name on its own.
When the page keeps a bar stuck to the top of the window, give the page's root a top scroll padding of the bar's height so a section jumped to lands below the bar, not under it. The app bar that hides on scroll keeps that padding itself, and the header's page says how to give it to a header the page makes stick.

How to test

Tab to an item and press Enter: the page moves to its section, and the item is marked as current by its line and its bolder words.
With a screen reader, it is found as a navigation region by its name, and the current item is read as current.
In a narrow space, Tab to the heading row and press Enter or Space: the list opens, and the button says it is open. Closed, the list's items are skipped.
With text at 200% and the page 320 pixels wide, a long entry wraps onto more lines rather than being cut short.
In a forced-color mode, the focus ring and the words stay, and the current item is still marked by its bolder words.

Keyboard

Table of contents keys
Key	What it does
`Tab`	Moves focus through the items. In a narrow space it moves to the heading button, and to the items only while the list is open.
`Enter`	On an item, scrolls to its section.
`Enter`or`Space`	On the heading button in a narrow space, opens or closes the list.

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

Stylesheet

table-of-contents.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 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424

/* smbk-toc — Table of contents. Figma "TableofContents" 4505:11351 over "TableofContentsItem" 4300:12766 (State × Type: Parent, Child).
 * A box listing the sections of the page: a heading row (an icon and the
 * label), a rule, then one small link per section, touching, children indented
 * along a tree line, the one in view marked with a brand line (on a parent's
 * left edge, on a child's tree line) and a bolder label; the line slides from
 * item to item. Both forms are drawn alike, as Figma draws them: in a wide
 * space the heading row is a label; in a narrow one (Figma's Mobile) it is a
 * button with a caret at its end that opens and closes the rule and the links
 * under it (the open flag). */

.smbk-toc {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  width: var(--smbk-size-table-of-contents-width);
  /* Figma draws the edge inside the box, so the padding gives the edge's width back. */
  padding: calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
  border-radius: var(--smbk-radius-control-md);
}

/* With extra content, the navigation keeps the box's own stacking inside it. */
.smbk-toc__nav {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
}

/* Content under the list that belongs with it, set off by the same rule as the list's. */
.smbk-toc__extra {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
}

.smbk-toc__extra::before {
  content: "";
  display: block;
  height: 0;
  border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
  border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}

/* The wide form's heading row: the list icon and the label, the smallest inset over and under them. */
.smbk-toc__label {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  margin: 0;
  padding: var(--smbk-space-inset-2xs) 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
  text-transform: var(--smbk-typography-label-sm-text-transform);
}

/* Figma binds both icons to the subtlest text color. */
.smbk-toc__icon,
.smbk-toc__caret {
  flex-shrink: 0;
  color: var(--smbk-color-text-subtlest);
  font-size: var(--smbk-size-icon-xs);
}

/* The rule and the links under it, the medium stack apart. */
.smbk-toc__body {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
}

.smbk-toc__body::before {
  content: "";
  display: block;
  height: 0;
  border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
  border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}

.smbk-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The heading row is the narrow form's; the wide form shows the label instead. */
.smbk-toc__toggle {
  display: none;
}

/* A small control tall. A long entry wraps onto more lines instead of being cut short, and keeps one
   line's height when short. */
.smbk-toc__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-xs);
  min-height: var(--smbk-size-control-sm);
  /* The left edge is drawn inside the item, as Figma counts it: the padding after it gives its width back. */
  padding: var(--smbk-space-inset-2xs) var(--smbk-space-inset-lg);
  padding-left: calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
  border-left: var(--smbk-border-width-hairline) solid transparent;
  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-decoration: none;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* A child's tree line: a hairline in the subtle border color down the children, just inside the parent's text,
   one item tall, so the children's lines meet in one. */
.smbk-toc__item--child {
  position: relative;
}

.smbk-toc__item--child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* From the item's edge, past its clear left edge: the large inset and the hairline, where Figma draws it. */
  left: var(--smbk-space-inset-lg);
  border-left: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
  pointer-events: none;
}

/* Under the pointer an item's words and its line turn brand: a parent's left edge, a child's tree line. */
@media (hover: hover) {
  .smbk-toc__item:hover {
    color: var(--smbk-color-text-brand);
  }

  .smbk-toc__item:not(.smbk-toc__item--child):hover {
    border-left-color: var(--smbk-color-border-brand);
  }

  .smbk-toc__item--child:hover::before {
    border-left-color: var(--smbk-color-border-brand);
  }
}

/* The current item: its brand line and its label one weight bolder, so it shows without color. */
.smbk-toc__item[aria-current="true"]:not(.smbk-toc__item--child) {
  border-left-color: var(--smbk-color-border-brand);
}

.smbk-toc__item--child[aria-current="true"]::before {
  border-left-color: var(--smbk-color-border-brand);
}

.smbk-toc__item[aria-current="true"] {
  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);
}

.smbk-toc__item:focus-visible {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
  border-radius: var(--smbk-radius-control-xs);
}

.smbk-toc__item--child {
  padding-inline: var(--smbk-space-inset-2xl);
  padding-left: calc(var(--smbk-space-inset-2xl) - var(--smbk-border-width-hairline));
}

/* The current item's line as one indicator, placed over that item by the wrapper, which then marks
   the body `data-indicator`, and the indicator `data-child` when the item is a child. Without it
   (hand-written markup, the rendered pictures) the current item draws its own line. Every item's left
   edge is the list's, children included, so the line moves up and down, and in to the tree line over
   a child. */
.smbk-toc__body {
  position: relative;
}

/* Over the items, which come after it: over a child its line lies on the child's own tree line and must cover it. */
.smbk-toc__indicator {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.smbk-toc__indicator::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: var(--smbk-border-width-hairline) solid var(--smbk-color-border-brand);
}

.smbk-toc__indicator[data-child]::before {
  left: calc(var(--smbk-space-inset-lg) + var(--smbk-border-width-hairline));
}

.smbk-toc__body[data-indicator] > .smbk-toc__indicator {
  display: block;
}

.smbk-toc__body[data-indicator] .smbk-toc__item--child[aria-current="true"]::before {
  border-left-color: var(--smbk-color-border-subtle);
}

.smbk-toc__body[data-indicator] .smbk-toc__item[aria-current="true"] {
  border-left-color: transparent;
}

/* ---- narrow: the folding box (Figma's Mobile). It fills its column. The heading row reaches out
   through the box's inset on three sides so the whole top of the box takes a press, a target
   well over the minimum, while its contents sit where Figma draws them. ---- */

@container style(--smbk-layout: narrow) {
  .smbk-toc {
    width: 100%;
  }

  .smbk-toc__label {
    display: none;
  }

  .smbk-toc__toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--smbk-space-inline-md);
    margin: calc(var(--smbk-border-width-hairline) - var(--smbk-space-inset-lg)) calc(var(--smbk-border-width-hairline) - var(--smbk-space-inset-lg)) 0;
    padding: calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline) + var(--smbk-space-inset-2xs)) calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline)) var(--smbk-space-inset-2xs);
    border: 0;
    border-radius: var(--smbk-radius-control-md);
    background: none;
    color: var(--smbk-color-text-subtle);
    cursor: pointer;
    font-family: var(--smbk-typography-label-sm-font-family);
    font-size: var(--smbk-typography-label-sm-font-size);
    font-weight: var(--smbk-typography-label-sm-font-weight);
    line-height: var(--smbk-typography-label-sm-line-height);
    letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
    text-transform: var(--smbk-typography-label-sm-text-transform);
    text-align: start;
  }

  /* Only where a pointer really hovers: a tap on a phone would otherwise leave the row in the hover color. */
  @media (hover: hover) {
    .smbk-toc__toggle:hover {
      color: var(--smbk-color-text-brand);
    }
  }

  .smbk-toc__toggle:focus-visible {
    outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
    outline-offset: calc(-1 * var(--smbk-focus-ring-width));
  }

  .smbk-toc__heading {
    display: flex;
    align-items: center;
    gap: var(--smbk-space-inline-sm);
    min-width: 0;
  }

  /* The words may shrink in the flex row, so a long heading is cut short rather than pushing the icons out. */
  .smbk-toc__heading-text {
    min-width: 0;
  }

  /* The caret points at the closed list and turns to point down it when it opens. */
  .smbk-toc__caret {
    transition: transform var(--smbk-motion-state-duration) var(--smbk-motion-state-easing);
  }

  .smbk-toc--open .smbk-toc__caret {
    transform: rotate(90deg);
  }

  /* Closed, the body is gone: out of the tab order. */
  .smbk-toc:not(.smbk-toc--open) .smbk-toc__body {
    display: none;
  }

  /* ---- motion: the body grows from no height to its own with the enter purpose and shrinks with the
     exit purpose, clipped to a focus ring's reach while it moves; its display changes at the end of
     the exit, so it stays drawn while it closes. A browser that cannot animate to a natural height
     opens it at once. No movement under reduced motion. ---- */

  .smbk-toc__body {
    interpolate-size: allow-keywords;
    overflow: clip;
    overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
    transition-property: block-size, display;
    transition-duration: var(--smbk-motion-enter-duration);
    transition-timing-function: var(--smbk-motion-enter-easing);
    transition-behavior: allow-discrete;
  }

  .smbk-toc:not(.smbk-toc--open) .smbk-toc__body {
    block-size: 0;
    transition-duration: var(--smbk-motion-exit-duration);
    transition-timing-function: var(--smbk-motion-exit-easing);
  }

  @starting-style {
    .smbk-toc--open .smbk-toc__body {
      block-size: 0;
    }
  }
}

/* ---- motion: the line slides to the current item with the state purpose, as the tabs' indicator
   does, and the words change color with the feedback purpose. Only once the wrapper has placed the
   line, so nothing moves as the page loads. No movement under reduced motion. ---- */

.smbk-toc__item {
  transition: color var(--smbk-motion-feedback-duration) var(--smbk-motion-feedback-easing);
}

.smbk-toc__body[data-indicator] > .smbk-toc__indicator,
.smbk-toc__body[data-indicator] > .smbk-toc__indicator::before {
  transition-property: translate, width, height, left;
  transition-duration: var(--smbk-motion-state-duration);
  transition-timing-function: var(--smbk-motion-state-easing);
}

/* Set by the wrapper while it places the line without a slide. */
.smbk-toc__body[data-indicator] > .smbk-toc__indicator[data-instant],
.smbk-toc__body[data-indicator] > .smbk-toc__indicator[data-instant]::before {
  transition: none;
}

/* Under reduced motion the caret, the list and the marking line land at once; the items' color still fades. */
@media (prefers-reduced-motion: reduce) {
  .smbk-toc__caret,
  .smbk-toc__body,
  .smbk-toc__body[data-indicator] > .smbk-toc__indicator,
  .smbk-toc__body[data-indicator] > .smbk-toc__indicator::before {
    transition: none;
  }
}

/* ---- touch: the toggle and every item take invisible press areas ----
   On a touch screen an invisible area, centred on the narrow box's toggle and on each item, takes the press out to the
   comfortable target in each direction it falls short of it; items one under another touch, so each keeps to its
   own row and stays one press. What is drawn and every place stay as they are. */

@media (pointer: coarse) {
  .smbk-toc__toggle,
  .smbk-toc__item {
    position: relative;
  }

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

  /* The items touch, so between two items each area stays inside its own row. */
  .smbk-toc__item::after {
    inset-block: 0;
  }

  :is(.smbk-toc__body, .smbk-toc__nav) > .smbk-toc__list > li:first-child > .smbk-toc__item::after {
    inset-block-start: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
  }

  :is(.smbk-toc__body, .smbk-toc__nav) > .smbk-toc__list > li:last-child > .smbk-toc__item:last-child::after,
  :is(.smbk-toc__body, .smbk-toc__nav) > .smbk-toc__list > li:last-child > .smbk-toc__list > li:last-child > .smbk-toc__item::after {
    inset-block-end: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
  }
}

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
   user's own colors. Nothing here applies outside that mode. */

@media (forced-colors: active) {
  /* Forced colors draws every row's clear line; only the current row keeps one, and is filled
     with Highlight. The sliding line, once the wrapper has placed it, is Highlight too. */
  .smbk-toc__item {
    border-left-color: Canvas;
  }

  .smbk-toc .smbk-toc__item[aria-current="true"],
  .smbk-toc__body[data-indicator] .smbk-toc__item[aria-current="true"] {
    forced-color-adjust: none;
    border-left-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .smbk-toc .smbk-toc__item[aria-current="true"]:focus-visible {
    outline-color: CanvasText;
  }

  .smbk-toc__indicator::before,
  .smbk-toc__item--child::before {
    border-left-color: CanvasText;
  }

  .smbk-toc__indicator::before {
    border-left-color: Highlight;
  }
}

Tokens it reads

Table of contents tokens
Token and CSS	Value	Preview	Foundation
space.stack.md--smbk-space-stack-md	comfortable: 12pxcompact: 8pxchanges with density		Spacing
size.table-of-contents.width--smbk-size-table-of-contents-width	240px		Size
space.inset.lg--smbk-space-inset-lg	comfortable: 12pxcompact: 8pxchanges with density		Spacing
border-width.hairline--smbk-border-width-hairline	1px		Border width
color.border.subtle--smbk-color-border-subtle	light: #c4cdd8dark: #2d3237changes with theme		Color
radius.control.md--smbk-radius-control-md	6px		Radius
color.border.groove-top--smbk-color-border-groove-top	light: #c4cdd8dark: #00000066changes with theme		Color
color.border.groove-bottom--smbk-color-border-groove-bottom	light: #ffffffdark: #ffffff0dchanges with theme		Color
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
space.inset.2xs--smbk-space-inset-2xs	2px		Spacing
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
color.text.subtlest--smbk-color-text-subtlest	light: #606a75dark: #7c8692changes with theme		Color
size.icon.xs--smbk-size-icon-xs	12px		Size
space.inline.xs--smbk-space-inline-xs	4px		Spacing
size.control.sm--smbk-size-control-sm	comfortable: 32pxcompact: 28pxchanges with density		Size
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
color.text.brand--smbk-color-text-brand	light: #cc0d0ddark: #f34336changes with theme		Color
color.border.brand--smbk-color-border-brand	#cc0d0d		Color
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
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
radius.control.xs--smbk-radius-control-xs	2px		Radius
space.inset.2xl--smbk-space-inset-2xl	comfortable: 24pxcompact: 16pxchanges with density		Spacing
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
motion.state.duration--smbk-motion-state-duration	200ms		Motion
motion.state.easing--smbk-motion-state-easing	cubic-bezier(0.65, 0, 0.35, 1)		Motion
motion.enter.duration--smbk-motion-enter-duration	320ms		Motion
motion.enter.easing--smbk-motion-enter-easing	cubic-bezier(0.16, 1, 0.3, 1)		Motion
motion.exit.duration--smbk-motion-exit-duration	200ms		Motion
motion.exit.easing--smbk-motion-exit-easing	cubic-bezier(0.7, 0, 0.84, 0)		Motion
motion.feedback.duration--smbk-motion-feedback-duration	150ms		Motion
motion.feedback.easing--smbk-motion-feedback-easing	cubic-bezier(0.16, 1, 0.3, 1)		Motion
size.target.comfortable--smbk-size-target-comfortable	44px		Size

Manifest

table-of-contents.manifest.json

{
  "name": "table-of-contents",
  "block": "smbk-toc",
  "summary": "A box listing the sections of the page, children indented, the one in view marked; in a narrow space its heading row opens and closes the list.",
  "adapt": "css",
  "axes": {},
  "flags": {
    "open": {
      "description": "The narrow form only: the list shows under the heading row. Figma: Open. In a wide space the list always shows."
    }
  },
  "parts": [
    "nav",
    "label",
    "label-text",
    "toggle",
    "heading",
    "heading-text",
    "icon",
    "caret",
    "body",
    "indicator",
    "list",
    "item",
    "extra"
  ],
  "figmaNodeId": "4505:11351"
}

Menu

Customize the preview

Options

Examples

Usage

Child active

With key facts

Long entries

Mobile

Mobile open

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

Child active

With key facts

Long entries

Mobile

Mobile open

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