> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# FAQ tile

> Interactive visual FAQ section with central image and expandable content blocks

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

<AccordionGroup>
  <Accordion title="Section title">
    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).
  </Accordion>

  <Accordion title="Featured image">
    Upload a central image that appears prominently in the FAQ tile layout. This image serves as the visual focal point of the section, making FAQs more engaging and branded.
  </Accordion>

  <Accordion title="Color scheme">
    Select the color scheme for the FAQ tile section (default: scheme-1). This controls background colors, text colors, and overall visual styling.
  </Accordion>

  <Accordion title="Call-to-action button">
    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
  </Accordion>

  <Accordion title="Section width">
    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
  </Accordion>

  <Accordion title="Spacing">
    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)
  </Accordion>

  <Accordion title="Section border">
    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
  </Accordion>
</AccordionGroup>

## Block: Content

Create individual FAQ items with expandable content.

<AccordionGroup>
  <Accordion title="FAQ title">
    Add the question or topic heading for this FAQ item. Supports rich text formatting.
  </Accordion>

  <Accordion title="Heading size">
    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.
  </Accordion>

  <Accordion title="Content">
    Add the answer or detailed explanation for this FAQ item. Supports rich text formatting including lists, bold, italic, and links.
  </Accordion>
</AccordionGroup>

## 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

<CardGroup cols={2}>
  <Card title="Visual branding" icon="image">
    Use the featured image strategically to reinforce your brand identity or visually represent the FAQ topic area.
  </Card>

  <Card title="Concise questions" icon="heading">
    Keep FAQ titles brief and question-focused (5-10 words) so users can quickly scan for their specific concern.
  </Card>

  <Card title="Comprehensive answers" icon="align-left">
    Provide complete, helpful answers in the content field. Include links to related pages or resources when appropriate.
  </Card>

  <Card title="Logical organization" icon="sort">
    Order FAQ blocks by importance or frequency. Place the most common questions first for quick access.
  </Card>

  <Card title="Contact escalation" icon="phone">
    Use the call-to-action button to provide a contact option for questions not covered in the FAQs.
  </Card>

  <Card title="Mobile spacing" icon="mobile">
    Utilize separate mobile spacing controls to optimize vertical rhythm on smaller screens where space is more constrained.
  </Card>
</CardGroup>

## 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

## Related sections

<Card title="Accordions" icon="bars-staggered" href="/themes/sahara/sections/accordions">
  Traditional accordion-style FAQ section with expandable topics
</Card>