All Patterns

Integrations Grid

Integrations Grid

A full-width CSS grid of rounded tiles with scattered brand icons, a centered headline + CTA, and edge fade effect.

Headline & CTA

  • Headline is an h1 inside .ig-grid__center (grid rows 3-4, cols 4-9 on desktop)
  • CTA uses .btn .btn--primary — text color is inherited from the button class (white on purple). Don't add a color override to .ig-grid__cta
  • Center content has a frosted background (oklch with 0.9 opacity) on desktop/tablet, removed on mobile

Icons

  • Requires Font Awesome 6 (loaded via mu-plugins/font-awesome-enqueue.php on pattern pages)
  • Icons use fa-brands fa-{name} classes — swap by changing the class on the <i> element
  • Browse available brand icons: Font Awesome Brands

Tile Color Variants

  • .ig-grid__tile--primaryvar(--primary) (purple)
  • .ig-grid__tile--secondaryvar(--secondary) (blue)
  • .ig-grid__tile--accentvar(--accent) (coral/orange)
  • .ig-grid__tile--neutral — white bg, dark icon color
  • All icon variants have min-width: 3rem to stay readable at small sizes

Hidden Tiles (Asymmetry)

  • 10 gray tiles use .ig-grid__tile--hidden (visibility: hidden) to create organic gaps
  • Hidden tiles still occupy grid space — they're invisible, not removed
  • Add/remove the --hidden class on any empty tile to change which ones are invisible

Edge Fade

  • CSS ::after pseudo-element on .ig-grid with 4 linear gradients (white → transparent)
  • Desktop: 35% sides, 25% top, 40% bottom
  • Mobile: reduced to 20% sides, 15% top, 25% bottom
  • Uses !important to override the pattern-library ruler-hiding rule

Responsive Grid

  • Desktop: 12 columns, 6 rows (60 tiles)
  • Tablet (≤991px): 8 columns, content spans full width, hides tiles after nth-child(34)
  • Mobile (≤767px): 5 columns, 1 row above + 1 row below content, hides tiles after nth-child(12)