Integration 9 - Integration card grid

Basic

A responsive grid of integration cards with icons in muted containers, titles, and descriptions scaling from one to four columns.

Vue
Shadcn Integration 9 block

Component Data

  • ID:integration9
  • Access:basic
  • Created:Apr 29, 2025
  • Type:block

Integration 9 block design & features

Integration9 is a section with a left-aligned heading and a grid of eight integration cards arranged up to four columns. Each card contains an icon in a muted rounded container at the top, followed by a title and a short description. The heading and grid sit within a standard container.

Cards have rounded corners, a light border, subtle shadow, and a hover shadow transition. Icons sit inside a small square with a muted background. Titles use base-size medium weight and descriptions use extra-small muted text. Cards have a minimum height ensuring consistent sizing across the grid. Spacing between cards is uniform.

The style is clean and utilitarian with no decorative elements beyond the card borders and shadow treatment. The left-aligned heading breaks from a centered pattern, giving it more of an application-page feel. Low to moderate complexity with a single repeating card layout.

On mobile, the grid collapses from four columns to two and then to a single column at the smallest breakpoint.