Card | Otis Kit PRO @ 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.

Default Blog Card

// Otis Kit PRO Examples import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard";

hub

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.
raised	bool	true	If `true` make the image raised add a colored shadow for it and make the author image circular.
action*	{ type: ["enternal", "internal"], route: string, }	false	Used to set the `DefaultBlogCard` route.

Simple Blog Card

// Otis Kit PRO 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.

Go Somewhere

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.

Transparent Blog Card

// Otis Kit PRO Examples import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard";

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 ...

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

Raised Blog Card

// Otis Kit PRO Examples import RaisedBlogCard from "examples/Cards/BlogCards/RaisedBlogCard";

Otis Kit PRO

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

Name	Type	Default	Description
image*	string		Used to set the `RaisedBlogCard` image. Its a required prop.
title*	string		Used to set the `RaisedBlogCard` title. Its a required prop.
description*	string		Used 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, }	false	Used to set the `RaisedBlogCard` route, it used to define the route and the action button styles. Its a required prop.

Centeredsed Blog Card

// Otis Kit PRO Examples import CenteredBlogCard from "examples/Cards/BlogCards/CenteredBlogCard";

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

Name	Type	Default	Description
image*	string		Used to set the `CenteredBlogCard` image. Its a required prop.
title*	string		Used to set the `CenteredBlogCard` title. Its a required prop.
description*	string		Used 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, }	false	Used to set the `CenteredBlogCard` route, it used to define the route and the action button styles. Its a required prop.

Backgroundsed Blog Card

// Otis Kit PRO 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.

Name	Type	Default	Description
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*	string		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, it used to define the route and the action button text. Its a required prop.