Ssstyles › Card

Source

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><h2>Another card</h2></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>

A generic card

# Combined with shadow

<article data-card data-shadow="2">
	<header>Another card</header>
	<p>Lorem Ipsum dolor sit amet</p>
	<button>Click</button>
</article>