So let's talk about cards now, cards can be really complex components that can be really simple components.
It really depends.
I have the whole spectrum right here to show you.
These are all the different types of cards I've designed in like this design system.
I have something simple as just like an icon in a title card.
I have something simple, like just even text and icon imagery.
I have something really complex like this.
So many different elements, other components in there as well.
You'll notice that I have like Pils, which is over here.
These are really simple components, kind of based off of our buttons.
So let's go back to cards.
I have icons, I have typography.
I have imagery, so I have different things even in this one, I have all of that, plus I have buttons.
So and these ones kind of have like an interaction built in.
So these are the different types of base components are built for carts.
And I want to show you how I went ahead and built these.
So you'll notice that I have a base card over here that has everything included, like it has reviews
and has like a staff pick bill, it has a percentage bill of sale.
It has, like strikethrough.
I thought about all the different use cases that you can have in a card and not saying that every card
is going to look like that.
It may be rare that every card is going to have all this information.
In fact, most cards look at this.
You see, they have turned them off, turn that all off in this variation of create a new component
called a large default product card.
And all I have is I have my.
Product name price.
I have a small description on these larger cards, I have the amount of reviews and the level of the
review.
This is like a five star product.
And I have the category.
Now, I do have a variation where there is a sale and I have a straight through at it and I have a sale
now I have one with just a staff pick and I have both.
So I've created all different components for those use cases.
You know, I may not use these all the time.
I may use them just to show variation within my designs.
But I'm also using them to communicate with my developers that, you know, these are the different
types of options that we need to think about in code.
So if I were to take a variation of this.
I can easily go ahead and I'll show you what the makeup of this card has.
So if I wanted to say that this card is liked, let's go into my save button.
So you see my I have my product image section, which is like my top layer, and I have my product info
section, which is my bottom layer.
And everything else, and this is also true in Australia, and the reason why I'm using Aurélio in this
instance, this instance is because it isn't going to be responsive in my designs.
I'm only using it like in one screen and I'm showing you how that looks.
But what you could do is if you really wanted to, you can use all the Layo to help space things out.
And then once you're happy with that, you can just turn that off and it'll just automatically revert
to another frame, a regular frame with the same spacing that you've applied.
You just won't get the nice variation of like.
If this copy went over the line, the card would not grow.
That's what I really love about Autolib.
Anyways, let's get into a very different type of ways we can customize this card.
So if I was thinking about this heart, I may want to fill it.
So I have hearts.
I want 24 pixel heart, and I'm just going to fill that with a red accents or someone to think about
what images I have.
So I've set it up in a way where I have a lot of variation.
I have electronics, I have music, I have books so far to turn that off like music.
So there's different ways we can turn all these on and off.
So I have like a record player, I have like different types of CDs or Vinals.
If you wanted to show, like, fashion, I have let's get into that.
I have different variations.
I have glasses.
I have shoes.
I have Schertz.
So what I've done is I've used that plugin called Remove Background to create easy ways for us to have
like a nice pale background, this nice grey background and have just the image of, like, the product
that we are trying to show.
So let's see what what we have here for electronic stuff, like a ultraright screen monitor that's really
ultraright.
I have like a VR kit, I have a MacBook, I have both headphones, I have an iPhone in here, Xbox ILIE
Controller and I have airports.
So say if I were to use the Xbox controller, Xbox elite controller.
And, you know, we're in Canada over here, so this is going to be really overpriced maybe I think
it's like maybe one hundred dollars, I don't know.
And we have a description.
This controller is going to change your life.
Mainly because it is also so.
I can also change like the category I can say something along the lines of this is in Jamie.
Oh, maybe this can fit into two categories, maybe if I want to just kind of.
You know, I'm more I wanted to that's up to you what you think is best for the product.
It may just be best to kind of narrow it down to just the one totally up to you and totally what's best
for the product.
So I can also change the number here.
There's four and there is maybe it's a four star.
And their reviews are like there's like two thousand and thirty four reviews.
So different ways that you can kind of customize that card.
I've also created like smaller horizontal carts.
You'll see that there is a sale.
I don't have a sale here just because there's not enough screen real estate.
I did give myself enough for like maybe like a staff pick, but.
On the smart cards, these bully boys like on category pages where we're just kind of stacking them
in the grid and these cards are much smaller just in nature.
So that is what I've done for just my standard vertical cards.
I've also created horizontal cards, so I've even broken these down.
So these are more like standard.
Let's remove this.
These are like your vertical cards.
They can be used for different instances.
But when I mean vertical, I mean image on top and the descriptions on the bottom horizontal cards.
I've used them in search results.
So this is my default.
This is my cell version.
And my staff pick version and my sale NSA version, so you see, like the system is very much following,
like a set of rules with these unwritten rules, like everything is placed, like left aligned, similar
over here, my staff picks always going to be on my right side.
Same with my cell.
I'm keeping things incredibly consistent.
While we're creating this design system, we're also creating the language.
So I also have wish-List card, so if something's on my wishlist, I have a default where it is saved,
if I click that, that would remove it from the wish list.
I have more of the important details here.
I care less about if it's a staff pick at this point.
You know, I've already adding it to my wish list.
I care more about its price.
And, you know, maybe it's reviews its category, that kind of information, and I've given it like
a little CTA where it's an add to cart button.
People can easily that to cart, so if there is a price change that is also reflected in this cart.
So like I'm saying, like there are cases where I have a wishlist card, but I don't have to create,
like, unnecessary options that we'll never see.
I don't need to create a static option because we'll never have that option here.
I've also gone ahead and taken this variant, so if you notice was all cards and the wishes cards are
both the same variants of the horizontal product card here.
Now, what makes them work is unallowed.
So if I were to go into my default component here, you'll see that I've actually hidden that primary
button, if I were to show it, everything would just pop right back up and center itself.
So, like I said, create a one based version and allow that to be like your source of truth.
And, you know, iterate on that.
I have a smaller horizontal card, which I'm using for order cards.
So when you have an order that's maybe shipped order in transit, I've created like a little link,
a text link here with a little icon and delivered.
I want people to know that they can click this and interact with it in some way, shape or form, maybe
to see a receipt or maybe to see, like all those order details.
And for my horizontal product cards here, these are more simple where that's just a product name in
a sale.
I'm not worried about anything else at that point.
And I'll show you how that's used in a recipe.
We have our car cars, which are pretty standard, we have our like our default and then our quantity
version, when we swipe left, we can edit the quantity and we have our color cards here.
Very simple.
These are our growing cards.
So they will grow based off of the content.
So if I select a new image.
Well, I'm going to do.
I'm just going to bring this all the way up so we can see.
We have our electronics.
I'm going to hide that, and if I bring in.
A new image will shrink.
Same with fashion, same with.
So I've done the same exact thing for this, so if I wanted to create like a text button or maybe like
this is a checkbox kind of thing, you know, select all the different types of categories that you're
interested in.
And this one could be gaming if I selected an Internet with a yellow background, with the black text
on top.
So just to show it selected, I have a text about button.
I have just a text card.
And I've created these just because I don't know if I'll ever use them.
I don't even think like if I if I were to use something like this.
And there is my variation, I don't think I would use orange, I would probably use something more subtle,
maybe I would use like nice light gray.
So, I mean, you don't have to stick to the colors that you're creating these components.
And they're meant to be used in an industry like.
And then I have a fixed button here, so nothing's going to change as I.
And that's meant to be that way on purpose, so that way I know I'll have maybe two lines of text here
or three lines at most, and these will all be able to say maybe like if I.
Create like a grid.
I'll show you what that looks like.
And they go like, I have a grid that is able to accompany things like just the rest of the page, but
also it really complements if I want to create like a section here that says, like, you know, latest
trends and so on and so forth and just appoint people into other funnels.
So that's how I've set up cards.
And you can see they're incredibly complex.
Like these ones are pretty complex.
But, you know, these are kind of like necessary, especially for argues case, we're using a lot of
cards, especially with products.
There's a lot of descriptions, there are a lot of different elements like prices, oil prices, pills,
reviews, categories, names, buttons, icons, imagery.
So this is an example of a really complex component and how we can use them if we look into our assets.
Just very quickly, we can see we have our cards here and I can see all my different cards, so if I
wanted my larger vertical cards, I'm going to go my vertical.
I'm going to see all the variation, I see large scale, large stuff pick, I want to salekhard and
right there I can.
Go right in and you may be thinking why there are so many different folders.
I mean, if there weren't, it would be a mess.
So have 20 percent off sale, and I can just easily add to that.
If I wanted to, I can take this and be like, OK, I'm creating some sort of recipe and we're going
to do that soon, I'm creating a recipe and I want oh, I don't want another Salekhard.
I actually want a large default card.
And this is where it's so powerful within FEMA to create these variations and easily swap them.
Oh, I don't want another default card.
I want salen stacked deck.
I don't want to sail and stuff pick.
I want just a static.
So, you know, create those variations for those different use cases and you'll see like just like
that, I've created four different variations and I can go in there and select all the different options
and customize them the way I like.
And I'm not going to create a component based off of that, but it just gives me all the options I need.
And that is how I've built out cards for our design system.