React Background Cards - Soft UI
PROThe Background Cards component helps you to simply create beautiful cards containing a 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.
Simple Background Card
// Soft UI Dashboard PRO React examples
import SimpleBackgroundCard from "examples/Cards/BackgroundCards/SimpleBackgroundCard";
Search and Discovery
Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| image* | string | Used to set the SimpleBackgroundCard background 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. | |
| action | bool{ type: ["enternal", "internal"], route: string, } | false | Used to set the SimpleBackgroundCard route. |
Default Background Card
// Soft UI Dashboard PRO React examples
import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard";
Analytics
Social Analytics
Insight to help you create connect and convert. Understand Your Audiences Interests Influence Interactions and Intent. Discover emerging topics and influencers to reach new audiences.
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''dark' | dark | Used to set the DefaultBackgroundCard image overlay color. |
| image* | string | Used to set the DefaultBackgroundCard background image. Its a required prop. | |
| title* | string | Used to set the DefaultBackgroundCard title. Its a required prop. | |
| description* | node | Used to set the DefaultBackgroundCard description. Its a required prop. | |
| badge | string | Used to set the DefaultBackgroundCard label content. | |
| action | bool{ type: ["enternal", "internal"], route: string, } | false | Used to set the DefaultBackgroundCard route. |
Complex Background Card
// Soft UI Dashboard PRO React examples
import ComplexBackgroundCard from "examples/Cards/BackgroundCards/ComplexBackgroundCard";
User #hashtag in a photo on social media and get $10 for each purchase you make.
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''dark' | dark | Used to set the ComplexBackgroundCard image overlay color. |
| image* | string | Used to set the ComplexBackgroundCard background image. Its a required prop. | |
| description* | node | Used to set the ComplexBackgroundCard description. Its a required prop. | |
| action* | { type: ["enternal", "internal"], route: string, label: string, } | false | Used to set the ComplexBackgroundCard route data. Its a required prop. |