Vara Vara Vara

FAQ

<vara-faq> renders an accordion section. Pair it with <vara-faq-item> elements: only one item stays open at a time, and every item body can hold any content, from plain text to other components.

Usage

<vara-faq title="Frequently asked questions">
  <vara-faq-item id="plan" question="Is there a free plan?">
    Yes. The free plan covers a single project with the core features.
  </vara-faq-item>
  <vara-faq-item id="cancel" question="Can I cancel anytime?">
    You can cancel or downgrade from the billing settings.
  </vara-faq-item>
</vara-faq>

Preview

Frequently asked questions

A few common questions before you get started.

Yes. The free plan covers a single project with the core features.

You can cancel or downgrade from the billing settings.

Team pricing starts at ten seats and includes shared billing.

FAQ items

<vara-faq-item> is a single accordion entry. Give it a unique id and a question, then put any content in the body — paragraphs, lists, alerts, or other components.

<vara-faq-item id="returns" question="What is the return policy?">
  <vara-alert
    title="30-day returns"
    description="Unopened items can be returned within 30 days."
    color="info"
  />
</vara-faq-item>

Only one item inside the same <vara-faq> stays open at a time. Item questions render as level three headings, below the section title.

Props

<vara-faq>:

PropDefaultDescription
open_first"false"Open the first item when the page loads.
eyebrow, title, description""Section introduction.
heading_level"2"Section title level: 2 or 3.
background, container, classvariesSurface and layout customization.

<vara-faq-item>:

PropDefaultDescription
id""Unique accordion entry identifier. Required.
question""Question shown in the expandable trigger.