Aisol Services Wall

Aisol Services Wall is a services section that runs on your CMS collection, not on a copy of your content.

Every item is reachable by keyboard and announced properly by a screen reader — nothing is hidden behind hover.

Motion respects prefers-reduced-motion, and the Framer canvas renders exactly what the published page renders.

- Three layouts in one component. Split (media and text alternating sides), cards, or compact rows. Switching is a control, not a different component.

- Reveal without measuring. Items appear as they enter the viewport using an observer on this component's own items — no scroll listeners, no element measuring, nothing read from the page around it.

- Reduced motion means no observer at all. Visitors who ask for less motion get the plain section immediately, with none of the machinery running.

- No image? Still finished. An item falls back to an emoji icon, then to a numbered badge — no empty grey panels while you wait for artwork.

- Bullets, a small label, a link per item, and a heading level you choose. Media ratio is CSS aspect-ratio, so nothing jumps as images load.

- Columns step down on their own: three, two, one. The breakpoints live in CSS inside the component, so the canvas matches the live page.

What you control

• Layout: split (media and text alternating), cards, or compact rows; columns 1–4 with two step-down breakpoints

• Media ratio, reveal on scroll or off, title level, label and bullets on or off

• Per service: title, blurb, label, icon, image and alt text, bullets, link and link text

• Service cards slots — bind a CMS collection, slot 1 replaces service 1

• Gap, radius, text size, padding; accent, text, muted, media fill and border colours; empty-state text

More components at Aisol Studio → https://thistle-timing-694660.framer.app/