Previewbox Docs

Appearance

CSS Variables ​

Previewbox components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Previewbox components to match a brand or theme.

Customizing Components ​

To customize a component, you can define the CSS variables in your stylesheet or directly in the HTML using the style attribute.

Global Variables ​

In your CSS file, you can define these properties globally or for specific elements:

css
:root {
  --pb-background-color: black;
  --pb-text-color: white;
  --pb-text-color-light: #ffffff;
}

Component-Specific Variables ​

To define component-specific variables, you can set them for a specific custom element.

css
previewbox-link {
  --pb-background-color: black;
  --pb-text-color: white;
  --pb-text-color-light: #ffffff;
}

Inline Styles ​

You can also set the CSS variables directly in the HTML using the style attribute.

Here is an example for the <previewbox-link> component:

html
<previewbox-link
  style="--pb-background-color: black; --pb-text-color: white; --pb-text-color-light: #ffffff;"
  href="https://web-highlights.com/about"
></previewbox-link>