One big image, one focused message

col-lg-4 carries the pitch, col-lg-8 carries a single large photo — no grid, no cards, just a wide image doing the talking. Swap the copy and the picture and this pattern works as a feature callout, a case-study lead-in, or, like right here, an explanation of itself.

Concert crowd lit by a single spotlight beam

Clip-path hexagons, not images

Each .icon-badge is a plain <span> clipped into a hexagon with CSS clip-path: polygon(...) — no SVG file, no icon sprite sheet, just a colored box and a Font Awesome glyph centered inside it.

Three columns, two dividers

row-cols-md-3 lays out three even columns; a 1px left border on every column but the first is what turns into the vertical rules you see splitting them apart on desktop.

Dividers drop, spacing takes over

Below the md breakpoint the divider becomes a top border instead of a left one — row-cols-1 stacks the three columns and the rule reads top-to-bottom instead of side-to-side.

Six cards, one flex trick

Close-up of an electric guitar's pickup and strings

Equal-height cards

display: flex; flex-direction: column on .post-card, then flex-grow: 1 on the body — six cards in a row-cols grid end up the same height no matter how long each excerpt runs.

More
Dancer mid-spin at an outdoor zumba class

The excerpt grows, the button doesn't

flex-grow: 1 on the paragraph pushes the "More" button to the bottom of every card, even the short ones — the button row never floats mid-card.

More
Skateboarder mid-air over a ramp

One breakpoint, three densities

row-cols-1 row-cols-lg-2 row-cols-xl-3 — one card per row on phones, two on laptops, three on wide desktops, the same six <article>s throughout.

More
Dancer seated on stone steps in a quiet moment

Just a border, no shadow

.post-card-image and .post-card-body live inside a plain 1px border — no box-shadow, no rounded corners, the same flat, square language the buttons and badges use.

More
Dramatically lit black-and-white portrait

Image first, no cropping trick

Each thumbnail is a plain <img class="w-100"> — width scales to the column, height follows the photo's own aspect ratio, nothing is force-cropped with object-fit.

More
Artistic double portrait in black and white

Six articles, one alt section

The whole grid sits inside .page-section-alt — the same off-white background band the contact section below uses, so the two sections pair visually without a hard edge between them.

More

Send us a message

Other ways to reach us

All Templates