React Blog Cards - Soft UI
PROThe 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";
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";
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
Mathew Glock
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";
Read More
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...
Props Information
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";
More about us
Soft UI Dashboard
One of the most beautiful and complex dashboards built by the team behind Creative Tim. That's pretty impressive.
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. |