The card component is a generic UI element we can use in many cases, but it is the most common in post (blog, news) listings.
In general, there isn’t much work with the card component because the requirements mostly depend on the context. Nonetheless, it would be best if you watched for the following:
- if you use an image, you must set a proper
alt
value. - If you list them, using a list with
<ul>
and<li>
is a good idea. - If you have a publication date, use the
time
element.
Variations
- default: the default view is a vertically stacked layout.
- --horizontal: using the
.post-card--horizontal
modifier, you can make the card horizontally stacked.
Technical Details
- It uses the
a11y-card-link
mixin to stretch the link above the whole card (this makes the links under it unuseable). - There is an
aspect-ratio
for the thumbnail. For the--horizontal
variation it is needed...