Project Cards

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

// Soft UI Dashboard React examples import DefaultProjectCard from "examples/Cards/ProjectCards/DefaultProjectCard";
project #1
modern
As Uber works through a huge amount of internal management turmoil.
Alexa Tompson
Martin Doe
Alexaner Smith
Romina Hadid

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultProjectCard image. Its a required prop.
label*stringUsed to set the DefaultProjectCard label. Its a required prop.
title*stringUsed to set the DefaultProjectCard title. Its a required prop.
description*stringUsed to set the DefaultProjectCard description. Its a required prop.
authorsarray[]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
// Soft UI Dashboard PRO React examples import ComplexProjectCard from "examples/Cards/ProjectCards/ComplexProjectCard";
slack bot
slack bot
member profile
member profile
member profile
member profile

If everything I did failed - which it doesn't, I think that it actually succeeds.

4Participants
02.03.22Due date

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark''light'darkUsed to set the ComplexProjectCard color.
image*stringUsed to set the ComplexProjectCard image. Its a required prop.
title*stringUsed to set the ComplexProjectCard title. Its a required prop.
dateTimestring""Used to set the ComplexProjectCard date or time.
description*nodeUsed to set the ComplexProjectCard description. Its a required prop.
membersarray[]Used to set the ComplexProjectCard included members or authors. It should be an array of images.
dropdownbool{ action: func, menu: node }falseUsed to set the ComplexProjectCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of ComplexProjectCard including the dropdown menu functionality.