Search

Writing & formatting

Brienne Wong
Brienne Wong
  • Updated

Edit your styleguide

Familiar editing experience

Each page behaves just like a document such as Word, Google Docs, Dropbox Paper. This means you can type anywhere, add or delete lines etc. If you need to move content blocks around, use the 6 dot handle on the left.

Select text to format it

The formatting toolbar looks like this

formatting toolbar pop up over highlighted text

Add content blocks using the +

Hover a line, and you will see an + icon on the left. You can use this to insert content blocks, such as Sketch components, code, images, dividers and more!

Category > Page > H1

Group your pages together using Categories (click Add category in the bottom left). Each category then has an Add page action.

When you have a page open, a list of its H1 headers will be shown in the navigation tree. This is useful for your styleguide users to get around each page!

Hide styleguide name

You can hide the name of your styleguide on the cover page by toggling off Display text under the Cover style dropdown on the cover image.

Display text in the cover page settings toggled on

This will grey out the text and it will not display to viewers.

Styleguide name is greyed out

Cover page

To give your cover page a beautiful background, click Cover page in the left navigation tree, hover the cover, and click Change cover to set a background color or image.

Set cover image to fit

You can toggle the cover image to fit the width of the page. This means it will be responsive and scale if you view the styleguide on a mobile device. 

Cover style settings menu with fit image function toggled on

Adding links to pages in zeroheight

Open the Share link for your styleguide in an incognito/private browser window. Then hover over the header and copy the link from the link icon on the right:

Copy link to header function hovered over

 

You can double-check you have the right link by looking at the URL and making sure it starts with https://zeroheight.com and not your editing URL https://<yourteam>.zeroheight.com

Use markdown

Use markdown shortcuts to speed up your editing.

Toggle to edit

If you are logged in as an editor, you can toggle from the preview/view mode of the styleguide to the editor mode. This is great for making a quick fix when you notice an issue.

On the cover page, hover over the cover image and click on the pencil icon to toggle to the edit mode.

Pencil icon hovered over cover page

On a standard page, hover over the page title and click on the pencil icon to toggle to the edit mode.

Edit page function hovered over

Turn on/off page outline

If you have multiple headers for a page, you can enable the page outline for your styleguide page to help users find content quickly.

Page outline function enabled

Change the layout of your design components

You can change the layout of your design components to be either Grid or List view.

Gif showing how to change from grid view to list view

 

Headings and subheadings

You can use the page title, H1, H2, and H3 to create headings and subheadings within the different pages of your styleguide.

zeroheight toolbar

Hover over the “+” to see the options and select which size font you would like to use.

Including the page title, there are four heading sizes to choose from in total for your styleguide, as well as a main body size font.

 

Styleguide page with the differnt header options

In terms of accessibility, you can treat the page title as an H1, H1 as H2, H2 as H3, and H3 as H4.

 

Wider width text

You can make the text on your page the same width as other content blocks. This will change the width of the paragraphs, page introductions, and headers for all pages in the styleguide.

Example of wider width text

You can change the width of the text on your page from the Appearance tab of styleguide settings by checking Make text width the same as other content blocks.

Text size options in the Appearance section of the styleguide settings

Spellchecker tips

We currently don't have plans to implement a spellchecker in zeroheight. There are many available spelling and grammar checker apps like Grammarly and browser plugins online 😊. We recommend trying out apps to find the best one for you.

Multiple languages in zeroheight

At this time, we do not natively support multiple languages in zeroheight. As workarounds, you can:

  • Write the styleguide in the language you need
  • Use an online translator like Google Translate to copy and paste the content into your styleguide

👉 Note: At this time, translation apps, extensions, and plugins do not work in zeroheight. You will need to copy and paste the content into your styleguide.

Speak to your Customer Success Manager about your language needs if you're on our Enterprise plan.

Was this article helpful?