Blog post cards, team member cards, product cards, service cards … image cards are used all the time in web design. The question is … are you building them correctly in Oxygen?

  1. Are they responsive with SRCSET images?
  2. Do they use actual images instead of background images?
  3. Are you able to use ALT tags?
  4. Are you able to achieve equal height images that can handle image uploads with any aspect ratio automatically?

If you can't answer "Yes" to all of those questions at the same time, then there's a strong chance you're not building image cards correctly.

Here's what you'll get out of this tutorial…

  1. Best practices for building cards and image cards.
  2. BEM class naming structure for better organization.
  3. How to add SRCSET images in Oxygen.
  4. How to get regular images to behave like background images (without losing SRCSET and ALT tags).
  5. How to build a traditional image card.
  6. How to build a full image card with text overlay.
  7. Absolute positioning made easy.
  8. A few other little tidbits here and there.

If you find this tutorial useful, make sure to like and subscribe. I'm also taking requests for future tutorials so drop a comment and let me know what you want to see!