React Placeholder Component Styling

Placeholder Styling

Learn how to customize the React Placeholder component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

CSS variables

Placeholders use local CSS variables on .placeholder and .placeholder-wave for real-time customization.

scss

$placeholder-tokens: defaults(
  (
    --cui-placeholder-opacity-max: .18,
    --cui-placeholder-opacity-min: .1,
  ),
  $placeholder-tokens
);

$placeholder-wave-tokens: defaults(
  (
    --cui-placeholder-wave-opacity-max: 1,
    --cui-placeholder-wave-opacity-min: .4,
  ),
  $placeholder-wave-tokens
);

The pulse reads --cui-placeholder-opacity-max and -min on each placeholder, and the wave reads --cui-placeholder-wave-opacity-max and -min on its wrapper, the brightness of its highlight and of the rest of the placeholder. Lowering a minimum deepens the effect:

<CPlaceholder as="p" animation="pulse">
  <CPlaceholder xs={12} style={{ '--cui-placeholder-opacity-min': 0 }} />
</CPlaceholder>