Background Cards - Argon
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
// Argon Dashboard 2 PRO MUI 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
// Argon Dashboard 2 PRO MUI 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
// Argon Dashboard 2 PRO MUI 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. |