Create a landing page

Brienne Wong
Brienne Wong
  • Updated

If you have multiple styleguides, you may want to create a landing page for the users of your design system. The easiest way to do this in zeroheight is by creating a new styleguide. You can quickly produce a landing page that looks something like the ones below.

Landing page examples

Simple landing page

Simple landing page example

Landing page with 'background'

Landing pages with background examples

Create a landing page

1) From the zeroheight dashboard, create a new styleguide.

2) At the top of the page, click on Add navigation and add a new tab. This will add the cover page to the top navigation rather than the left sidebar.

Use Add navigation function and home icon to navigate top navigation

3) Click on the home icon in the top navigation to open the cover page.

4) From here you can name your landing page, add a description and upload a cover image.

Cover image for landing page

Add links

At the bottom of the cover page, there is a placeholder for shortcut tiles. These can be used to link to other styleguides or external resources.

For example, you may have both a public-facing styleguide and a styleguide that is only accessible by employees. Alternatively, you may have different styleguides for different products or teams.

Landing page shortcut tile examples

More tips

Styling your cover page

See our top tips to help style your cover page. For example, if you want to add a background to your landing page.

Linking to other styleguides

When you link to another styleguide, make sure to use the 'Share' link available from the top-right corner of each styleguide.

Viewer redirect

If you are an Enterprise customer and have SSO enabled, you may want all viewers who log in with SSO to be automatically redirected to the landing page. We can set this up if you contact with the name of the styleguide you are using as a landing page.

Custom URL

You can configure a custom domain so that the landing page URL doesn't start with but is something more memorable. For example

Hiding the logo

If you don't want to display a logo on the landing page, simply upload an image that is the same color as your navigation bar.

Hiding the navigation tab

zeroheight styleguides must have at least one tab in the top navigation (other than the cover page). The simplest option is to have a tab that contains contact information for the Design Systems team. Alternatively, a workaround is to rename the tab to a space that will make it invisible on the navigation bar.

Hiding the styleguide name

If you don't want a name to display for the landing page you can toggle off the text visibility.

Was this article helpful?