About this block
A row of three feature cards that fade up into place, one after another, as they scroll into view. Each card has an icon, a short heading, and a sentence of detail. The small delays between cards draw the eye across the row.
When to use it
- To show three key features or benefits on a product or service page.
- As a "why choose us" row under a hero.
- When a plain feature list feels flat and you want a little motion.
What's inside
- Three cards on your theme's light surface colour with rounded corners.
- Each card has an icon in a primary-coloured square, an h3 heading, and a short description.
- Each card uses the fade-up entrance animation, with the second and third cards starting 0.1s and 0.2s later.
- The animation plays when the cards scroll into view, not on page load.
- The cards stack on phones and sit in one row from 768px wide, sharing the width equally.
How to customize it
- Swap each icon in the Icon settings for one that matches your feature.
- Pick a different entrance in the animation settings, such as fade in, scale up, or blur in, and set it on all three cards.
- Change the delay on the second and third cards to make the stagger slower or quicker.
- Keep the headings to two or three words and the descriptions to one sentence, so the cards stay the same height.
Questions
- Will the animation slow down my page?
- No. The fade-up is a CSS animation, so it's light, and the content is in the page from the start.
- Can I add a fourth card?
- Yes. Duplicate a card and give it a slightly longer delay. Four cards share the row equally from tablet width.
- Does the animation replay every time I scroll past?
- No. Each card animates once, the first time it scrolls into view, and then stays in place.