Breadcrumbs

Components

Wherever possible, use our design tokens to customize Viewport’s Help Center theme.

If you want to customize specific components of the Help Center theme you can use the CSS custom property interface of our officially supported components. We recommend keeping your customizations to the officially supported components and their style interfaces.

Components are ordinary HTML elements marked with special attributes identifying the component and its variant.

Attribute

Description

data-vp-component

Name of the encapsulated component

e.g.

<div data-vp-component="component-name"></div>

data-vp-variant

The optional variant of the selected component

e.g.

<div data-vp-component="component-name" data-vp-variant="variant-name"></div>

Overriding style properties with custom CSS

:light_bulb_on:

By using custom CSS, individual component styles can be overwritten by using its CSS custom properties style interface.

Example

[data-vp-component="toc"] {
  --foreground-color: navy;
  --foreground-color-selected: blue;
  --background-color: paleturquoise;
  --background-color-selected: lightskyblue;
  --border-color: navy;
}

Supported components