Background Cards

PRO

The Background Cards components helps you to simply create beautiful cards containing stunning background image.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Default Background Card

// Material Kit 2 PRO React Examples import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard";

social activities

Working on Wallstreet is Not So Easy

There's nothing I really wanted to do in life that I wasn't able to get good at. I'm not really specifically talented at anything except for the ability to learn.

get started

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultBackgroundCard image. Its a required prop.
labelstring''Used to set the DefaultBackgroundCard label on top of its title.
title*stringUsed to set the DefaultBackgroundCard title. Its a required prop.
description*nodeUsed to set the DefaultBackgroundCard description. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, }Used to set the DefaultBackgroundCard route, it used to define the route and the action button text. Its a required prop.

Simple Background Card

// Material Kit 2 PRO React Examples import SimpleBackgroundCard from "examples/Cards/BackgroundCards/SimpleBackgroundCard";

Last visits in US

Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.

Props Information

NameTypeDefaultDescription
image*stringUsed to set the SimpleBackgroundCard image. Its a required prop.
title*stringUsed to set the SimpleBackgroundCard title. Its a required prop.
description*nodeUsed to set the SimpleBackgroundCard description. Its a required prop.

Colored Background Card

// Material Kit 2 PRO React Examples import ColoredBackgroundCard from "examples/Cards/BackgroundCards/ColoredBackgroundCard";
landscape

Nature's Light

It really matters and then like it really doesn't matter. What matters is the people who are sparked by it.

read more

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoUsed to set the ColoredBackgroundCard image overlay color.
image*stringUsed to set the ColoredBackgroundCard image. Its a required prop.
labelstring''Used to set the ColoredBackgroundCard label on top of its title.
title*stringUsed to set the ColoredBackgroundCard title. Its a required prop.
description*nodeUsed to set the ColoredBackgroundCard description. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, }Used to set the ColoredBackgroundCard route, it used to define the route and the action button text. Its a required prop.

Info Background Card

// Material Kit 2 PRO React Examples import InfoBackgroundCard from "examples/Cards/BackgroundCards/InfoBackgroundCard";

Good Vibes

215 spots

Props Information

NameTypeDefaultDescription
image*stringUsed to set the InfoBackgroundCard image. Its a required prop.
icon*nodeUsed to set the InfoBackgroundCard icon. Its a required prop.
title*stringUsed to set the InfoBackgroundCard title. Its a required prop.
labelstring''Used to set the InfoBackgroundCard label.