All language subtitles for 12. Cards Overview

Our next block on the home page the revolution block requires that we use a new material UI component.

This is the card component and you'll see that it is a very flexible and powerful component that allows

you to pack a lot of functionality.

Let's go over to the material UI documentation and I'll go over all of the options that we have here.

I'm here on the documentation page under components surfaces and cards.

They tell us here that a card contains content and actions about a single subject cards are a very basic

UI component that I'm sure most Web sites use in some form of another.

And you can see a good example here of a simple implementation.

And then we have our content which is this text here up on the top.

And then our actions.

Is this Learn More button down on the bottom if we go ahead and open this up to see what's going on

here.

We'll see that they import the card.

Card actions and card content components we scroll down we'll see that they use them here in a similar

stacking fashion as all of the rest of the material UI components have done.

So you can see we start with an opening card component.

That is our outer most components and within the card components we have an adjacent card content and

a card actions component.

Like I said this first part with all of the text describing the word is our card content.

While the learn more button at the bottom is our card actions by using these two separate material UI

components within the larger card components.

All of these styling and alignment will be automatically taken care of.

And in more complex examples that we'll see below.

This really comes in handy.

So we'll scroll down and let's take a look at some more complex examples like this one here is a great

example with a lot of different elements going on.

So it's got this top section with our little avatar icon here.

A title a subtitle.

And then we also have an expansion button here as well as an expansion button down below which actually

expands our card.

And that is using a collapse component which is a material UI component that we will go over in the

second project of this course.

But let's go and open this up to see how that they are creating these effects.

So we'll open this up and you'll see now that they are importing the card component as well as a card

header component a card media component as well as the card contents and card actions components that

we're familiar with from the last example.

So the new ones here are the card header and the card media.

And we'll see when we scroll down that they again begin with their outer card component.

But the first component within the card is now our card header and that is a self closing component

that takes a set of props you see they're passing in an avatar component for the Avatar prop an icon

button for the action prop and the title in the sub header text as well.

These are all then rendered down to the header that we see below with our avatar the title and the sub

header and then our little icon expansion button here.

That is our actions to see the action prop right there.

And just by passing in that button it automatically is handling the styling for putting that over on

the right side your alignment between your title and sub header and all of these spacing for those elements

in between and then right underneath our card header we have the card media component card and media

component and that simply takes an image directly as well as a title and a class name for all your styles.

So the title is used for the alt tag and you can see when I leave the mouse over the image it displays

that text as well.

So that is just the card media component that automatically creates that style that you see in underneath

the card media.

They have the card content component that we're familiar with from before in this example that simply

has one big paragraph inside a typography component and then underneath it we have the card actions

and that gives us this last row right here.

Where we have all three of our icon buttons as well as below it has the collapse components and all

of the card content for this extra space here.

But hopefully that gives you a good example of what you can do with the card component and the flexibility

as well as the adaptability of this card component to easily and appropriately style the content that

you pass to it.

We can scroll down here below and it gives us more examples of how to use the image within your cards.

And the nice style that it applies for that as well as down here below.

An example of how you can use the actions within a card to create a UI controls so you can see that

by the way you pass in data differently and set up your card.

You can create these different but really clean layouts like this horizontal layout for the UI control

but all of the vertical layouts we've seen above and that all depends on how you style the content within

your card.

So if we come and we take a look at this example we can see we scroll down here how they're using the

card media components underneath a div containing all of the other card content to separate and create

this style that we see.

And if we come up to one of these examples we can see the difference when we open this up.

They are using the card a media component within their card action area components but on top of the

card content and so that is creating the different layout here.

So it's all just about arranging your components in the right order in the right way and then passing

in the right content to create the styles that you want and you can always remember the down here below

it at the API section here you can go and see any of the different components that are being used for

the card component like the card header and if you click on any of these you can then see all of the

different props that you have available to you to customize it.

So when you're working on your own projects if you can't remember a certain piece of functionality then

always come here and check.

This is the first place before you work on setting up your own custom styles or functionality.

I think that's about all there is to the card component though it's pretty similar to like the list

component that we used before and a bunch of these other sandwich structured components where you use

the different card content.

The card actions components within the card component and I think that that breaks it down to make it

really clear how everything is working but we'll get an even better feel for it when we actually use

the card component to build our revolution block on the home page in the next video.