Component-Level Variables

Component Variables

Define variables at the component level to expose a customisation API without changing implementation.

Example

.card {
  --card-bg: #fff; --card-border: #dee2e6; --card-pad: 1.25rem;
  background: var(--card-bg); border: 1px solid var(--card-border); padding: var(--card-pad);
}
.card.dark { --card-bg: #2d2d2d; --card-border: #444; }

CSS

Full Editor

Pro Tip

Component variables create an API: callers override variables, not internal CSS.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned