Support & FAQ
Support or FAQ page composed from expansion panels, alerts, breadcrumbs and contact actions.
Find answers
Use breadcrumbs for context, surface timely guidance in an alert and keep common answers scannable. Offer direct contact actions when self-service is not enough.
Billing and account help
Quick answers to the questions customers ask most often.
Before you contact support
Update the billing name, address and payment method from Workspace settings under Billing.
Open Billing history, choose an invoice and download its PDF from the detail view.
Workspace owners can manage invitations and access from the Team members page.
<nav aria-label="Support breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/support">Support</a></li>
<li class="breadcrumb-item is-active" aria-current="page">FAQ</li>
</ol>
</nav>
<div class="alert bg-primary">
<i class="icon icon-md alert-icon" aria-hidden="true"><!-- information icon --></i>
<div class="alert-content">
<p class="alert-title">Before you contact support</p>
<p class="alert-message">Check these answers for the fastest route.</p>
</div>
</div>
<div class="expansion-panel-container shadow-sm rounded mt-3">
<div class="expansion-panel is-open">
<button
class="expansion-panel-header"
id="billing-header"
type="button"
aria-expanded="true"
aria-controls="billing-content">
How do I update my billing details?
</button>
<div
class="expansion-panel-content"
id="billing-content"
role="region"
aria-labelledby="billing-header">
<div class="expansion-panel-inner">Update your details from Workspace settings.</div>
</div>
</div>
<div class="expansion-panel">
<button
class="expansion-panel-header"
id="invoices-header"
type="button"
aria-expanded="false"
aria-controls="invoices-content">
Where can I download invoices?
</button>
<div
class="expansion-panel-content"
id="invoices-content"
role="region"
aria-labelledby="invoices-header"
hidden>
<div class="expansion-panel-inner">Download invoice PDFs from Billing history.</div>
</div>
</div>
</div>
<aside class="card shadow-sm border-primary bg-primary bg-opacity-10 mt-3" aria-labelledby="contact-title">
<div class="card-body d-flex flex-column flex-md-row align-items-md-center gap-3">
<div class="flex-fill">
<h4 class="card-title mb-1" id="contact-title">Still need help?</h4>
<p class="card-subtitle mb-0">Contact our support team directly.</p>
</div>
<a class="btn btn-outline btn-secondary" href="mailto:support@example.com">Email support</a>
<button class="btn btn-solid btn-primary" type="button">Start live chat</button>
</div>
</aside>