← All elements
<article class="bc"><div class="cv"><span>CSS</span></div><div class="bd"><h3>Container queries in practice</h3><p>Make components respond to the space they have, not the screen.</p><small>5 min read</small></div></article>About this card
A content card with a gradient cover, category tag, title, excerpt and read-time footer.
How it works
A flat gradient stands in for a cover image, with a tag chip in translucent white. The body holds a heading, excerpt and read time, and the whole card lifts a few pixels on hover.
Ways to customise it
- Put an image in .cv for a real cover.
- Edit the colours of the gradient.
- Add an author row in the footer.
Good to know
Make the title a link and let it stretch over the card with a pseudo-element if the full card should be clickable. Check heading levels for your page structure.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.