Structure a Basic Card in Tailwind
Before styling, we'll check out what data we're dealing with by dumping it into the browser to see how it fits with some initial HTML structure.
Once the structure is in place we'll start applying style to the card at the root level. The way I like to think of the root level is the styles that affect the edges of the card and only apply those styles to it. For example, we'll add a background color and border-radius to the card we are styling. If we want to add padding or style to the content of the card, we will group that content and apply the necessary styling directly which won't affect the root level styles.
Adam Wathan: [00:00] Now that we've covered the fundamentals, we're going to move our focus over to using Tailwind to design and implement the sorts of common components you might need to build in your day-to-day work.
[00:08] We're going to start with a basic image card, something like what you see here on Airbnb. Let's jump over to the code. What you see here is like a workbench that I've set up as a Vue CLI app, so we have a place to build out this component. What you see here is a route app.view component where I've just got some classes in place to center whatever we build over in the viewport over here.
[00:30] I've also created this placeholder property card component, which is where we're going to actually build the thing that we're designing. Down below, I've also set up a bunch of placeholder data for the card that we're going to be working on so that we don't have to hard code that information into the component itself.
[00:45] The way that I like to get started is just by dumping in all of the information with no styles and just figuring out what to do with it. Let's head over to this property card. You see, we've got an empty div here. We're accepting the property as a prop in view so that we have access to all that data.
[01:00] The first thing we need to do is drop in all this content. Let's start by creating an image tag. We'll have that point to property.imageurl with some alt text pointing to property.imagealt. Under this, let's drop in the actual information about the property.
[01:16] If you look over here, we've got the title, we've got some pricing information, some information about reviews. We also have the number of bedrooms and the number of bathrooms. Why don't we start by displaying the title?
[01:28] Depending on where you're actually going to use this component, you might use an h2, an h3, or an h4. Since we're designing it in isolation here, I'm going to arbitrarily choose an h4. We'll do the property title here. Under that, we'll have a div that has the bedroom and bathroom information. We do something like property.bedsbeds.
[01:49] We'll throw on a bullet to separate things into property.bathsbaths. Under here, why don't we drop in some pricing information? I think it's property.formattedprice to get the pre-stringified value in dollars. Then we could do something like per week. This will show you $1,900 per week.
[02:13] Finally, why don't we drop in some information about the rating? We can do something like property.rating. This is a star rating out of five. Why don't we say, out of five stars? We can say, based on property.review, count reviews. This way, people can tell if it's a popular destination, or if it only has a small number of reviews.
[02:37] Now that we've got all the data in place, why don't we add some styling to try and get this looking more like a basic card? The first thing that we should do is maybe add a background color because right now, it just matches the background color behind it because it's transparent.
[02:51] Right on the root level of the card here, we want to do something like class = bg white. Now we do have that white background in the content area. If you take a look down here, you can see it looks really cramped because all this content goes right to the edges of the card.
[03:06] The first thing you might think to do is add some padding to the actual root level element itself like maybe something like P6. You see that this does create some space around the actual content, but it also creates some space around the image.
[03:20] For this reason, the way that I like to design cards is to think about the root level element as just being the outside of the card, sort of the edges and how you want things to look there. For actual content, it makes the most sense to group this stuff together in its own container and add any padding that we want to add there. That way, you can differ the padding based on the type of content in the different sections of the card.
[03:43] Let's get rid of this P6 here and let's just another div and we'll move all of this content inside of it. This is where we can add a class to do something like P6. Now you can see that the image is a full bleed image at the top, which looks pretty nice. We have some padding just around the actual content.
[04:03] The next thing that stands out to me is that right now things look a little bit harsh with this really sharp square corners. Why don't we try adding a bit of a border radius to this card to soften things up? I'm just going to go to the root element here. I'm going to stop with rounded-lg to add a nice big border radius.
[04:20] You might be thinking, "Ha. Why didn't that take effect?" If you look at the image here, you still see the square corners. If you look down below, it's a little bit hard to see right now because there's not much contrast between the white and the gray. The rounded corners did take effect at the bottom, just not at the top.
[04:35] Why is this happening? You see that if we comment out that this image that the actual card does have a border radius at the top. What's happening is the image, because the image has square corners of course is bleeding outside of the card. The square corners of the image are poking out on top of the rounded corners of the card.
[04:54] To prevent this, we can tell the root container to hide any overflowing content. We can do that by using overflow: hidden. Now this will crop any of its contents. Now you see we do have those nice rounded corners.
[05:08] Finally, to address this low contrast difference between the white background and the gray background here, why don't we add a subtle border to the card to make it standout a little bit more.
[05:17] I'm just going to add a border class here and let's see how that looks. Yeah. Now it looks a little bit nicer. Now we have this nice line between the card and the background that makes this standout a little bit more.
[05:27] Now that we have the basic bones in place for this card, in the next lesson we're going to focus on making all of this text content feel professionally designed.