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.
Paragraph blocks are used for the typing of text blocks. You can also write in markdown.
H2 - Big heading
Big headings are H2 headings.
H3 - Medium heading
Medium headings are H3 headings.
H4 - Small heading
Small headings are H4 headings on the page.
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.
👉 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.
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.
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.
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.
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.
Insert a divider to break up your content for easier viewing between different blocks or to create separation on your page.
You can add shortcut tiles anywhere in your styleguide. These can link to other parts of your styleguide or to external links.
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.
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.
Attach resources (font files, PDFs, presentations, etc.) to your styleguide for viewers to download.
You can add a callout block to your styleguide to highlight important information. This could be useful for release notes, warnings, or other messages.
You can add or create a Design Token using our Design Token block.
Design Tokens 2.0
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.