Search blocks by description or jump to a page.
An FAQ section with a supporting illustration beside the question list. Adds visual context and warmth to a help area while answers stay easy to read.
Image Illustrated opens with a centered heading and subtitle, then presents five questions as alternating two-column rows. Each row pairs a rounded image on one side with the question title, an answer paragraph, and a small "Learn more" button on the other. The image and text sides swap left and right on every other row so the section keeps visual movement as a reader scrolls. Below the illustrated rows sits a tinted panel labeled "More Questions" that holds a compact accordion of three additional items. A brief closing call-to-action with a "Contact Support" button rounds out the section.
Every illustrated question is independent. You can replace any image, rewrite the question and answer copy, or change the button destination without affecting the other rows. The accordion panel at the bottom accepts any number of items, and the closing call-to-action copy and button label are plain text you can update freely.
This layout works well when each answer benefits from visual context, a screenshot of a feature, a photo of a learning environment, or a diagram that reinforces the text. For an online education platform it is a natural fit on a course overview or help page, where showing a real classroom or interface alongside a question about how a lesson works builds more confidence than text alone. The alternating image rhythm also keeps a long FAQ from feeling monotonous, making it a better choice than a plain accordion when the section needs to carry visual interest midpage.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each illustrated row is a slot for a question that benefits from a matching visual. A few ways to fill those slots for an education product:
Tip: keep each answer to two or three sentences so the text column stays roughly the same height as the image beside it.