Card

1import {
2Card,
3CardContent,
4CardHeader,
5CardTitle
6} from "@ecos/ui";
7
8<Card>
9  <CardHeader>
10    <CardTitle>Card header</CardTitle>
11  </CardHeader>
12
13  <CardContent>
14    This is some text within a card body.
15  </CardContent>
16</Card>

Card header

Optional supporting information.

Main card content.

Actions

1<Card>  
2  <CardMedia className="aspect-[16/9]" >
3    <img src="/images/registration-bg.png" />
4  </CardMedia>
5
6  <CardHeader>
7    <CardTitle>Card header</CardTitle>
8
9    <CardDescription>
10      Optional supporting information.
11    </CardDescription>
12  </CardHeader>
13
14  <CardContent>
15    Main card content.
16  </CardContent>
17
18  <CardFooter>
19    Actions
20  </CardFooter>
21</Card>

1<Card variant="default" />
2
3<Card variant="outlined" />
4
5<Card variant="filled" />

1<Card>
2  <CardHeader>
3    <CardTitle>Card header</CardTitle>
4  </CardHeader>
5
6  <CardContent>
7    This is some text within a card body.
8  </CardContent>
9
10  <CardFooter>
11    <Button variant="outline">
12      Learn More
13    </Button>
14
15    <Button>
16      Share
17    </Button>
18  </CardFooter>
19</Card>