Teaser, variant - transparent. The teal color theme is set on the element which wraps the teaser, the teaser inherits color from the ancestor - wrapping element.

Teaser, variant - card. The navy color theme is set on the element which wraps the card variant teaser, the card variant teaser has its own default white color.

Teaser, variant - card. The black color theme is set on the element which wraps the card variant teaser, the default white color can be changed using a theme class on the teaser component. In this example it's yellow.

Gradient use case. A navy gradient is set on the element which wraps the card variant teaser. The card teaser has its own default white background color.

Gradient use case. A navy gradient is set on the element which wraps the card variant teaser. The card teaser has overwritten default white color and the teaser background is a gradient.

Gradient use case. A custom (yellow-wine) gradient is set on the element which wraps the card variant teaser. The card teaser has overwritten default white color and the teaser background has custom gradient as well.