Component blocks | Made with Supernova

Component blocks can be used in your documentation to display Supernova components in your design system, and different properties attached to them.

There are three component blocks to choose from: component health, component checklist, and component overview table.

Each component block shows a view of selected component properties. You can choose from the following properties to display:

Figma — A link to the component in the Figma data source.

Health — The health status of the component.

Repository — A link to the component in a repository.

Deprecated — An indication of whether the component is deprecated or not.

Last edited — The time when the component was last edited.

Component blocks will look different in your published documentation than they do in the editor. You can check the Rendered look illustration in the property panel to get an idea of they'll look, or preview the page to see how they look with your components added.

Component health

The component health block shows a detailed view of a single component’s properties.

Add a component health block

Select Component health from the block menu.

Select the component you want to display.

Select the property (or properties) you want to display in the property panel at the side.

To change the component in the block, select a new one in the property panel from the dropdown in the Content section.

Component checklist

Component checklist - empty

The component checklist block displays a table showing a selected component, and highlighting selected properties of the component.

Add a component checklist block

Select Component checklist from the block menu.

Select the component you want to display.

Select the property (or properties) you want to display in the property panel at the side.

To change the component in the block, select a new one in the property panel from the dropdown in the Content section.

Component overview table

The component overview table block displays all of the components linked in your design system in a table. You can select any properties you want to display in the table, and have an option to add the date of each component’s last update.

Add a component overview table block

Select Component overview table from the block menu.

Select the property (or properties) you want to display in the property panel at the side.