Background Cards
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
// Otis Kit PRO 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 startedProps Information
| Name | Type | Default | Description |
|---|---|---|---|
| image* | string | Used to set the DefaultBackgroundCard image. Its a required prop. | |
| label | string | '' | Used to set the DefaultBackgroundCard label on top of its title. |
| title* | string | Used to set the DefaultBackgroundCard title. Its a required prop. | |
| description* | node | Used 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
// Otis Kit PRO 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
| Name | Type | Default | Description |
|---|---|---|---|
| image* | string | Used to set the SimpleBackgroundCard image. Its a required prop. | |
| title* | string | Used to set the SimpleBackgroundCard title. Its a required prop. | |
| description* | node | Used to set the SimpleBackgroundCard description. Its a required prop. |
Colored Background Card
// Otis Kit PRO 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 moreProps Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Used to set the ColoredBackgroundCard image overlay color. |
| image* | string | Used to set the ColoredBackgroundCard image. Its a required prop. | |
| label | string | '' | Used to set the ColoredBackgroundCard label on top of its title. |
| title* | string | Used to set the ColoredBackgroundCard title. Its a required prop. | |
| description* | node | Used 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
// Otis Kit PRO Examples
import InfoBackgroundCard from "examples/Cards/BackgroundCards/InfoBackgroundCard";
Good Vibes
215 spotsProps Information
| Name | Type | Default | Description |
|---|---|---|---|
| image* | string | Used to set the InfoBackgroundCard image. Its a required prop. | |
| icon* | node | Used to set the InfoBackgroundCard icon. Its a required prop. | |
| title* | string | Used to set the InfoBackgroundCard title. Its a required prop. | |
| label | string | '' | Used to set the InfoBackgroundCard label. |