This article provides practical examples of using CSS properties and CSS custom properties in your component manifests.
A simple text component with standard CSS properties:
A button component using CSS custom properties (CSS variables):
Your component CSS must reference these variables:
Both CSS properties and CSS custom properties can be defined on nested elements within your component.
Separate design controls are displayed to users for each element when selected.
A button showing CSS properties with state variations:
A card component with nested text, image, a drop shadow filter, and a custom property for content spacing:
Component CSS: