You’ll Never Build Cards in Web Design the Old Way Ever Again

You are about to see me build a series of cards from a real production website, but I’m not going to build these cards completely from scratch.

I’m going to build them with my new card framework, and this should be a perfect illustration of why this framework exists and why it is so powerful.

So let’s go ahead and get right into it.

I’m going to share my screen.

The website that we’re using as our inspiration today is called Pad Split, and as we scroll down, we are going to encounter a bunch of different card designs.

They all have a very consistent design approach, but they’re all used for very different purposes, and they would all have to be built if you were recreating this website.

And of course, cards are a very, very common thing across all website projects.

So the first card that we encounter is this kind of feature card right here where it has a headline and it has two icon list items.

You’ll notice that there’s a box shadow on these cards.

There’s a very, very light border.

There’s a specific padding value.

There’s rounded corners.

Okay.

As we go through and look at the other cards, I want you to notice the similarities between this card and the other cards.

So we go down to the next section and yet again, we run into a card concept.

These I would call avatar cards because the image is essentially an avatar for each of these cities.

But again, we have a completely different layout here where we have kind of a three column layout.

We have an avatar instead of icons.

We still have a heading, but we have some text here.

We have an icon link, but look, we have padding.

Again, we have a white background on the cards.

We have a light border, rounded corners, box shadow.

A lot of the same styling is still here.

Why is this?

Well, this is very common in web design because consistency makes good design for the most part.

You don’t want design chaos.

You want things to look familiar and very similar.

And so you are going to see a lot of shared styles.

Now we’re going to scroll down here and you’re going to see a completely different kind of card, which is a very traditional icon card where we have an icon, a heading text.

But again, all of the other same global styling elements are in place.

We scroll down yet again, more cards this time for testimonials.

Again, a lot of the similarities.

We scroll down and now we see a wide card.

Now this is the first time where we don’t see a box shadow.

We don’t see a box shadow here, but we do see the other elements in play.

Okay.

We scroll down an avatar card yet again, but it’s used for a different purpose.

It’s used for meet our members.

And so we see many, many, many different card styles here.

And again, this is very common in web design.

So what I’m going to do is I’m going to recreate these cards and I’m going to use my card framework to do it.

So I have a sample install here, a dev install.

I’m just going to add a section and I’m going to add a container for each of these card styles.

So let’s go back and count.

We’re going to have one card style, two, three, four, five, and six.

Let’s just do these six right here.

Okay.

So one, two, three, four, five, six.

So I have six containers and each container is going to house a different style of card.

We’ll put all of them in a grid.

So this first one right here is going to be a three column grid.

Then the second one is going to be a three column grid.

The next one’s going to be a three column grid, three column grid.

This is going to be a wide card.

And then the last one is going to be a three column grid.

So we’re pretty much using three column grids for all of these things.

And I’m going to use BIM.

I’m going to name the grids.

I’m going to name the cards and we’re going to see how the card framework works and how it helps.

Okay.

So let’s go ahead and let’s make the first one.

So this is going to be my feature grid.

And I actually already have a feature grid all set up for this for, it’s just grid auto three, because the point of this is not to create grids.

The point of this is to create cards.

So what I’m going to do is add a block and this is going to be my first card right here.

And I’m going to call this feature card.

Now I can name them whatever I want.

I want you to keep that in mind as we go through, I can name them whatever I want.

And what I need in this feature card is a heading.

And then I need a list and I’m actually going to use an icon list and I’m going to use my icon framework for this icon list.

So we have a new card framework and I have a new icon framework and I’m actually going to use both of these in this demo.

So I’m going to go ahead and add inside of this card, we’re going to go with a heading and then we’re going to go with a block.

And then inside of that block, we are going to do another block.

Okay.

Now, if you don’t know how to make lists, it’s okay.

I’m going to show you, this is going to be list.

And I’ll just say, you know what?

Icon list right here.

And I’ll say icon list item.

And then inside the icon list item, I’m going to need my icon and I’m going to need text for the label.

Okay.

So we’re going to have icon.

We’re going to say icon list icon.

And then this is going to be icon list label, just like this.

Okay.

So next thing I’m going to do is I’m going to auto bend these.

This is all of the things that I need in order to create this card.

So I’m going to go ahead and I’m going to auto bend them.

Let me go ahead and put focus on here.

Do not disturb until this evening.

Okay.

We don’t need any other messages popping up.

Okay.

So feature card auto bend, and I’m going to go ahead and apply classes.

Now, nothing happens.

Why doesn’t anything happen?

Well, nothing happens because I haven’t turned on my card framework yet.

I haven’t turned on my icon framework yet.

We’re going to do that as our next step, because what I want you to see is what happened just now is what would happen to you if you were building cards, uh, just like this, but that’s not what’s going to happen to me because I have a card framework and you don’t.

So I’m going to go ahead and I’m going to turn that on.

So I’m going to open up automatic CSS.

I’m going to go to cards and I’m going to turn on the card framework.

I’m also going to go to options.

I’m going to go to automatically style cards and auto container query support.

Next thing I’m going to do is go to icons.

I’m going to make sure my icon framework is turned on.

Let’s go ahead and hit save.

Okay.

And right away, what you’re going to see is that things have happened now.

Uh, things have happened that did not happen before.

For example, this card called feature card now has a light border.

It has padding.

It has some spacing going on.

Things are happening automatically.

And this is going to be the start of realizing how this card framework works and why it is so absolutely valuable.

But again, you have to keep seeing it as we go.

So I’m going to take this list item right here and I’m actually going to use grid for this list item.

I’m going to say, uh, auto and I’m going to say grid one, which is, you know, one FR essentially.

Okay.

Uh, then I’m going to do, um, just put this icon in place.

Basically, uh, we can use font awesome for this.

We don’t want brands though.

Let’s go.

What did they use?

They used a dollar sign and they used a credit card.

Okay.

So I’m just going to say money.

All right.

I don’t even, I don’t, we don’t have the exact same icons.

Uh, and then credit card.

Okay.

As an, as another one, we can actually duplicate this here and then we will bring this in and we’ll say credit card and it selected it.

Fantastic.

Now, what I want to do for this icon list is I want to come down and I want to use an attribute called data icon list.

And immediately that’s going to empower the icon framework to come in and start manipulating this icon list, which I’ll show you more of in just a second.

Um, the card framework, by the way, is already manipulating this card for the feature card.

And again, I don’t have to name these things, anything in particular, I’m going to go ahead and duplicate, or we’re going to get three of each.

Now I’m going to take a quick visit over here to the front end, and we are going to start to see on the front end, and I can do this in the builder, but it’s easier to do this on the front end.

Uh, we’re going to see what the icon framework does for my icon lists.

Okay.

So first things first, I can come in and I have this notice that the icon is not, it’s not a perfect square.

It’s not, it’s not just, it’s not perfectly aligned.

Okay.

So I’m going to use this block offset feature and I’m going to essentially say to offset this five pixels, four pixels, something like that.

And then I’m going to say, maybe we want, um, 1.25 M for our icon size.

And then that’s actually adjusting my, uh, offset as well.

So we may need something like just one pixel on our offset.

Let’s go ahead and hit save on that.

And so again, these are icon lists.

So I’m able to manipulate them with the icon framework, and it’s probably actually going to help if we have some real, uh, data in here.

So I’m just going to copy this, paste it in.

We don’t want any extra spacing that we don’t need.

Let’s copy this and let’s paste that in and remove the extra spacing.

And I can actually just delete those two cards.

And then let’s, let’s get in a, uh, heading, save money and build credit.

If you guys want, you know, extra credit, I can show you how we can handle doing, um, handle doing that yellow underline as well, that little accent.

Uh, but now that we have real content in, I can go ahead and I can, I can put these in.

I’m also noticing, you know, the gap right here is a little bit much so I can come in here and I can control that gap.

So we can say something like 0.5 M 0.75 M maybe one M, you know, whatever we want it to be.

I’m going to go ahead and hit save.

We’re going to refresh and we’re going to see that we have built our first kind of card.

Okay.

Um, now, and most of the work honestly was to create this icon list.

It wasn’t, it wasn’t even really creating the card.

It was creating the icon list.

Um, now I am going to make one adjustment here.

I’m noticing that this is not using small text, right?

It’s using medium sized text.

Uh, actually, you know what?

I’ll fix that later.

I’ll just fix, I want you to see the power of the framework.

So we’ll, we’ll just, we can fix that at any time.

We don’t even have to fix it right now.

Let’s keep going.

Uh, what is the next kind of card?

Ah, we’re going to create this city card.

Okay.

So I’m going to create a city grid and a city card.

All right.

So what we’re going to do here is I’m going to come down and we’re going to say city grid.

Excellent.

I’m going to say grid.

And again, we’re going to say grid auto three, and we’re going to say grid gap.

I’m just using the context menus.

I’m just really, really rapidly coming in here and, um, and putting in the variables that I need to create this responsive grid.

Now I’m going to add a block.

I can’t type very well today.

It’s a little cold here in Atlanta.

My fingers, a little cold, little cold.

Okay.

Uh, this is going to be a city card.

We have a city grid city card.

Fantastic.

Okay.

What needs to happen with our city card?

Well, we need a, an avatar wrapper and an avatar.

We need a content wrapper, and then we need a, maybe a link wrapper.

Okay.

So I’m going to put three wrappers in here and then I’m going to put the, uh, elements inside of their wrappers.

So let’s count this.

We’re going to go one, two, three.

That’s three blocks, right?

This first one is going to be, and I’m, I’m just kind of keeping this organized as we go.

This is good practice, but it’s also a benefit to you while you happen to be watching.

So this is going to be the avatar wrapper.

This is going to be our content, content wrapper.

And then this is going to be our link wrapper.

Excellent.

Now inside of my avatar, what do I need to put there?

Well, an avatar, right inside of my content, I need to put a heading.

And then there was some text in there as well.

Inside of my link, I need to put an icon and I might as well, while I’m here, just come down and do an attribute and the icon framework in order for the icon framework to take over.

You need to use a data, a data attribute for, um, for styling, which is data icons.

Very simple.

Okay.

The next thing I need to do is make sure that this is properly an H3.

And then I can just go ahead and select, uh, the city of Atlanta.

And then we’ll say that this is Atlanta, right here, Atlanta right here.

And then this is going to be a paragraph.

Okay.

And this is going to be the description.

So we have a link wrapper and an icon.

We’ll do icon link, icon link.

Uh, and then we have our avatar.

Now in terms of the avatar cards, you do need to name your avatars avatar.

That’s how the card framework is going to know that that’s an avatar and it should style it as an avatar.

Now, uh, an avatar card is a very, very common thing in web design.

You’ll see them all over the place.

So is a media card, which we also have in the card frameworks.

We have normal cards.

We have media cards.

We have avatar cards.

We have icon cards and the behavior of the card framework changes based on the kind of card it is.

Now you don’t have to call the card any specific thing, but if you have media in it, you should name it media.

If you have an avatar in it, you should name it avatar.

You get the point, right?

Okay.

So what I’m going to do, I named it avatar here.

So I’m good to go.

I’m going to auto BIM this and I’m going to say, Hey, city card, let’s go ahead and apply classes.

And right away, man, uh, just stuff starts happening right out of the gate.

Okay.

The next thing I’m going to do, I need this.

Now I’m going to start manipulating the card.

A lot of the global defaults and stuff is happening.

That’s supposed to be happening.

I just need to finish it off.

Right?

So what I’m going to do here is I’m going to do another grid for this card.

Uh, and what I’m going to say is we’re going to do auto for the avatar side.

We’re going to do grid one, um, for the middle.

That’s the content area.

And we’re going to do auto for the link side.

Okay.

I’m going to do one FR here, and then I’m going to align this stuff to the vertical center in the content wrapper.

I’m going to align this stuff to the center as well.

And then I’m just going to go with a card gap, uh, right here.

Then I’m going to take my description and I’m just going to say, you know what?

I don’t want any line height, uh, on this description because there’s a little extra spacing coming from the line height.

And I think this says like from, you know, $169 a month or something like that.

I don’t remember what the actual content was.

Let’s go ahead and get our font.

Awesome.

Regular right arrow.

Um, how about solid is our bet?

There’s, there’s an arrow that I, that I actually like.

Okay.

Now this icon thing is it’s really taking over because of the icon framework, but we can go ahead and we can change because this isn’t really part of the icon framework necessarily.

In fact, what I can do to just make it not part of the icon framework is just remove data icon.

And then I can do whatever I want with it.

Right.

Uh, cause it’s going to be kind of a unique little thing.

That’s unlike, uh, anything else that’s been going on in any of the other cards.

Okay.

And this just goes to show you like any framework, the framework does a lot of work for you, but it doesn’t stop you from doing anything custom that you need to do.

It never stops you.

It never gets in your way.

It only just helps.

It only makes life easier.

Okay.

All right.

The next thing that we are going to do is we are going to probably duplicate this card.

Okay.

Let’s just duplicate three more times and see what our layout is.

Now, obviously our avatar is way too big.

So what I can do on my city card, and this is the beauty of the card framework.

I don’t have to know, uh, any targeting or anything like that.

I can just come in and override variables because everything in the card framework is variabilized.

And so I have something called a card avatar size, and I can just make the avatar any size that I want to.

I don’t need to know if it’s an image or a figure or a picture or what I need to target.

I just know that automatically there’s already a variable there controlling its size.

And this is all in the documentation of the card framework.

And there’s not a lot of it.

It’s very easy to learn and understand and get the hang of.

Uh, but I’m just going to say that this maybe we’ll just go 75 pixels on this avatar size.

Okay.

Now, one thing I can do in the card framework, let me, let me get this icon under control here real quick.

Uh, let’s go 48 pixels.

And this is, you know, bricks and these icons when you’re, this is why I made the icon framework.

Cause when you go rogue with this, it’s really a pain in the butt.

Um, let’s go with text L on these icons maybe.

And then what we want to do is we want to go root.

See, this is a little bit of the custom cause this isn’t really an icon in the icon framework.

This is outside of the icon framework.

And that’s why it takes extra work.

Um, let’s display this as grid.

Let’s go.

Oh, I need a semi colon there.

Let’s go padding and let’s go like one M and let’s go background color is primary and let’s go color is white.

Okay.

And let’s go aspect ratio is one and let’s go, uh, place items in the center.

And I don’t know why that didn’t place the icon in the center.

Uh, border radius.

Let’s go 50 VW is going to make it a circle and let’s go line height of one.

Uh, yeah, nothing else should be really influencing that.

Um, padding.

Oh, you know what?

Instead of padding, let’s just go with width of like 40 pixels.

Okay.

That’ll probably do it.

And 60 pixels.

Yeah.

Let’s go look at the original.

Yeah.

Okay.

It’s a little, it’s a little bit big.

It’s a little bit big.

Uh, let’s go 40 pixels.

And maybe that just means we need to bring this down to, uh, M right here.

Okay.

Perfect.

Something around there.

Okay.

We’re getting, we’re getting very, very, very close.

Uh, I’m not trying to make these things exact.

Maybe we do something like 50 pixels.

All right.

Let’s go ahead and save now on this description.

We just want to make this large text.

Um, or you know what?

Let’s do text M times 1.1 or so.

It’s just a little bit bigger.

1.05 maybe.

Okay.

Something like that.

And then let’s go ahead and make this text, uh, not BG dark.

Let’s make it text dark muted.

Okay.

And maybe instead of, instead of a card gap, we can go card gap divided by two, bring those things a little bit closer together.

All right.

Let’s just go.

I’m sorry.

I’m being a little OCD right now.

Um, let’s just go take a look.

Okay.

So we got those.

Oh, I’m also noticing the padding on these cards.

Okay.

Is a little bit smaller than the padding that they were using on their bigger cards.

And that makes sense because it’s a smaller card, right?

So what I’m going to do is go to city card.

And once again, I can just come down here and say, you know what?

The card padding for this probably just needs to be smaller.

Okay.

We can do something like space S and that’s going to shrink all of that card padding down.

And now I get the perfect outcome except for notice that these are circles and mine is a, uh, it’s not a circle.

It’s not a circle, but in the card framework, I can go to cards.

I can go to avatars.

I can come in here to radius and say all avatars should be 50 B VW.

Okay.

All avatars 50 VW.

And because these are avatar cards, they are all going to become circles.

Okay.

That’s fantastic.

All right.

What are we going to build next?

Let’s scroll down.

Ah, we need a traditional icon card.

Okay.

So we will call this our icon grid right here and we will put a block in.

Okay.

Block, block next.

Uh, actually, you know what I’m going to call this?

I’m going to call this, uh, yeah, that’s fine.

Icon grid, whatever.

I, it was, I was going to redo it cause it’s not a great name, but we’re not here to make grids.

We’re here to make cards, aren’t we?

All right.

So let’s call this icon card grid, something like that.

This is going to be an icon card.

And, uh, what is going to be in our icon card?

We’re going to do two blocks, block, block, very, very standard, traditional kind of thing here.

This is going to be the icon wrapper.

Can you guys see what I’m doing?

You can’t, let me, uh, let me shrink this up here.

Okay.

Bring this out.

Icon card, icon card wrapper.

Uh, and then this is going to be the content wrapper.

Now what would go inside the icon?

Do you think, uh, inside the icon wrapper?

I just gave the answer away.

It would be an icon.

Wouldn’t it?

It would be an icon.

Um, now we are going to use, uh, yeah, I mean, whatever they, they, they use these.

In fact, I might’ve already loaded these in.

Um, so we’re going to say SVG.

Now these icons are not formatted properly.

Okay.

Uh, but I’m going to use them anyway, just to show you that it’s still okay.

All right.

Content wrapper.

We need a heading and we need text.

Okay.

Perfect.

And this is going to be a, what, what is this?

What, let’s just put in the real content, more trustworthy than Craigslist.

Now I don’t actually, it won’t let me select the text more trustworthy than Craigslist.

All right.

More trustworthy than Craigslist.

Now I don’t like the fact that they shrunk that heading down so much, but I’m going to, I’m going to copy what they did anyway, just to show you that anything is possible.

Okay.

We very, Oh my gosh, you can’t even, okay.

I’m just going to put, I’m just going to put Ipsum in here.

All right.

We’re going to do Ipsum short.

I’m going to get that out.

Nice.

Perfect.

Fantastic.

All right.

I think our icon card is ready to go.

I’m going to go ahead and auto BIM this thing.

Once again, it’s an icon card.

So you do need to call this icon.

All right.

I’m going to go ahead and apply classes.

And then I’m also, because I want the icon framework to take this over, I’m going to say data icon on this icon card.

Now I’m noticing that they’re not really using boxed icons.

They’re using normal icons.

And my icon framework is set to boxed icons.

I don’t want boxed icons.

Okay.

So what can I do?

Very simple.

I’m going to go to automatic CSS icons, and I’m going to go to options and I’m going to turn off boxed icons and it’s going to just turn them back to normal and they’re not going to be boxed anymore.

And so see that icon goes back to normal.

Now I can also go in here to cards, icon cards, and I can change and manipulate the size of icons in all my icon cards from right here, from one global area.

I’m going to go ahead and hit save on that.

And we’ll go ahead and hide the dashboard.

Okay.

So let’s go ahead and duplicate this grid out.

Notice all the things that I’m not having to do.

Let me go make this a grid.

Let me go make it a grid, make it an auto three, make it a grid gap, and make it a grid one.

Fantastic.

Okay.

Save.

I duplicated one too many times.

So I’m going to delete that.

Like you’re not seeing me.

I’m not having to put the padding on every time, put the border on every time, put the rounded corners on every time, put this on every time, put that on every time, manage the different padding inside of the content and da, da, da, da, da, da.

I’m not going to do a lot of things.

And I always have these variables I can reference.

Like for example, right here, I don’t want content gap, which is given by default.

I want card gap.

So I’m just going to say card gap, and it’s going to give me my global card gap.

And everything is always going to just continue coming out perfect.

And then something like this, the card heading size.

I’m able to control this again with a locally scope variable.

So I’m going to come in and go to CSS.

And I just need to manipulate that card heading size.

It doesn’t matter if it’s an H3, H2, H1, H4.

It doesn’t really matter.

Card heading size.

I’m going to say is the, I want it to be the size of an H4.

Okay.

And so now it’s going to make it smaller, just like an H4.

Now let me go to the front end.

Okay.

And one thing I mentioned earlier that this, all this text is too small.

If you notice on their site, they use their normal body size text.

And the card framework by default uses smaller text because usually in cards, you want your text to be a little bit smaller, but on this particular site with this project, it doesn’t call for that.

And I want you to stay tuned, by the way, we do this wide card.

It’s going to blow your mind.

Okay.

We’re going to do this wide card in just a second.

It’s going to blow your mind.

If your mind’s not blown already of like what’s going on automatically and how this is all working, it will be in just a second.

All right.

But here’s just one example of maybe that you might be Oh, it’s like one of those like, Oh, I see.

Like you may not get some of this stuff at first, but if you give it some time, things will start to click and you’ll be like, how did the internet, how did, how did web designers live without a card framework before 2024, before Kevin, before automatic CSS, this is with such a pain in the ass.

And now it’s all standardized.

It’s all smooth.

It’s all automatic.

It’s all absolutely fantastic.

Okay.

So what we’re going to do is we’re going to go to cards and we’re going to go to typography and right here, the text size for our cards.

I’m just going to go M.

Have you ever been able to do this before?

I use BIM on every card.

Every card has different classes.

Every card is doing different things, but still yet somehow I have global control over all of these different things.

And you’re going to see this more in just a second.

Okay.

I’m going to go ahead and hit save.

And by the way, that’s the heading size right here, which means I can, I’m free to use an H1, H2, H3, H4, H4, it doesn’t matter because the heading size in my cards is controlled from right here.

Always a big, big, big help.

Okay.

So I have now created my icon cards.

I mean, we’re done.

Like this is so, we’re just rocking and rolling.

I’m going to skip the testimonial cards because I want to get to something different.

This is just, I mean, yet again, it’s a box with some stuff in it.

Okay.

This on the other hand, not just a box with some stuff in it.

My gosh, there’s an icon list.

This is a wide format.

The, the, the media goes to the edge of the card.

This by the way is a media card.

Okay.

The media goes to the edge of the card.

There’s rounded corners.

There’s, there’s a little stuff going on.

Okay.

There’s stuff going on.

So let’s go ahead and let’s see if we can build that.

So I’m going to come in and we’re going to call that a, what are we going to call that?

A CTA card.

We’ll call that a CTA card because it’s a call to action.

Look, it’s saying, Hey, you want to earn money as a pad split host?

Go ahead and click here.

Blah, blah, blah.

That’s a CTA and it’s a CTA card.

And it’s going to be a wide card.

Now, do we need to name it wide?

Like, what do we have a tall CTA card that looks like this, but it’s just tall instead of wide?

How is that going to be managed?

Don’t worry.

Card framework also has automatic support for container queries.

And you may not even know what that is right now, but you’re going to see it in just a second.

And I have done a video on it before, but this is just, it’s so powerful.

Okay.

So stick with me.

All right.

So we’re going to make a CTA card.

Let me go ahead and shrink this up right here and let’s come in to where do I thought, okay, I thought I had added the block.

I have not.

All right.

So let’s add the block and let’s do CTA card.

And then inside of our CTA card, we’re going to go block, block.

And one of our blocks is going to be the content wrapper.

And one of our blocks is going to be the media wrapper, just like this.

And I, you know what I’m going to do?

I am going to build this vertically first, and then I’m going to use the auto container queries to make it wide when it has enough space to be wide, but it’ll also, there’ll be a tall version automatically whenever it’s in a place where it’s not wide enough to be wide, it’ll just be tall and everything will be right in the world.

Everything will be automatically fantastic.

Okay.

So in my media wrapper, I want to do my media.

So I’m going to throw in an image and there we go.

Let’s go ahead and bring in this house right there.

That’s fantastic.

Now I did say, if it’s going to be a media card, you might want to name it media because that’s how the framework knows to control it as a media card.

In the content wrapper right here, we’re going to do a heading.

We’re going to do a block.

Yeah.

We’re going to have to make that list again.

Okay.

Lists are really annoying in page builders, but it’s okay.

We’re going to need a block inside that block.

So this is going to be our icon.

You know what?

I bet I can steal the icon list from up here.

Can I?

Icon list?

Yeah.

Oh, I called it feature card icon list.

Okay.

No worries.

No worries.

No worries.

It’s okay because the styling really comes from the icon framework.

So it’s all good.

All right.

So icon list, this is going to be icon list item.

And then you, I mean, you saw this all before, right?

We’re going to go with an icon and we’re going to go with a text in there.

Can you guys see what I’m doing?

I need to shrink this up.

I need to shrink that up right there.

Okay.

So this is going to be the icon list label.

This is going to be the icon list icon and icon list item icon list.

That’s all fantastic.

All I have to do come in here, uh, attributes, add attribute data icon list, and that’s going to card framework.

Now it’s going to take over for that.

Um, I’m just going to come in and once we auto BIM, I’m just making sure we have all of our stuff.

No, we need a button.

Okay.

So let’s go ahead and add a button there and let’s just throw on button primary.

Perfect.

That’ll auto style that auto BIM.

Here we go.

Media, media, media, media, media, button apply classes.

We’re all good there.

Okay.

First thing I’m noticing is that my image right here is not going full width across the screen.

So I’m going to go with a hundred percent and I don’t know.

I think bricks is hiccuping right now.

So I’m going to refresh the builder.

Um, cause there shouldn’t be, there we go.

Bricks was hiccuping.

It was not, it was not showing me the change in that card.

By the way, I’m going to wrap this in a figure tag.

Okay.

Um, so media is looking good.

I need to come in and get this list situation under control.

Um, so we are going to say grid and we’re going to say auto and we’re going to say grid one and we’re going to say gap of 0.5 M something like that.

And let’s also, I think we’re good there.

We just need to have our icons.

What are they using by the way?

Ah, yeah, they’re using the good old circular check mark.

Okay.

So we’ll say check.

And there it is right there.

Did I choose it?

Okay.

I chose it.

Awesome.

Um, next thing we’re going to do is we are going to grab the content right here and notice now for some reason they switched using small text.

It’s not, it’s not the normal body text anymore, but that’s okay.

We can, we can make all of this work, right?

Okay.

That looks really, really, really fantastic.

Um, let’s go ahead.

And because it’s, it’s wide right now, CTA card, we’re going to go to media wrapper and I’m going to say order minus one, and that’s going to bring this to the top.

That’s kind of how I want this to be when it is stacked.

Okay.

And to, just to help me design this, I can actually put two of these side by side, and I’m just going to throw a utility class on here.

I just want to see what this thing is going to look like.

Um, when, uh, it’s tall, right when it’s tall.

Okay.

So what I need to do first, the padding, right?

We just need to get rid of it.

We don’t need the card padding.

So I’m going to go and we don’t need it at all ever, right?

It doesn’t even matter if it’s wide or tall.

Um, so actually what I’m going to do very easy, just go layout zero on all sides of the CTA card and all the padding is gone.

And now in this content wrapper, all I have to do is add the card padding back.

Okay.

So I can just select card padding.

And now I’ve got a card where the image touches the edge of the card.

Now, what I can also do, cause I don’t need it is I can zero out the gap that is in here, uh, as well.

So I can just zero, zero on our gap.

And right away, I’m looking really, really, really good.

The next thing I’m noticing is that the media in these media cards has a radius, which usually I want on this project, but on this particular card design, because the media touches the edges of the card, it doesn’t look good for it to have a radius.

Now, thankfully, again, we can leverage the card framework because everything is variabilized.

I can literally just come in and I can say card media radius zero.

And now these cards right here in particular, the media is not going to have any radius.

Notice the card still has a radius, but the media does not have a radius.

Okay.

Now let’s go ahead and duplicate, duplicate, duplicate our list items.

And I know I didn’t change the tags to UL and LI.

That’s not the point of all of this.

The point of all of this is to demonstrate the card framework, right?

Okay.

Remember I said on this particular card, I want the list label to be small text because that’s what they were using.

So I can just come in and choose text S for this.

Now, because I made the text smaller, the icon is obviously appearing too big and the offset is different, but I can still control these things with the framework.

Okay.

I can just override the variables that are controlling these things.

All right.

So what I’m going to do is I’m going to come in and I’m going to say icon list icon size, because the icon size for an icon list.

And I’m going to say, let’s go back to 1M with that.

And I can also do icon block offset.

And I can say, you know what, three pixels here, maybe how about two pixels?

I don’t know.

And then I actually want to just dial this in like 1.2M, 2.

Actually, this would be down to like one.

I think one is actually going to look quite perfect there.

Okay.

What is the heading by the way?

Earn money as a pad split host.

Okay.

Let’s go ahead.

Oh, why is this flipping out?

Bricks is flipping out on me.

Okay.

Earn money as a pad split host.

Guys, this is looking really good as a tall card.

Okay.

Call to action.

I’m going to go ahead and hit save.

Now, what I can do is I can get rid of this second one and I want to now use and leverage the auto container queries from the card framework.

I’m going to open this again and just show you real quick cards, options, and right here, auto container query support, because this is on, I can just get to work right away with container queries.

I don’t have to worry about how to set them up, how to configure them, how to name them, where to put them.

Doesn’t matter.

Okay.

I can just get right to work right here on this card class in particular.

So I’m going to come down and I have a recipe for this where I’m going to say at card container.

And when it unfolds the recipe, it’s going to give me all of the code that I need.

And what I’m going to say is, okay, when the inline size is greater than 767 pixels, I want to do something to this card.

So what do I want to do?

Well, I want to display it as a grid.

I want to say the grid template columns are going to be a grid three, two kind of situation.

It’s already doing it.

It’s already doing it.

This is fantastic.

Uh, by the way, I need to take off this grid to class right here so I can better see what I’m doing.

Uh, let’s go back down here.

All right.

So grid template columns, grid three, two, uh, maybe we want to align items to the center.

Uh, that looks really good there.

Maybe I want to change the card padding to be something like space L, right?

Um, how about XL?

Ah, that looks pretty good.

Maybe, maybe, yeah, maybe XL, maybe XL.

I kind of like that.

Um, do we want three, two in here?

Do we want two, one?

No, three, two is better.

I’m just getting the ratio down.

Okay.

Actually, you know what we might need is two, three, because I think we need the media wrapper on the other side.

So we’re going to say root media wrapper, and we’re going to go with order one with this.

I, I, yeah, you need, if we look at this, we need the media on the right.

And then the content column is the bigger column.

So this just goes to three, two right here.

And now it just looks like the media wrapper is not, uh, stretching to the top.

So I believe we just go to, um, you know what we might need to do?

We might need to go CTA card.

Instead of that align items to the center, we might want to align items stretch.

Yes, we do.

And then the card media needs to be height of a hundred percent.

Okay.

Perfect.

That’s going to do that just fine.

And actually everything else is great.

Everything else is great.

So let’s refresh.

Let’s view this on the front end.

And there is our wide media card.

Guys, watch this though.

You got to watch this.

This is just, this is wild, right?

And remember, this is out of the box.

So I’m going to do a grid of two here.

Okay.

Um, I’m sorry.

I’m not typing.

Let’s just go grid of auto two, whatever.

Um, and I’m going to put a, I’m going to put two blocks in here because when you’re using media queries, you have to have container elements.

Okay.

I am going to take one of these CTA cards right here.

I’m going to copy it to my clipboard.

I’m going to come down here.

I’m going to paste it in this container and I want you to watch what happens.

Okay.

I’m going to paste.

Yes.

I want to allow pasting guys.

Look at this.

I’m going to paste another one.

We’re going to go ahead and hit save.

We’re going to go to the front end.

I just created a tall card and a wide card all in one.

And it responds intelligently and automatically to the size of the container that it happens to be in.

I don’t have to tell it when to be wide, when to be tall.

I don’t have to do any media query stuff.

I don’t have to, all of it is just done.

It’s just done.

And this is automatic container query support for the card framework.

It knows these things are a card.

Just like, by the way, it added all the default styling.

It knew all of this stuff.

All of these things were cards magically, right?

It’s not doing this to anything else that I add on the page.

It’s only doing it to cards.

It knew where to put the padding.

It knew how to manage the media, how to manage the icons, how to manage the icon lists.

This is the icon framework, the card framework working together.

What about this?

I created all these different card styles with all these different BIM classes.

There’s nothing tying them together.

Is there?

Like if, if Bev said, Bev comes along and says, guys, you missed the box shadow, right?

We, we, the designer wanted a box shadow.

We liked the box shadow.

You didn’t put it on your cards when you built them.

So you would have to go through and find every different kind of card that you created.

And you would have to add a box shadow to those cards individually, like not to every single card instance, but to every type of card, like the city card, the feature card, the icon card.

You would have to go find all of those and add the box shadow.

But what I can do is I can just come up here.

I can go to cards and these are all light cards, by the way, and card shadow, I can just say box shadow M and I can go ahead and hit save.

And now all of these cards are going to have a box shadow of M.

Okay.

Look, they all have, they all now have a box shadow, right?

Now we can go in and inspect.

It’s very light box shadow.

It’s very subtle box shadow, but I can show you, um, CTA cards.

Let’s come down and we are going to see box shadow is card shadow.

And you know what?

If I don’t want this particular card right here to have a shadow because it really doesn’t in the original design, I just go to CTA card, come down and I can say, you know what?

Card shadow.

Let’s just do none on that.

And then I’m going to save and I’m going to go back out and we’re going to take a look.

And now suddenly that card does not have the box shadow and all of the others still have the box shadow.

And this is another visualization of how the card framework just helps.

It never stops you.

It never forces you into anything.

It just helps and makes your life tremendously easy while also giving you global control, unprecedented global control over all of your card styles.

I mean, let’s take a look at some stuff here.

Let’s just watch, let’s just watch the dance happen, right?

The card padding, for example, look what I’m able to do across all of my cards, right?

Look what I’m able to do.

For example, with my card content gap, we can do three, two, one, right?

You’re able to adjust this card gap.

It’s another contextual kind of spacing, right?

All of this adds tremendous context to what you’re doing.

We have, as you can see, I can change my text size.

What about these borders, right?

What if I wanted all of my cards to have a five pixel border?

What if I wanted to change the border style to dotted?

Like I have, guys, these are different classes that I have used all throughout this website, different kinds of cards, but somehow, some way I still have global control over all of their shared styles.

I mean, this is so absolutely powerful.

I also, by the way, have the ability to use a concentric radius automatically on my cards, okay?

So if I hit save right here, it’s going to take whatever my normal radius is, the card padding, and then calculate the proper concentric radius for your cards.

If you don’t know how to do concentric radius math, this is an absolute light.

One toggle switch, and across every card you’ve ever built, concentric radius happens, right?

And by the way, you still have control over how that is calculated, which is just absolutely, there’s nothing, there’s never been anything like this before.

Now, mark my words, this will get copied to no end.

People will see this, and they will immediately start copying it, okay?

You know where it came from.

You know who created it first.

You know who came up with the concept, the idea, who fleshed out all of this, okay?

That’s why you stick with me.

That’s why you’re here.

It’s why you’re subscribed to this channel.

That’s why you’re an ACSS customer.

That’s why you’re a Geary Co. customer.

It’s why you’re in the inner circle.

It’s why you come to WDD Live.

That’s why you do everything, okay?

It’s okay.

It’s all right.

We all know.

It’s fantastic.

I’m just, I’m being, I’m just, I’m poking.

I’m trolling a little bit.

It’s understandable, right?

Adds it some entertainment value, right?

Icon size, all of your icons.

Icon radius.

We didn’t even get to see the boxed icon stuff, okay?

Because this site doesn’t use them.

Boxed icon stuff is even better.

Avatars, right?

We saw avatars here and how avatar size comes in.

The avatar radius, you can put borders on your avatars.

Aspect ratio of your avatars.

Aspect ratio of your media is four by three.

Guys, I just made all my media 16 by nine.

All of my media cards now use 16 by nine for the media.

Like global control over aspect ratio of the object fit for these things.

And then I get into the card styles, light cards, dark cards.

What do you want the button style to be?

Let me show you something real quick here.

Let’s say in your cards, like use solid buttons everywhere, but in your cards, your light cards specifically, you want to use the outline variance, okay?

Watch this.

Button, outline, okay?

And I’m going to go ahead and hit save.

And we are going to, there we go.

It’s done.

Done deal.

Done deal.

Every time we put a button in a card that’s a light card, it’s going to be an outline variant automatically.

I don’t have to go back and swap anything out.

I don’t have to, it’s just, it’s just done, right?

This is just tremendous, tremendous control.

Border color.

Let’s just visualize this.

If you wanted all your borders to be red, they can just all be red.

Remember, I, all of these are, they’re not using shared classes.

That’s what’s insane.

They have their own unique BIM classes, yet you can still globally control almost every single important aspect of them.

By the way, they also have dark variants just automatically.

Okay.

Watch this.

Just watch this default.

I’m going to go to options and I’m going to say my primary card style is dark.

And just to illustrate, just to show you real quick.

Okay.

They’re all dark now.

They’re just, they’re all dark now, right?

They’re all dark now.

And I, and I could go in and I can, I can start, you know, manipulating how dark looks and behaves and all of that.

I’m going to switch it back to light.

Let me show you something about the dark cards though.

You don’t have to choose, are they all light?

Are they all dark?

You could choose at any time, which, which one they’re going to be, right?

Let’s go back into the builder and let’s pick this card in particular right here, the icon card.

And I want this one to be dark.

So I’m going to say icon card, double dash dark.

Now, do I have to style anything?

No, the card framework is just going to know that this is supposed to be a dark card and it’s going to make it a dark card.

It’s a done deal.

It’s a done deal.

Dark and light variants are already built into the card framework.

You all, you don’t have to configure them.

You just, they’re already there.

I mean, you can adjust their styles in the dashboard, but they’re already there.

They’re already ready to go out of the box.

The amount of work, this is going to save you the amount of time.

This is going to set the amount of frustration.

This is going to save you the global control that this is going to get.

This is unprecedented.

What you were looking at right here is unprecedented.

Nobody has seen this before.

Nobody has done this before.

This is a brand new concept in web design and you are at the forefront of it.

And if you’re an automatic CSS user, you’ve already been using this.

You’ve already been experimenting with it.

You’ve already been playing with it, but this is going to continue to get more powerful.

It’s going to continue to get even more useful than it already is, which is already stupid useful.

You’re going to, and you’re going to see this on, you know, it’s just, it’s part of the deal.

It’s part of the deal.

You’re going to see it heavily, heavily copied.

Okay.

But again, I wanted to show it to you.

I wanted you to get excited about it.

I want you to start playing with it.

If you’re not already playing with it as an ACSS user, if you’re not an ACSS user at this point, I don’t know what you’re doing.

I don’t know.

I don’t know what you’re missing.

Okay.

I don’t, I don’t know what dots are not being connected at this point, but this is the place to be.

And, um, I, uh, that’s it.

I’m, I’m done with this video.

I think I’ve showed you enough.

I will continue using this in videos going forward.

You’ll see plenty more of it, but this should probably be a pretty good introduction.

So drop a comment below.

Let me know your thoughts.

What do you think about the card framework?

I didn’t even show you the full icon framework yet.

That’s going to be tremendous as well.

Um, yeah, I want to hear from you.

I love your comments.

I love the fact that you’re subscribed here.

By the way, the, the, the videos, they don’t like themselves.

Okay.

So you do have to hit the thumbs up.

Um, they don’t share themselves either.

You got to share them.

You got to tell a friend, you got to bring more people around to what we’re doing here because what we’re doing is very, very important, but that’s it for me.

I’ll be back very soon with another video.

I love you guys and, uh, I can’t wait to be back.

All right.

Peace.