Lorem Ipsum dolor sit amet
This component will render a card. It can have a header, content, background image and full-size link.
You need to import the CSS file and assign the data attribute to use it.
@import "ssstyles/css/card.css" layer(components);
# With content
<article data-card>
<header>Another card</header>
<p>Lorem Ipsum dolor sit amet</p>
<button>Click</button>
</article>
# With image and caption
<article data-card>
<figure data-card-background>
<img src="https://picsum.photos/1920/600" alt="This is just a placeholder image with no meaningful content" />
<figcaption>Caption</figcaption>
</figure>
</article>
# With header image and link
<article data-card>
<a data-card-link href="#" aria-label="A generic card"></a>
<img
alt="This is just a placeholder image with no meaningful content"
data-card-background
src="https://picsum.photos/1920/1080"
/>
</article>
# Combined with shadow
<article data-card data-shadow="2">
<header>Another card</header>
<p>Lorem Ipsum dolor sit amet</p>
<button>Click</button>
</article>
Lorem Ipsum dolor sit amet