Layout blocks

Add tabs, tables and dividers to your documentation.

Tab blocks can contain other blocks (except for other tab blocks or tables).

Tabs block - menu

 

Live example:

This is a quote block inside a tab.

This is text in a tab.

You can also have headers

And paragraphs.

This is an image with a caption in a tab.

This is an image with a caption in a tab.


Type /tab to add a tab block.

The tabs block supports these block variants:

  • Tabs
  • Pills
  • Accordion
  • Column (experimental)

Changing tabs variant

  1. Select the tabs block.
  2. In the property panel, selech which variant you want to use.
  3. Some varians aren't currently displayed in the editor, but will be displayed in your published documentation. You can preview the page to see how they'll look live.
Tabs block - filled

Available block variants

Tabs

This is a quote block inside a tab.

This is text in a tab.

You can also have headers

And paragraphs.

This is an image with a caption in a tab.

This is an image with a caption in a tab.


Pills

This is a quote block inside a tab.

This is text in a tab.

You can also have headers

And paragraphs.

This is an image with a caption in a tab.

This is an image with a caption in a tab.

Accordion

What is the goal of the design system?

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Nord also helps to establish a common vocabulary between everyone in our organization and ease collabo­ration between different teams and disciplines.

Nord is Nordhealth’s design system for products, digital experiences and brand. It’s a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.

Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting.

Example FAQ are from Nord design system, one of our favorite design systems.

Columns

  • We’ve made some changes to improve your store’s security
  • These products aren’t getting a lot of views, but visitors are adding them to their carts
  • Your SSL certificates were activated
  • These are your less popular products with the highest add-to-cart conversion

Example guidelines from Polaris and Orbit.