React Background Cards - Soft UI

PRO

The 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

NameTypeDefaultDescription
image*stringUsed to set the SimpleBackgroundCard background 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.
actionbool{ type: ["enternal", "internal"], route: string, }falseUsed to set the SimpleBackgroundCard route.

Default Background Card

// Soft UI Dashboard PRO React examples import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard";

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.

Analytics

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the DefaultBackgroundCard image overlay color.
image*stringUsed to set the DefaultBackgroundCard background image. Its a required prop.
title*stringUsed to set the DefaultBackgroundCard title. Its a required prop.
description*nodeUsed to set the DefaultBackgroundCard description. Its a required prop.
badgestringUsed to set the DefaultBackgroundCard label content.
actionbool{ type: ["enternal", "internal"], route: string, }falseUsed 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.

read more

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the ComplexBackgroundCard image overlay color.
image*stringUsed to set the ComplexBackgroundCard background image. Its a required prop.
description*nodeUsed to set the ComplexBackgroundCard description. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, }falseUsed to set the ComplexBackgroundCard route data. Its a required prop.