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...

Dependencies

Resources