Project Cards - Argon
The Project Cards components helps you to simply create a beautiful card for projects.
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 Project Card
// Argon Dashboard 2 MUI Examples
import DefaultProjectCard from "examples/Cards/ProjectCards/DefaultProjectCard";
Props Information
Name | Type | Default | Description |
---|---|---|---|
image* | string | Used to set the DefaultProjectCard image. Its a required prop. | |
label* | string | Used to set the DefaultProjectCard label. Its a required prop. | |
title* | string | Used to set the DefaultProjectCard title. Its a required prop. | |
description* | string | Used to set the DefaultProjectCard description. Its a required prop. | |
authors | array | [] | Used to set the DefaultProjectCard included members or authors. It should be an array of objects with the following keys: `image` and `name`. |
action* | { type: ["internal", "external"], route: string, color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], label: string } | [] | Used to set the DefaultProjectCard route and action button style. Its a required prop. |
Complex Project Card
PRO
// Argon Dashboard 2 PRO MUI examples
import ComplexProjectCard from "examples/Cards/ProjectCards/ComplexProjectCard";
slack bot
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark''light' | dark | Used to set the ComplexProjectCard color. |
image* | string | Used to set the ComplexProjectCard image. Its a required prop. | |
title* | string | Used to set the ComplexProjectCard title. Its a required prop. | |
dateTime | string | "" | Used to set the ComplexProjectCard date or time. |
description* | node | Used to set the ComplexProjectCard description. Its a required prop. | |
members | array | [] | Used to set the ComplexProjectCard included members or authors. It should be an array of images. |
dropdown | bool{ action: func, menu: node } | false | Used to set the ComplexProjectCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
|
The below code contains a complete exmaple of ComplexProjectCard
including the dropdown menu functionality.