FAQ sections provide structured, easy-to-scan layouts that surface answers to common issues, clarify product behavior, and reduce the need for support.

Expandable single column

Frequently Asked Questions

How do you make holy water?

What's the best thing about Switzerland?

What do you call someone with no body and no nose?

Why do you never see elephants hiding in trees?

::accordion-group
---
gap: "32px"
panel-props:
  border: "none"
  header-background: "none"
  header-padding: "32px 0 0"
  content-padding: "4px 0 0"
  header-font-size: "clamp(16px, 3.4vw, 20px)"
  header-line-height: "clamp(20px, 3.4vw, 24px)"
  header-font-weight: 700
  content-font-size: "clamp(14px, 3.4vw, 16px)"
styles: |
  .accordion-panel + .accordion-panel {
    border-top: 1px solid #E0E4EA;
  }

  strong {
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: clamp(34px, 3.4vw, 46px);
  }
---
**Frequently Asked Questions**

  :::accordion-panel
  ---
  header: "How do you make holy water?"
  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
  ---
  :::

  :::accordion-panel
  ---
  header: "What's the best thing about Switzerland?"
  content: "I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
  ---
  :::

  :::accordion-panel
  ---
  header: "What do you call someone with no body and no nose?"
  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
  ---
  :::

  :::accordion-panel
  ---
  header: "Why do you never see elephants hiding in trees?"
  content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
  ---
  :::
::

Basic single column

Frequently Asked Questions

Have a different question and can’t find the answer you’re looking for? Reach out to our support team by sending us an email and we’ll get back to you as soon as we can.

How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

::page-container
---
background-color: "#F9FAFB"
padding: "clamp(60px, 8vw, 120px) clamp(10px, 4vw, 60px)"
---
  :::page-section
  ---
  padding: "clamp(20px, 4vw, 56px)"
  background: "#ffffff"
  border-radius: "16px"
  full-width: true
  title:
    font-size: "clamp(24px, 3.4vw, 32px)"
  styles: |
    box-shadow: 0px 4px 20px 0px #00000014;

    h2 + p {
      margin-top: 16px;
      padding-bottom: 56px;
      font-size: clamp(18px, 3.4vw, 24px);
      border-bottom: 1px solid #E0E4EA;
    }
  ---
  #title
  Frequently Asked Questions

  #default
  Have a different question and can’t find the answer you’re looking for? Reach out to our support team by sending us an email and we’ll get back to you as soon as we can.

    ::page-container
    ---
    tag: "ul"
    padding: "56px 0 0"
    styles: |
      p + p {
        border-bottom: none;
        margin-top: 4px;
      }

      li strong {
        font-size: clamp(16px, 3.4vw, 20px);
        line-height: clamp(20px, 3.4vw, 24px);
      }
    ---
      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "0 0 32px"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "0 0 32px"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "0 0 32px"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::
    ::
  :::
::

Basic split column

Frequently Asked Questions

How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

::page-section
---
background-color: "#F9FAFB"
padding: "clamp(10px, 4vw, 60px) clamp(60px, 8vw, 120px)"
full-width: true
---
  :::multi-column
  ---
  columns-breakpoints:
    mobile: 1
    phablet: 1
    tablet: 2
    laptop: 2
    desktop: 2
  ---
    ::::page-container
    ---
    color: "#0044F4"
    font-size: "clamp(36px, 3.4vw, 56px)"
    line-height: "clamp(40px, 3.4vw, 60px)"
    font-weight: "700"
    ---
    Frequently Asked Questions
    ::::

    ::::page-container
    ---
    tag: "ul"
    styles: |
      p + p {
        border-bottom: none;
        margin-top: 4px;
      }

      li strong {
        font-size: clamp(16px, 3.4vw, 20px);
        line-height: clamp(20px, 3.4vw, 24px);
      }

      li + li {
        border-top: 1px solid #E0E4EA;
      }
    ---
      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "0 0 32px"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "32px 0"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "32px 0"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::

      :::page-container
      ---
      tag: "li"
      font-size: "clamp(12px, 3.4vw, 14px)"
      padding: "32px 0 0"
      ---
      **How do you make holy water?**

      You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
      :::
    ::::
  :::
::