Current section: Implementation 12 exercises

Positioning and Styling Text in Cards

Let's add text to our cards.

The card title will be an h2 wrapped with a div below the img tag.

We could use Flexbox or Grid to align the text at the bottom, but instead we'll use absolute positioning.

In the div's class we'll add absolute bottom-0 inset-x-0 to position the title at t

Loading lesson


00:00 So next, let's have the text. We'll start with just the title placed at the bottom of each card. And here we could use flexbox or grid to align the text at the bottom. But we can also use absolute positioning again. And I think that's what I'm going to do here. So below the image, I'll have a div which will contain our text.

00:20 And this will have a class of absolute as well. And we'll put it at the bottom with bottom 0 and inset x 0. Let's get an <h2> tag that says the card title is here. And it looks like nothing is here, but the card title is actually here.

00:39 It's just very small and black on some very contrasty images. So let's make it white and a little bit bigger and thicker. So class, text xl, text white. And let's go with font medium for the weight.

00:56 And you know what? I can change the font size to 2xl, I think. Yeah, that works. And let's also give our text some padding. So I'll do this on the parent here, p-4. Okay, that's nice. And let's also add the paragraph below. We'll work out how to show and hide it later.

01:13 But for now, we'll have a smaller text, sort of light gray instead of white. So below that, let's have a <p> tag with some lorem ipsum. Definitely not that much. This is still probably too much text.

01:28 Let's stop here and remove that line. And so we're going to give this paragraph a text white as well, but at 70% opacity. Nice. And let's add a margin top to give a bit of separation. so empty too. Okay I think it's good.