Go to Content
Design System
Playroom Storybook
🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

ColorDecoration React-only

Open in Storybook

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

Loading demo…

Additionally, only a part of a Card, namely a Card, may be decorated.

Loading demo…
Rules For Designers
  • Use either the top or the left position.
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.
  • If no colour is specified, the component won’t be rendered.