It's time for another Level Up Friday. In this episode, we're going to make a Card Component.
You've seen card components all over the internet. Trello uses cards as the cornerstone of their entire product. Google also uses them in their stories carousel on the search results page.
Regardless of form, these components come up in nearly every site that I design these days.
Along the way, we're also going to have some fun with images. By using 2 relatively new CSS properties, object-fit and object-position, we'll be able to provide art-direction for our responsive images. I'll also use the intrinsic-sizing ratio trick to ensure our images scale uniformly based on an aspect ratio that we set.
Episode Links: