How do I get started?

Sign up and follow the quick onboarding guide to set up your first project.

What browsers are supported?

Check the support policy for the currently tested browser versions.

Review the security documentation for current safeguards and data-handling details.

What sign-in security options are available?

Available sign-in security options are listed in account settings.

ASSET_SPEC // CATEGORIZED_FAQ

Categorized FAQFAQ template

Organize large sets of questions into logical groups for better discoverability.

Live_Preview_Environment

Frequently Asked Questions

Everything you need to know about our platform.

General

How do I get started?: Sign up and follow the quick onboarding guide to set up your first project.
What browsers are supported?: Check the support policy for the currently tested browser versions.

Security

Is my data safe?: Review the security documentation for current safeguards and data-handling details.
What sign-in security options are available?: Available sign-in security options are listed in account settings.

When_to_Use

Choose the categorized layout when your FAQ spans several topics with fifteen or more questions. Grouping entries into categories with a definition list helps users jump to the right section instead of scrolling through one long list.

Source_Manifest

Source_Inspector // HTML

<section class="faq-container" style="max-width: 64rem; margin: 0 auto; padding: 2rem;">
  <h2 style="font-size: 1.875rem; font-weight: 700; margin-bottom: 2rem;">Support Center</h2>
  
  <div class="category-section" style="margin-bottom: 3rem;">
    <h3 style="font-size: 1.25rem; font-weight: 600; color: #2563eb; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem;">General</h3>
    <dl>
      <dt style="font-weight: 500; margin-top: 1rem;">Is there a free trial?</dt>
      <dd style="color: #4b5563; margin-left: 0; margin-top: 0.5rem;">Trial availability and eligibility are listed on the current pricing page.</dd>
    </dl>
  </div>

  <div class="category-section">
    <h3 style="font-size: 1.25rem; font-weight: 600; color: #2563eb; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem;">Billing</h3>
    <dl>
      <dt style="font-weight: 500; margin-top: 1rem;">Can I change my plan later?</dt>
      <dd style="color: #4b5563; margin-left: 0; margin-top: 0.5rem;">Available plan changes and their effective dates are shown in billing settings.</dd>
    </dl>
  </div>
</section>

READ_ONLY

<section class="mx-auto max-w-5xl px-4 py-16" aria-labelledby="faq-categorized-title">
  <div class="mb-12 text-center">
    <h2 id="faq-categorized-title" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
      Support Center
    </h2>
    <p class="mt-4 text-lg text-gray-600">Everything you need to know about our platform.</p>
  </div>

  <div class="grid gap-12 md:grid-cols-2">
    <div>
      <h3 class="text-xl font-bold text-gray-900 border-l-4 border-blue-600 pl-4 mb-6">General</h3>
      <dl class="space-y-8">
        <div>
          <dt class="text-lg font-medium text-gray-900">Is there a free trial?</dt>
          <dd class="mt-2 text-gray-600">Trial availability and eligibility are listed on the current pricing page.</dd>
        </div>
      </dl>
    </div>
    
    <div>
      <h3 class="text-xl font-bold text-gray-900 border-l-4 border-blue-600 pl-4 mb-6">Billing</h3>
      <dl class="space-y-8">
        <div>
          <dt class="text-lg font-medium text-gray-900">Can I change my plan later?</dt>
          <dd class="mt-2 text-gray-600">Available plan changes and their effective dates are shown in billing settings.</dd>
        </div>
      </dl>
    </div>
  </div>
</section>

READ_ONLY

interface Category {
  title: string;
  items: Array<{ question: string; answer: string }>;
}

const defaultCategories: Category[] = [
  {
    title: 'General',
    items: [{ question: 'Is there a free trial?', answer: 'Trial availability and eligibility are listed on the current pricing page.' }]
  },
  {
    title: 'Billing',
    items: [{ question: 'Can I change my plan later?', answer: 'Available plan changes and their effective dates are shown in billing settings.' }]
  }
];

export function CategorizedFaq({ categories = defaultCategories }: { categories?: Category[] }) {
  return (
    <div className="bg-white px-6 py-24 sm:py-32 lg:px-8">
      <div className="mx-auto max-w-4xl divide-y divide-gray-900/10">
        <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">
          Support Center
        </h2>
        <dl className="mt-10 space-y-16 divide-y divide-gray-900/10">
          {categories.map((category) => (
            <div key={category.title} className="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
              <dt className="text-base font-semibold leading-7 text-gray-900 lg:col-span-5">
                {category.title}
              </dt>
              <dd className="mt-4 lg:col-span-7 lg:mt-0">
                <div className="space-y-10">
                  {category.items.map((item) => (
                    <div key={item.question}>
                      <dt className="text-base font-semibold leading-7 text-gray-900">
                        {item.question}
                      </dt>
                      <dd className="mt-2 text-base leading-7 text-gray-600">
                        {item.answer}
                      </dd>
                    </div>
                  ))}
                </div>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </div>
  );
}

READ_ONLY