Hi, I’m Card.
And this is my copy. It can be here, but it doesn’t have to be; all elements are optional. You’ve already met my card picture. It has a 2:1 aspect ratio. And we have a shadow.
a.k.a. teaser boxes, tiles…
And this is my copy. It can be here, but it doesn’t have to be; all elements are optional. You’ve already met my card picture. It has a 2:1 aspect ratio. And we have a shadow.
Cards, teasers or tiles are combinations of several components and rules. Through flex they‘ll pretty much align themselves no matter how different the content is. They don‘t have to be the same size even in one row, and the images can either bring their own proportions or be forced into the same aspect ratio by adding classes.
<div class="co-3 card card-shadow">
<img class="card-head ar-21" src="img.webp" alt="…">
<h3>Headline</h3>
<p class="smaller">Copy</p>
<button class="but primary">ok</button>
</div>
1) All elements and dimensions are different (desktop; columns are 2 on tablet and 1 on mobile), common content hierarchy: image, heading, copy and cta-button
there can be up to five of these in one row
Usually there are four of this width in one row
One of the most popular widths will be the three-column layout, though.
2) All dimensions are identical, images are forced into 16:9 aspect ratio, only content varies.
Some copy over here, some party over there, my finger is on the button
trip up, fall on your face Some copy over here, you think it's time you get up Crunch time like a sit-up
if you think about it too much You may stumble, trip up, fall on your face (Don't hold back) you think it's time you get up Crunch time like a sit-up
3) forced 1:1 Images, no copy and justified to the right (desktop only).
4) Whole card is a link, no cta
really very small teasers for little copy
really very small teasers for little copy
really very small teasers for little copy
really very small teasers for little copy
really very small teasers for little copy
really very small teasers for little copy
5) No-image variant, with cta and separated from the background with .card-shadow
Some copy over here, some party over there, my finger is on the button (Don't hold back)
trip up, fall on your face Some copy over here, you think it's time you get up Crunch time like a sit-up
if you think about it too much You may stumble, trip up, fall on your face you think it's time you get up
Yes, too. The border radius for cards is yet another variable var(--rad) that can be applied to e.g. a card. Make sure to adjust the border-radius and the button position (card padding) optically – if buttons stay flush left. In order to avoid mismatching radii centering the button will most likely be the best choice. For the current example the var(--rad) is only set once as fixed px value. It can easily be changed to a dynamic values like vw or vh, but you might want to adapt these for each breakpoint individually.
6) by adding .rounded to co-… card classes you get rounded corners.
Make sure to adjust the border-radius and the button position (card padding) optically.
In order to avoid mismatching radii centering the button will most likely be the best choice.
Column content is aligned left per default, but as mentioned in the cards above, sometimes you need them to be centered. Or even right-aligned.
Since card-buttons are already "aligned" via align-self: flex-start in order to prevent them from stretching, they need to align themselves independently. Here self-s, self-c and self-e can be used to self-align them to flex-start (left), -center and -end (right).
The other elements inside a card/column use .center or .text-center, if the text itself (not just the containing paragraph) should be centered. Like shown in the first box.
∞) what else could we do with these…?
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history