Services 14 - Split layout with square image cards

Pro

A two-column split with heading, description, and button on the left, and four square image cards in a 2x2 grid on the right.

Vue
Shadcn Services 14 block

Component Data

  • ID:services14
  • Access:pro
  • Created:Jul 1, 2025
  • Type:block

Services 14 block design & features

A two-column grid divides the section into an intro area and a card grid. The left column holds a large heading, a short paragraph, and a shadcn/ui outline Button with an arrow icon, vertically distributed with space between. The right column arranges four square-aspect Card components in a 2x2 grid, each filled with a cover image and a white title overlaid at the bottom via CardContent. An arrow icon appears in the top-right corner of every card.

Framer Motion applies an opacity fade on hover to each card link, keeping the interaction lightweight. Rounded corners and tight gap spacing give the card grid a compact, tiled appearance. No borders or shadows are applied to the cards themselves.

The design is minimal and image-driven, with no background treatment on the section. The equal square proportions create a uniform, gallery-like rhythm that balances against the text-heavy left column.

On smaller viewports the split collapses so the intro stacks above the cards, and the 2x2 grid is preserved down to small breakpoints.