Page covers

Add custom styled covers to your documentation pages

Change the appearance of page covers across your documentation to match your brand style without creating custom exporters.

Add a custom background color

If you prefer to use a background color instead of an image, you can select from a list of tokens in your design system, or add a custom color with the color picker.

In Cover settings, click the Background color icon

Select a color from the color picker, or a token from your design system

To reset the background color to default, click the reset button

Note -> The tokens displayed reflect the current selected brand in a multi-brand design system

Change text color

To change the text color of the page title and description:

In Cover settings, click the Text color icon

Select a color from the color picker, or a token from your design system

To reset the text color to default, click the reset button

Add a custom background image

An image can also be used as a cover background.

Hover over the page cover and click the Add background image button (or in Cover settings, select Add background image)

Select an image to use

Set Image scale

To change the scale of your background image:

In Cover settings, under Image scale, select Fit to make your image fit inside the container, or Fill to have the image fill the entire container

Adjust cover height

Cover height can be adjusted manually, or by setting an explicit height in the cover settings.

Change text alignment

Open the Cover settings menu

Under Alignment, select between the options left or centered

Add a background overlay

If your chosen background and text color do not have enough contrast, you can optionally add a background overlay. This will add a dark filter to the background image so light text can be read.

In Cover settings, turn Background overlay ON to enable

A preview of the overlay will be visible in the editor

Show or hide cover text

Cover text (page title and description) are visible by default. To hide cover text completely, if for example your cover background contains text already:

In Cover settings, set the Show cover text option to OFF

Note -> This change will only appear in the published documentation

The navigation sidebar is visible by default. If you would like to create a landing page for your documentation, you can optionally hide the sidebar on this page.