Go to Content
Design System
Playroom Storybook
#StandWithUkraine

ColorDecoration Beta

Open in Storybook

ColorDecoration serves for displaying a decorative strip of colour in a Card.

Loading demo…
Rules For Developers
  • ColorDecoration has a variety of uses, and something card-like usually acts as a wrapper, i.e. the element the decoration is attached to.
  • However, any wrapper is possible. Given that ColorDecoration is an absolutely positioned element, there has to be a wrapper that provides position other than static.
  • Said wrapper is also responsible for hiding the overflow whenever rounded corners are needed.
  • The color can be specified using the color or colorValue prop, i.e. a dedicated color or an arbitrary value. Additionally, a .g-bg-<color> background color as className works as well.