...

We want to showcase all
the rich blog post options.

How you use Landkit's blog cards is up to you! Our design begins with atomic elements which are easily combined to create rich blog post components.

Horizontal articles

These span the grid's entire width with several options.

Featured

Photo on Right.

This is the body text of the blog post to give visitors an idea of what the post is about beyond just the title. It can be a long snippet, a short snippet, whatever you prefer the size of card and description to be.

...
Ab Hadley

Featured

Photo on Left.

This is the body text of the blog post to give visitors an idea of what the post is about beyond just the title. It can be a long snippet, a short snippet, whatever you prefer the size of card and description to be.

...
Adolfo Hess

Background Photo + 80% Dark Overlay.

It's easy to add a background image for the entire card, plus make text more legible by adding an overlay across the background with simple utility classes. These are all generated from the theme's variables!

...
Ab Hadley

Background Photo + Gradient Overlay.

This blog card example shows a background image, but instead of an even wash across the entire background, it's a gradient from right to left controlled by another simple utility class.

...
Adolfo Hess

Vertical articles

These can be split into smaller grid sizes, though we recommend half or thirds

Featured ...

Photo on Top + 50% Width.

The markup for vertical articles is the same for a half and thirds split, it's controlled with columns.

...
Ab Hadley

Featured

Background Photo + Primary Overlay

Background photos are super easy to add and overlays can be added with utilities for legibility.

...
Adolfo Hess

Background Photo + 30% Dark Overlay

A much lighter overlay work on darker photos, and is easy to control with utilities.

...
Ab Hadley

...

Photo on Top + 33.3% Width.

The markup for this card is identical to that for the 50% Width article above.

...
Adolfo Hess

All Text Card.

Notice how this card stays the same height as its siblings and this text is vertically centered (at desktop sizes). This keeps layouts looking consistent no matter what type of content occupies each sibling card.

...
Ab Hadley

Get our stories delivered

From us to your inbox weekly.