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--primary — var(--primary) (purple)
• .ig-grid__tile--secondary — var(--secondary) (blue)
• .ig-grid__tile--accent — var(--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)