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.

  1. In Cover settings, click the Background color icon
  2. Select a color from the color picker, or a token from your design system
  3. 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:

  1. In Cover settings, click the Text color icon
  2. Select a color from the color picker, or a token from your design system
  3. 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.

  1. Hover over the page cover and click the Add background image button (or in Cover settings, select Add background image)
  2. Select an image to use

Set Image scale

To change the scale of your background image:

  1. 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

  1. Open the Cover settings menu
  2. 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.

  1. In Cover settings, turn Background overlay ON to enable
  2. 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:

  1. In Cover settings, set the Show cover text option to OFF
Note -> This change will only appear in the published documentation

Show or hide sidebar

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.

  1. In Cover settings, set the Show sidebar option to OFF
Note -> This change will only appear in the published documentation