Card | Soft UI Dashboard React @ Creative Tim

The Blog Cards components helps you to simply create beautiful cards for blog posts or other purposes.

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 Blog Card

PRO

// Soft UI Dashboard PRO React examples import SimpleBlogCard from "examples/Cards/BlogCards/SimpleBlogCard";

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Props Information

Name	Type	Default	Description
image*	string		Used to set the `SimpleBlogCard` image. Its a required prop.
title*	string		Used to set the `SimpleBlogCard` title. Its a required prop.
description*	string		Used to set the `SimpleBlogCard` description. Its a required prop.
action*	{ type: ["enternal", "internal"], route: string, color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light", "default"], label: string, }	false	Used to set the `SimpleBlogCard` route, it used to define the route and the action button styles. Its a required prop.

Default Blog Card

// Soft UI Dashboard React examples import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard";

house

Shared Coworking

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.

Mathew Glock

Posted on 28 February

Props Information

Name	Type	Default	Description
image*	string		Used to set the `DefaultBlogCard` image. Its a required prop.
category	false{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], label: string, }		Used to set the `DefaultBlogCard` label style and text.
title*	string		Used to set the `DefaultBlogCard` title. Its a required prop.
description*	string		Used to set the `DefaultBlogCard` description. Its a required prop.
author	bool{ image: string, name: string, date: ["func", "string"] }	false	Used to set the `DefaultBlogCard` author details.
action*	{ type: ["enternal", "internal"], route: string, }	false	Used to set the `DefaultBlogCard` route.

Transparent Blog Card

// Soft UI Dashboard React examples import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard";

Rover raised $65 million for pet sitting

Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover...

Name	Type	Default	Description
image*	string		Used to set the `TransparentBlogCard` image. Its a required prop.
title*	string		Used to set the `TransparentBlogCard` title. Its a required prop.
description*	string		Used to set the `TransparentBlogCard` description. Its a required prop.
action*	{ type: ["enternal", "internal"], route: string, color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light", "text", "inherit"], label: string, }	false	Used to set the `TransparentBlogCard` route, it used to define the route and the action button styles. Its a required prop.

Waved Blog Card

PRO

// Soft UI Dashboard PRO React examples import WavedBlogCard from "examples/Cards/BlogCards/WavedBlogCard";

Soft UI Dashboard

One of the most beautiful and complex dashboards built by the team behind Creative Tim. That's pretty impressive.

More about us

Props Information

Name	Type	Default	Description
image*	string		Used to set the `WavedBlogCard` image. Its a required prop.
title*	string		Used to set the `WavedBlogCard` title. Its a required prop.
description*	string		Used to set the `WavedBlogCard` description. Its a required prop.
action*	{ type: ["enternal", "internal"], route: string, color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light", "text", "inherit"], label: string, }	false	Used to set the `WavedBlogCard` route, it used to define the route and the action button styles. Its a required prop.

Background Blog Card

PRO

// Soft UI Dashboard PRO React examples import BackgroundBlogCard from "examples/Cards/BlogCards/BackgroundBlogCard";

Hey John!

Wealth creation is an evolutionarily recent positive-sum game. It is all about who take the opportunity first.

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	dark	Used to set the `BackgroundBlogCard` image overlay color.
image*	string		Used to set the `BackgroundBlogCard` image. Its a required prop.
title*	string		Used to set the `BackgroundBlogCard` title. Its a required prop.
description*	node		Used to set the `BackgroundBlogCard` description. Its a required prop.
action*	{ type: ["enternal", "internal"], route: string, label: string, }	false	Used to set the `BackgroundBlogCard` route. Its a required prop.