Section Variants

FAQ Variants

Accordion-based FAQ layouts for help centers, landing pages, and support documentation.

Variants

Variant 1 Simple Centered
FAQ

Frequently Asked Questions

Can't find what you're looking for? Contact our support team.

Vectra UI Kit is a free, open-source design system built on Bootstrap 5. It includes 30+ accessible components, dark & light themes, and ready-made page sections — all without any build tools required.

Yes. Vectra UI Kit is released under the MIT license, which means you can use it in personal and commercial projects at no cost. Attribution is appreciated but not required.

No. Vectra works entirely with plain HTML files and CDN links. Just open an HTML file in your browser or editor — no npm, no bundler, no configuration needed.

Add data-theme="dark" or data-theme="light" to the <html> element. The theme toggle button handles this automatically and persists the preference in localStorage.

Absolutely. Pull requests and issues are welcome on the GitHub repository. Please read the contributing guide before submitting a PR.
html
<div class="text-center mb-5">
  <span class="v-label">FAQ</span>
  <h2 class="mt-2 mb-3">Frequently Asked Questions</h2>
</div>
<div class="accordion" id="faq1" style="max-width:700px;margin:0 auto">
  <div class="accordion-item v-card border-0 mb-2">
    <h3 class="accordion-header">
      <button class="accordion-button fw-medium collapsed" type="button"
              data-bs-toggle="collapse" data-bs-target="#faq1-q1">
        Question text here
      </button>
    </h3>
    <div id="faq1-q1" class="accordion-collapse collapse">
      <div class="accordion-body v-text-muted">Answer text here.</div>
    </div>
  </div>
</div>
Variant 2 Two-column Split
Support

Got questions?
We've got answers.

Browse the most common questions, or reach out to our team directly.

Email support GitHub Discussions

Vectra ships with 30+ UI components including buttons, cards, modals, tables, badges, tooltips, progress bars, accordions, and more. New components are added with each release.

Yes. Vectra extends Bootstrap 5 without replacing it. You can layer Vectra on top of existing Bootstrap markup and adopt components incrementally.

Full documentation is available at the Docs page, covering installation, components, utilities, theming, and the JavaScript API.

Open an issue on the GitHub repository. Please include your browser version, a minimal reproduction, and a clear description of the expected vs. actual behaviour.
html
<div class="row g-5 align-items-start">
  <div class="col-lg-4">
    <span class="v-label">Support</span>
    <h2 class="mt-2 mb-3">Got questions?</h2>
    <p class="v-text-muted mb-4">Browse common questions or reach out.</p>
    <a href="#" class="v-btn v-btn-soft v-btn-sm">Email support</a>
  </div>
  <div class="col-lg-8">
    <div class="accordion" id="faq2">
      <!-- accordion items -->
    </div>
  </div>
</div>
Variant 3 Tabbed Categories
Browse by topic

FAQ by Category

Vectra supports all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.

Yes. Components follow WCAG 2.1 AA guidelines and include proper ARIA attributes, keyboard navigation, and sufficient colour contrast in both themes.

Vectra's CSS is framework-agnostic. You can use the utility and component classes in any framework. For interactive Bootstrap JS components, initialisation must be managed by your framework.

No. Vectra UI Kit is completely free and open source. There is no paid tier, no premium components, and no hidden costs.

No. The MIT license permits commercial use at no cost. You may use Vectra in client projects, SaaS products, and any commercial application without payment or attribution.

Yes. Under the MIT license, you are free to build and sell templates or products that use Vectra UI Kit components and styles.

Override the CSS custom properties in vectra.css or in your own stylesheet. Key variables include --v-accent, --v-bg, and --v-surface.

All interactive behaviour lives in assets/js/vectra.js. It handles theme toggling, copy buttons, scroll-spy, AOS initialisation, and password visibility toggles.

RTL support is on the roadmap. Bootstrap 5's built-in RTL support works for base elements, but Vectra-specific components may need manual adjustment.
html
<ul class="nav nav-tabs justify-content-center mb-4" id="faqTabs" role="tablist">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button">General</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-billing" type="button">Billing</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-technical" type="button">Technical</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab-general">
    <div class="accordion" id="faqGeneral">
      <!-- accordion items -->
    </div>
  </div>
</div>
Variant 4 FAQ + Contact CTA
Help center

Still have questions?

Copy the CDN links from the docs page into your HTML file, add data-theme="dark" to <html>, and drop in any component from the component catalog.

Vectra is actively maintained with regular releases adding new components, sections, bug fixes, and improvements. Follow the GitHub repository for release notifications.

Yes. Override the --v-font CSS variable or replace the Google Fonts link with your preferred typeface. Vectra uses Inter by default.

A Figma companion kit is planned. In the meantime, all components are coded with design tokens so they map cleanly to any Figma setup using CSS variables.

Can't find an answer?

Our team is here to help you get unblocked fast.

Email Support GitHub Discussions Read the Docs
html
<div class="row g-5">
  <div class="col-lg-7">
    <h2 class="mb-4">Still have questions?</h2>
    <div class="accordion" id="faq4">
      <!-- accordion items -->
    </div>
  </div>
  <div class="col-lg-5">
    <div class="v-card h-100 text-center d-flex flex-column align-items-center justify-content-center gap-3 p-5">
      <div class="v-icon-box"><i class="fa-solid fa-headset"></i></div>
      <h4>Can't find an answer?</h4>
      <a href="#" class="v-btn v-btn-primary w-100 justify-content-center">Email Support</a>
      <a href="#" class="v-btn v-btn-soft w-100 justify-content-center">GitHub Discussions</a>
    </div>
  </div>
</div>