Cover card
Complex card with multiple elements and styles. It has options to add background images on various screen sizes, a transparent overlay, labels, text, and a button. You can add a single card or multiple equal cards in rows and columns. Can be used for almost anything: feature important content, link to resources, showcase products, services, etc.
Live Preview| Use case | Versatile cards for rich content and showcases. |
| Page speed impact | Low when not above the fold and using Link buttons instead of Call to Action buttons. Medium when placed above the fold or when using Call to Action buttons, especially on mobile. |
| Available in pages | Yes |
| Reserved block class | cover-card |
| Relevant files | css/components/cover-card.css |