Card | Soft UI Dashboard React @ Creative Tim

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

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";

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

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.

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.