Blocks

Brienne Wong
Brienne Wong
  • Updated

When you start off with an empty page in zeroheight, you can select from many different blocks to build up your documentation. The below gives an explanation as to what each of the different blocks mean and how to use them in your design documentation.

zeroheight toolbar

Text

Paragraph

Paragraph function hovered over in the zeroheight toolbar.

Paragraph blocks are used for the typing of text blocks. You can also write in markdown.

H2 - Big heading

Big heading function hovered over in the zeroheight toolbar.

Big headings are H2 headings.

H3 - Medium heading

Medium heading function hovered over in the zeroheight toolbar.

Medium headings are H3 headings.

H4 - Small heading

Small heading function hovered over in the zeroheight toolbar.

Small headings are H4 headings on the page.

Design

Design uploads function hovered over in the zeroheight toolbar.

Design upload blocks are used to upload design components, frames, and styles including color swatches and typography. These are taken from the design files that you’ve linked or uploaded, so can come from a variety of design tools including Sketch, Figma, and Adobe XD.

Design uploads block

👉 Note: You can manually arrange your design uploads within the design uploads block in whatever order you want.

There are three styles of design upload blocks for color swatches, typography, and design uploads as shown below.

Color swatches:

Color swatch example in design uploads block

Typography:

Typography example in design uploads block

Design uploads:

Design uploads example

Code

Code function hovered over in the zeroheight toolbar.

Code blocks open up the possibility for various types of code to be uploaded in different ways. 

You can either create a live preview from code written in HTML/CSS/JS, insert a code snippet (we support syntax highlighting of over 30 different languages – see here for the full list), or embed code using a link through our Storybook integration. The latter will render live on screen.

reactpreview_newcodeblock.png

Markdown

Markdown function hovered over in the zeroheight toolbar.

Markdown allows you to sync your Markdown files from GitHub. It will appear as regular documentation to viewers as if it was written in zeroheight. You will need to connect your GitHub account to zeroheight first.

Table

Table function hovered over in the zeroheight toolbar.

Add in a table to format text or images, make a list, or create alternative page layouts. You can add columns and rows to ensure all your content is organized. Row and column outlines can be hidden from viewers. You can use tables to create component status pages and changelogs.

Table example

Image/GIF

Image and gif function hovered over in the zeroheight toolbar.

You can upload an image or a GIF into your documentation to add some more color or a more detailed explanation for your viewers.

Embed

Embed function hovered over in the zeroheight toolbar.

Embed using the embed block, including prototypes from Figma, Adobe XD, Axure, Marvel, and Protopie, as well as Github markdown files, videos, project management presentations and trackers, and other tools.

Embed block

Divider

Divider function hovered over in the zeroheight toolbar.

Insert a divider to break up your content for easier viewing between different blocks or to create separation on your page.

 

divider example

Shortcut tiles

Shortcut tiles function hovered over in the zeroheight toolbar.

You can add shortcut tiles anywhere in your styleguide. These can link to other parts of your styleguide or to external links.

Window to add shortcut tile link

You can enter a URL and a cover image for each shortcut tile to help viewers navigate your documentation or link out to other resources.

Rules

Rules function hovered over in the zeroheight toolbar.

Our Rules block consists of do's, don'ts, and cautions. These are a staple of any good design system documentation site. You can use them to give examples of how particular components should be used and common mistakes to avoid.

Attachments

Attachments function hovered over in the zeroheight toolbar.

Attach resources (font files, PDFs, presentations, etc.) to your styleguide for viewers to download.

Download function hovered over on an attachment.

Callout

Callout function hovered over in the zeroheight toolbar.

You can add a callout block to your styleguide to highlight important information. This could be useful for release notes, warnings, or other messages.

Design Tokens

Design Tokens function hovered over in the zeroheight toolbar.

You can add or create a Design Token using our Design Token block.

Design Tokens 2.0

Design Tokens 2.0 function hovered over in the zeroheight toolbar.

Tokens 2.0 is our next step towards a future with a much more powerful and flexible design tokens system. You are able to fully edit how your tokens are set up and which styles are included. You can also create completely custom tokens that are currently not supported by design tools.

 

Was this article helpful?