Token blocks

Display design tokens in your documentation.

Token blocks are dynamic content blocks populated with data from your design system. There are currently three types of token blocks to choose from: Design tokens, color ramps, and accessibility color grid.

Ref to 1771:30234

Add a design tokens block

 

Ref to 1771:29995

To add a design tokens block to your documentation:

  1. Select Design tokens from the block menu.
  2. In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
  3. Select the token type first.
Ref to 1771:30014
  1. You can then choose to add either a token group, or individual tokens (you can't add both). Search and select the tokens you'd like to use for the block in the selection dialog. The tokens will be shown in the same order in your published documentation.
  2. Click Save selection.

 

In the property panel to the right of the screen, you can do the following:

  • Change the token in the block by clicking Change selection.
  • Choose a theme token to either be displayed beside the base token value, or override it. See Displaying theme tokens for more.
  • Select which token properties you want to display in the block in the Token properties section.
Ref to 1771:29976