This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to small. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
This card has an image signifier and a title and a few lines of text. This card has the border radius set to large. The spacing is set to large. Lorem ipsum dolor sit amet consectetur adipisicing elit.
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.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
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.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
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.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
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.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
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.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
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.
5. Card variant. Here's no whole card clickability. No rising on hover. show_on_hover prop is added which makes that the description shows on the dark cover on the image. The link is clickable. This needs improvements in the future because of bad link color on the black cover and some cases can lead to the example number 6.
This description shows on hover. The link here is clickable.
6. Card variant. Here's no whole card clickability. No rising on hover. show_on_hover prop is added which makes that the description shows on the dark cover on the image. The link here overflows and is not visible because of the CSS clamp.
Here we have really long description, unfortunately CSS makes the link unreachable. The link here is clickable.
