Skip to main content
The FAQ tile section creates an interactive, visually-engaging FAQ experience with a central image and expandable content blocks positioned around it. This page-template-only section provides a unique alternative to traditional accordion-style FAQs, offering a more visual and spatially interesting way to present frequently asked questions. Perfect for FAQ pages where you want to break from standard list layouts.

​
What this section controls

This section controls visual FAQ displays with the following capabilities:
  • Central featured image as focal point
  • Multiple expandable content blocks positioned around image
  • Section title with customizable size (XS to XL)
  • Optional call-to-action button with three style options
  • Three width options (Narrow, Page width, Fluid)
  • Separate desktop and mobile spacing controls
  • Color scheme selection
  • Page template only (not available on homepage)

​
Section settings

Add the main heading displayed with the FAQ tile. Supports rich text formatting for bold, italic, and links. Configure the heading size from XS to XL (default: S).
Select the color scheme for the FAQ tile section (default: scheme-1). This controls background colors, text colors, and overall visual styling.
Add an optional button for additional help or escalation:Button text — The button label (default: “Contact Us”). Leave empty to hide the button.Button URL — Destination link for the button (default: /)Button style — Choose the visual appearance:
  • Filled (default) — Solid background button
  • Outlined — Border-only button
  • Default — Text-style link button
Choose the container width for the FAQ tile:
  • Narrow — Compact width for focused content
  • Page width (default) — Standard container width
  • Fluid — Wider, edge-to-edge within padding
Control vertical spacing with separate settings for desktop and mobile:Spacing top — Top spacing for desktop (None, S, M, L, XL, default: M)Spacing bottom — Bottom spacing for desktop (None, S, M, L, XL, default: M)Spacing top (Mobile) — Independent top spacing for mobile devices (default: M)Spacing bottom (Mobile) — Independent bottom spacing for mobile devices (default: M)
Add decorative borders to the section:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Block: Content

Create individual FAQ items with expandable content.
Add the question or topic heading for this FAQ item. Supports rich text formatting.
Control the size of the individual FAQ heading:
  • XS, S, M (default), L, XL
This is separate from the section title size, allowing visual hierarchy.
Add the answer or detailed explanation for this FAQ item. Supports rich text formatting including lists, bold, italic, and links.

​
Default configuration

The section includes a basic preset with the heading “Faq Tile Heading” and color scheme-5. Add Content blocks to populate with FAQ items.

​
Best practices

Visual branding

Use the featured image strategically to reinforce your brand identity or visually represent the FAQ topic area.

Concise questions

Keep FAQ titles brief and question-focused (5-10 words) so users can quickly scan for their specific concern.

Comprehensive answers

Provide complete, helpful answers in the content field. Include links to related pages or resources when appropriate.

Logical organization

Order FAQ blocks by importance or frequency. Place the most common questions first for quick access.

Contact escalation

Use the call-to-action button to provide a contact option for questions not covered in the FAQs.

Mobile spacing

Utilize separate mobile spacing controls to optimize vertical rhythm on smaller screens where space is more constrained.

​
Use cases

  • Product information pages — Answer common product questions with visual appeal
  • Store policy pages — Explain shipping, returns, and other policies in an engaging format
  • Support pages — Create self-service help resources with branded visual identity
  • About/Company pages — Address frequently asked questions about your business
  • Service pages — Explain service details, processes, or requirements
  • Landing pages — Provide quick answers to objections or common concerns
  • Educational content — Create topic-focused FAQ sections with relevant imagery

Accordions

Traditional accordion-style FAQ section with expandable topics