React Project Cards - Soft UI

The Project Cards components helps you to simply create a beautiful card for projects.

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.

view project

CopySaved

1

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.

// Soft UI Dashboard PRO React examples import ComplexProjectCard from "examples/Cards/ProjectCards/ComplexProjectCard";

slack bot

more_vert

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

---

4Participants

02.03.22Due date

CopySaved

1

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 `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.

1