Types of blocks

Document your design system with dynamic blocks

Text can be edited the same as in any most other editing software programs. There are multiple types of styles that text blocks can have for different purposes.

Text

Text blocks are created by simply typing in a new row in the documentation editor.

Example:

This is regular text.

This is bold text.

This is italic text.

This is strikethrough text.

Press cmd or ctrl + b to bold text
Press cmd or ctrl + i to italicise text
Press cmd or ctrl + shift + s to strikethrough text

Headers

Create hierarchy with headers.

Type /header 1 to create an H1 header
Type /header 2 to create an H2 heading
Type /header 3 to create an H3 heading

Lists

Display information in bulleted or ordered lists.

Type /ordered to create an ordered list
Type /bullet to create a bullet list

Blockquote

Display a quotation.

Type /blockquote to create a blockquote

Divider

Divide sections of content.

Type /divider to create a divider

Callout

A callout block can be used to highlight a section of text to make it stand out, and to communicate a certain message in your documentation.

There are four styles of a callout block (info, success, warning, error). Hover and click the icon to select a specific style for your block.

Type /callout to create a callout

Inline links

An inline link can be used to add links to text in your documentation.

  1. To link to a URL, highlight a section of text and click the Link icon in the rich text editing toolbar
  2. Switch to the URL tab and type or paste the URL you would like to use
  3. If you want to open the page in a new tab, turn Open in new tab to ON
  4. Click Confirm to save

In Supernova, you can easily link to another page in the documentation. In the case that a page gets moved or renamed, the link will stay valid.

  1. To link to a page, highlight a section of text and click the Link icon in the rich text editing toolbar
  2. Switch to the Page tab and select the page you would like to use (or type to filter)
  3. If you want to open the page in a new tab, turn Open in new tab to ON
  4. Click Confirm to save
To create an embedded link, see also Link blocks

Code

A code block can be created to display a code snippet.

  • Select a language from the dropdown menu to change the highlighting
  • Click Caption to add a caption below the block
  • Click Copy to copy the code to your clipboard

 

Live example:


                                        
                                        
                                        alert("Hello, World!");
                                        
                                        
Type /code to create a code snippet

Inline code

Plain text can also be formatted as inline code with the rich text editing bar.

Highlight the text and click the code icon button to convert it to an inline code block.

This is inline code

Press cmd or ctrl + e to convert text to inline code

Tabs

A tab block can be created to create tabbed sections of rich content. Tab blocks can contain other blocks (except for other tab blocks or tables).

 

Live example:

Compelling, rich documentation sells design systems inside organizations, but requires a lot of effort to get off the ground. Supernova makes creation and ongoing maintenance dead easy so you can focus on improving your design system.

Tab blocks can contain other blocks

Supernova manages the entire design system lifecycle in one place, without making your team change tools or maintain self-built workflows and integrations. Automate everything to fit the way you work already.

An image in a tab block

Type /tabs to create a tab block

 


Tables

A table block can be used to display text or images in a simple table format.

Reorder rows and columns

  1. Hover over the row or column you would like to move
  2. Click the = icon and drag to the desired position

Add additional rows or columns

  1. Hover over the + button at the end of the table rows or columns
  2. Or, hover and click the = menu on a row or column to open the menu
  3. Select insert column left or insert column right to add an adjacent column
  4. Select insert row above or insert row below to add a row adjacent to the current row

Delete rows or columns

  1. Select the row or column to delete with the = button
  2. Click the = button and select Delete from the menu
  3. Or, when a column or row is selected, press Del to delete the content, or if all cells are empty, row or column will be deleted

Add an image to a table

  1. Click the image icon to the right of the table to add an image in the currently selected cell
  2. Hover to replace or delete the image
  3. Click Add caption... below the image to add a caption
Type /table to create a table block

Customization

How text blocks are styled in the published documentation is determined by the documentation exporter.

See Custom properties for more details.