The post card component is a generic UI element we can use in many cases, but it is the most common in post (blog, news) listings.

There isn’t much work with the card component because the requirements mainly 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: You can make the card horizontally stacked using the .post-card--horizontal modifier.

Technical Details

  • It uses the a11y-card-link mixin to stretch the link above the whole card (this makes the links under it unusable).
  • There is an aspect-ratio for the thumbnail to control the dimensions better.

Dependencies

Resources