Blog Cards

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.

Default Blog Card

PRO
// Material Kit 2 PRO React Examples import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard";
Shared Coworking
hub
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.
raisedbooltrueIf true make the image raised add a colored shadow for it and make the author image circular.
action*{ type: ["enternal", "internal"], route: string, }falseUsed to set the DefaultBlogCard route.

Simple Blog Card

PRO
// Material Kit 2 PRO React 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.

Go Somewhere

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.

Transparent Blog Card

// Material Kit 2 React Examples import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard";
MateLabs mixes machine learning with IFTTT
MateLabs mixes machine learning with IFTTT

If you've ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ...

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", "default"], label: string, }falseUsed to set the TransparentBlogCard route, it used to define the route and the action button styles. Its a required prop.

Raised Blog Card

PRO
// Material Kit 2 PRO React Examples import RaisedBlogCard from "examples/Cards/BlogCards/RaisedBlogCard";
Material Kit

Material Kit

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

More about us

Props Information

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

Centeredsed Blog Card

// Material Kit 2 React Examples import CenteredBlogCard from "examples/Cards/BlogCards/CenteredBlogCard";
Get Insights On Search
Get Insights On Search

Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.

find out more

Props Information

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

Backgroundsed Blog Card

// Material Kit 2 React Examples import BackgroundBlogCard from "examples/Cards/BlogCards/BackgroundBlogCard";

Flexible work hours

Rather than worrying about switching offices every couple years, you stay in the same place.

Read More

Props Information

NameTypeDefaultDescription
image*stringUsed to set the BackgroundBlogCard image. Its a required prop.
title*stringUsed to set the BackgroundBlogCard title. Its a required prop.
description*stringUsed to set the BackgroundBlogCard description. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, }falseUsed to set the BackgroundBlogCard route, it used to define the route and the action button text. Its a required prop.