Blog Cards

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


Default Blog Card

Pro
Image Placeholder
HubShared 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 image of DefaultBlogCard.
category*StringUsed to set the DefaultBlogCard label style and text. It is an object and has the following keys:
  1. color for setting the text color.
  2. label for setting the text.
It is a required prop.
title*StringUsed to set the title of the DefaultBlogCard component. It is a required prop.
description*StringUsed to set the description of the DefaultBlogCard component. It is a required prop.
author*'image''name''date'Used to set the DefaultBlogCard author details. It is an object and has the following keys:
  1. image for setting the author's image.
  2. name for setting the author name.
  3. date for setting the date posted.
It is a required prop.
routeStringjavascript:;Used to set the route of the DefaultBlogCard component.

Simple Blog Card

Pro
img-blur-shadow
Virtual Office

If you’re more passionate about founding a business than the business itself, you can fall into.

Props Information

NameTypeDefaultDescription
image*stringUsed to set the image of SimpleBlogCard.
title*StringUsed to set the title of the SimpleBlogCard component. It is a required prop.
description*StringUsed to set the description of the SimpleBlogCard component. It is a required prop.
action'color''label'Used to customize the button of the SimpleBlogCard component.

Transparent Blog Card

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 image of TransparentBlogCard.
title*StringUsed to set the title of the TransparentBlogCard component. It is a required prop.
description*StringUsed to set the description of the TransparentBlogCard component. It is a required prop.
action'route''color''label''javascript:;''success''Read more'Used to set the route, color, and label of the TransparentBlogCard component.

Raised Blog Card

Pro
img-blur-shadow

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 image of RaisedBlogCard.
title*StringUsed to set the title of the RaisedBlogCard component. It is a required prop.
description*StringUsed to set the description of the RaisedBlogCard component. It is a required prop.
action'color''label''route'Used to customize the button of the RaisedBlogCard component.

Centered Blog Card

Image alt
Get Insights On Search

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

Props Information

NameTypeDefaultDescription
image*stringUsed to set the image of CenteredBlogCard.
title*StringUsed to set the title of the CenteredBlogCard component. It is a required prop.
description*StringUsed to set the description of the CenteredBlogCard component. It is a required prop.
action'route''color''label''bg-gradient-success''Find Out More'Used to set the route, and button color, and label of the CenteredBlogCard component.

Background Blog Card

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 image of BackgroundBlogCard.
title*StringUsed to set the title of the BackgroundBlogCard component. It is a required prop.
description*StringUsed to set the description of the BackgroundBlogCard component. It is a required prop.
action'route''color''label''javascript''white''Read More'Used to set the route, color, and label of the BackgroundBlogCard component.