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 |
|---|---|
| Name of the encapsulated component e.g.
HTML
|
| The optional variant of the selected component e.g.
HTML
|
Overriding style properties with custom CSS
By using custom CSS, individual component styles can be overwritten by using its CSS custom properties style interface.
Example
CSS
[data-vp-component="toc"] {
--foreground-color: navy;
--foreground-color-selected: blue;
--background-color: paleturquoise;
--background-color-selected: lightskyblue;
--border-color: navy;
}