Creative Tim  |  Docs

Blog Cards - Argon

PRO

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
// Argon Dashboard 2 PRO MUI examples import SimpleBlogCard from "examples/Cards/BlogCards/SimpleBlogCard";
Card title

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

NameTypeDefaultDescription
image*stringUsed to set the SimpleBlogCard image. Its a required prop.
title*stringUsed to set the SimpleBlogCard title. Its a required prop.
description*stringUsed 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, }falseUsed to set the SimpleBlogCard route, it used to define the route and the action button styles. Its a required prop.

Default Blog Card

// Argon Dashboard 2 MUI Examples import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard";
Shared Coworking
house
Shared Coworking

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

Mathew Glock
Mathew Glock
Posted on 28 February

Props Information

NameTypeDefaultDescription
image*stringUsed to set the DefaultBlogCard image. Its a required prop.
categoryfalse{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], label: string, }Used to set the DefaultBlogCard label style and text.
title*stringUsed to set the DefaultBlogCard title. Its a required prop.
description*stringUsed to set the DefaultBlogCard description. Its a required prop.
authorbool{ image: string, name: string, date: ["func", "string"] }falseUsed to set the DefaultBlogCard author details.
action*{ type: ["enternal", "internal"], route: string, }falseUsed to set the DefaultBlogCard route.

Transparent Blog Card

// Argon Dashboard 2 MUI 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...

Read More

Props Information

NameTypeDefaultDescription
image*stringUsed to set the TransparentBlogCard image. Its a required prop.
title*stringUsed to set the TransparentBlogCard title. Its a required prop.
description*stringUsed 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, }falseUsed to set the TransparentBlogCard route, it used to define the route and the action button styles. Its a required prop.

Waved Blog Card

PRO
// Argon Dashboard 2 PRO MUI examples import WavedBlogCard from "examples/Cards/BlogCards/WavedBlogCard";
Argon Dashboard 2

Argon Dashboard 2

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

More about us

Props Information

NameTypeDefaultDescription
image*stringUsed to set the WavedBlogCard image. Its a required prop.
title*stringUsed to set the WavedBlogCard title. Its a required prop.
description*stringUsed 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, }falseUsed to set the WavedBlogCard route, it used to define the route and the action button styles. Its a required prop.

Background Blog Card

PRO
// Argon Dashboard 2 PRO MUI 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.

read more  

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the BackgroundBlogCard image overlay color.
image*stringUsed to set the BackgroundBlogCard image. Its a required prop.
title*stringUsed to set the BackgroundBlogCard title. Its a required prop.
description*nodeUsed to set the BackgroundBlogCard description. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, }falseUsed to set the BackgroundBlogCard route. Its a required prop.
Contents