FAQs
Accordion, two-column, tabbed and search FAQ sections.
Basic FAQ Accordion
Click "Forgot password" on the login page and follow the email link.
Yes, you can cancel from your account settings with no penalty.
We offer a 14-day money-back guarantee on all paid plans.
<div class="accordion" id="faqBasic">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq-1">
How do I reset my password?
</button>
</h2>
<div id="faq-1" class="accordion-collapse collapse show" data-bs-parent="#faqBasic">
<div class="accordion-body">...</div>
</div>
</div>
</div>
Two-Column FAQ Grid
What payment methods do you accept?
We accept all major credit cards, PayPal, and bank transfers.
Is there a free trial?
Yes — 14 days free with full access, no credit card required.
Can I upgrade my plan?
Anytime. Changes take effect immediately and we prorate the difference.
How do I contact support?
Email [email protected] or use the live chat in your dashboard.
<div class="uk-faq-grid">
<div class="uk-faq-card">
<div class="uk-faq-q">What payment methods do you accept?</div>
<div class="uk-faq-a">We accept all major credit cards...</div>
</div>
</div>
<style>
.uk-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.uk-faq-card {
padding: 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
}
.uk-faq-q {
font-weight: 700;
color: #0b1b2f;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.uk-faq-a {
font-size: 0.85rem;
color: #64748b;
line-height: 1.6;
}
</style>
FAQ with Icons
<div class="uk-faq-icon-item">
<div class="uk-faq-icon"><i class="fas fa-rocket"></i></div>
<div>
<div class="uk-faq-q">How fast can I get started?</div>
<div class="uk-faq-a">Setup takes under 5 minutes.</div>
</div>
</div>
<style>
.uk-faq-icon-list { display: flex; flex-direction: column; gap: 1rem; }
.uk-faq-icon-item {
display: flex;
gap: 1rem;
padding: 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
}
.uk-faq-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1rem;
}
</style>
FAQ with Search
<div class="uk-faq-search">
<i class="fas fa-magnifying-glass"></i>
<input type="text" placeholder="Search FAQ..." class="uk-faq-search-input">
</div>
<style>
.uk-faq-search {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.15rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
transition: all 0.15s;
}
.uk-faq-search:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-faq-search i { color: #94a3b8; font-size: 0.9rem; }
.uk-faq-search-input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: 0.88rem;
color: #0b1b2f;
}
</style>
Tabbed FAQs
General questions
Common setup and usage questions.
Billing questions
Payment, invoices, refunds.
Security questions
Encryption, compliance, privacy.
<ul class="nav nav-pills justify-content-center mb-3">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#faq-t1">General</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#faq-t2">Billing</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="faq-t1">...</div>
<div class="tab-pane fade" id="faq-t2">...</div>
</div>
FAQ with Contact CTA
Still have questions?
Our team is here to help you 24/7.
<div class="uk-faq-card">
<div class="uk-faq-q">Still have questions?</div>
<div class="uk-faq-a">Our team is here to help you 24/7.</div>
</div>
<div style="margin-top:1rem;text-align:center;">
<a href="mailto:[email protected]" style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1.5rem;background:#1e3a8a;color:#fff;border-radius:0.5rem;font-weight:700;text-decoration:none;font-size:0.88rem;">
<i class="fas fa-envelope"></i> Contact Support
</a>
</div>