Omnira Docs v1.0.0

Section reference › Content

FAQ "type": "faq"

Frequently asked questions as an accordion: click a question to open its answer. Centred layout, or split with the heading and buttons on the left.

Example of the faq section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "faq",
  "eyebrow": "FAQ",
  "title": "Questions, answered",
  "items": [
    {
      "q": "How long does delivery take?",
      "a": "Orders placed before 2 pm ship the same day. Most customers receive them within 2–3 working days."
    },
    {
      "q": "Can I return an item?",
      "a": "Yes. You have 30 days to return anything unused for a full refund. <a href=\"#\">Read our returns policy</a>."
    },
    {
      "q": "Do you ship internationally?",
      "a": "We ship to 28 countries in Europe and North America. Shipping costs are shown at checkout."
    },
    {
      "q": "How do I change my order?",
      "a": "Email us within one hour of ordering and we will update it before it is packed."
    }
  ]
}

Options#

OptionTypeDefaultDescription
layoutstringcenterLayout of heading and questions.
Values: center | split
eyebrowstring—Small label shown above the title.
titlestring—Section heading. Simple inline HTML such as <em> or <br> is allowed.
textstring—Short intro paragraph under the title.
headAlignstringcentercenter layout only: alignment of the heading. The split layout is always left-aligned.
Values: center | start
itemsarray—Questions and answers.
buttonsarray—split layout only: buttons under the heading (e.g. "Contact support").

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in items#

OptionTypeDefaultDescription
qstring—The question.
astring—The answer; inline HTML such as links is allowed.

Fields of each entry in buttons#

OptionTypeDefaultDescription
labelstring—Button text. A button without a label is not shown.
hrefstring—Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
stylestringprimaryButton look.
Values: primary | outline | light | dark | accent | link
iconstring—Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
videostring—YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Variants and styles#

center#

Heading centred above a single column of questions.

JSON
{
  "type": "faq",
  "eyebrow": "FAQ",
  "title": "Questions, answered",
  "items": [
    {
      "q": "How long does delivery take?",
      "a": "Orders placed before 2 pm ship the same day. Most customers receive them within 2–3 working days."
    },
    {
      "q": "Can I return an item?",
      "a": "Yes. You have 30 days to return anything unused for a full refund. <a href=\"#\">Read our returns policy</a>."
    },
    {
      "q": "Do you ship internationally?",
      "a": "We ship to 28 countries in Europe and North America. Shipping costs are shown at checkout."
    },
    {
      "q": "How do I change my order?",
      "a": "Email us within one hour of ordering and we will update it before it is packed."
    }
  ]
}

split#

Heading, text and buttons on the left; questions on the right.

JSON
{
  "type": "faq",
  "layout": "split",
  "tone": "alt",
  "eyebrow": "Help centre",
  "title": "Still have questions?",
  "text": "Our team answers every message within a few hours.",
  "buttons": [
    {
      "label": "Contact support",
      "href": "contact.html",
      "style": "primary",
      "icon": "chat-dots"
    }
  ],
  "items": [
    {
      "q": "How long does delivery take?",
      "a": "Orders placed before 2 pm ship the same day. Most customers receive them within 2–3 working days."
    },
    {
      "q": "Can I return an item?",
      "a": "Yes. You have 30 days to return anything unused for a full refund. <a href=\"#\">Read our returns policy</a>."
    },
    {
      "q": "Do you ship internationally?",
      "a": "We ship to 28 countries in Europe and North America. Shipping costs are shown at checkout."
    },
    {
      "q": "How do I change my order?",
      "a": "Email us within one hour of ordering and we will update it before it is packed."
    }
  ]
}

Tips#

  • The first question is open by default; opening another closes the rest.
  • Buttons are only shown in the split layout.
  • Five to eight questions per section is plenty; split long lists into topics.

Where it's used#

Open these pages in template/ to see it working:

  • Creative Agency: template/creative-agency/faq.html (source src/demos/creative-agency/pages/faq.json)
  • Real Estate: template/real-estate/faq.html (source src/demos/real-estate/pages/faq.json)
  • Corporate: template/corporate/engagements.html (source src/demos/corporate/pages/engagements.json)
  • Finance: template/finance/faq.html (source src/demos/finance/pages/faq.json)
  • Law Firm: template/law-firm/consultation.html (source src/demos/law-firm/pages/consultation.json)
  • SaaS Product: template/saas/faq.html (source src/demos/saas/pages/faq.json)
  • Mobile App: template/mobile-app/help-getting-started.html (source src/demos/mobile-app/pages/help-topic.json)
  • Tech Conference: template/conference/faq.html (source src/demos/conference/pages/faq.json)
  • Online Academy: template/education/admissions.html (source src/demos/education/pages/admissions.json)
  • Restaurant: template/restaurant/faq.html (source src/demos/restaurant/pages/faq.json)
  • Coffee Shop: template/cafe/faq.html (source src/demos/cafe/pages/faq.json)
  • Hotel & Resort: template/hotel/faq.html (source src/demos/hotel/pages/faq.json)
  • Wedding: template/wedding/faq.html (source src/demos/wedding/pages/faq.json)
  • Gym & Fitness: template/gym/faq.html (source src/demos/gym/pages/faq.json)
  • Yoga Studio: template/yoga/beginners.html (source src/demos/yoga/pages/beginners.json)
  • Day Spa & Salon: template/spa/faq.html (source src/demos/spa/pages/faq.json)
  • Medical Clinic: template/medical/index.html (source src/demos/medical/pages/index.json)
  • Dental Clinic: template/dental/faq.html (source src/demos/dental/pages/faq.json)
  • Pet Care: template/pet-care/boarding.html (source src/demos/pet-care/pages/boarding.json)
  • Construction: template/construction/faq.html (source src/demos/construction/pages/faq.json)
  • Car Dealer: template/car-dealer/faq.html (source src/demos/car-dealer/pages/faq.json)
  • Travel Agency: template/travel/faq.html (source src/demos/travel/pages/faq.json)
  • Photographer: template/photography/faq.html (source src/demos/photography/pages/faq.json)
  • Architecture Studio: template/architecture/faq.html (source src/demos/architecture/pages/faq.json)
  • Interior Design: template/interior-design/faq.html (source src/demos/interior-design/pages/faq.json)
  • Portfolio: template/portfolio/faq.html (source src/demos/portfolio/pages/faq.json)
  • Music Festival: template/music-festival/faq.html (source src/demos/music-festival/pages/faq.json)
  • Fashion Store: template/fashion-store/contact.html (source src/demos/fashion-store/pages/contact.json)
  • Charity: template/charity/donate.html (source src/demos/charity/pages/donate.json)
  • Logistics: template/logistics/faq.html (source src/demos/logistics/pages/faq.json)