Help center

How can we help?

Getting started
Set up your account, workspace and first project.
18 articles
Teams and roles
Invite people, manage seats and permissions.
12 articles
Security
Two-factor login, SSO and audit logs.
9 articles
API and webhooks
Keys, rate limits and event payloads.
24 articles

Frequently asked questions

How do I change my plan?

Go to Settings, then Billing, and choose Change plan. Upgrades apply right away; downgrades apply at the end of the billing period.

Can I export my data?

Yes. Every workspace owner can export the projects, the members and the invoices as CSV or JSON from Settings, then Data.

Do you offer discounts for nonprofits?

Registered nonprofits and schools get 50% off every paid plan. Contact us with your registration document.

How do I delete my account?

Transfer or delete your workspaces first, then choose Delete account in your profile. We remove your data within 30 days.

@use 'sprucecss/scss/spruce' as *;

.help-center-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer-clamp('l', 'xl');
  }

  &__top {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: spacer('m');
    text-align: center;
  }

  &__search {
    display: flex;
    gap: spacer('xs');
    inline-size: min(100%, 40rem);

    .form-control {
      flex: 1 1 auto;
      min-inline-size: 0;
    }
  }

  &__popular {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin: 0;

    span {
      font-weight: 600;
    }
  }

  // Four topics in a row from lg, two from sm.
  &__topics {
    display: grid;
    gap: spacer('m');
    list-style: none;
    margin: 0;
    padding: 0;

    @include breakpoint('sm') {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @include breakpoint('lg') {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .block-icon {
      block-size: 1.5rem;
      inline-size: 1.5rem;
    }

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
    }
  }

  &__bottom {
    align-items: start;
    display: grid;
    gap: spacer-clamp('m', 'l');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  &__faq {
    @include layout-stack('s');
  }

  &__subtitle {
    font-size: font-size('h4');
  }

  &__contact {
    @include breakpoint('lg') {
      inset-block-start: spacer('l');
      margin-block-start: calc(#{font-size('h4')} * 1.2 + #{spacer('s')});
      position: sticky;
    }
  }
}

<section class="help-center-block" aria-labelledby="help-center-title">
    <div class="container">
        <div class="help-center-block__inner">
            <div class="help-center-block__top">
                <header class="block-heading">
                    <p class="block-heading__eyebrow">Help center</p>
                    <h2 class="block-heading__title" id="help-center-title">How can we help?</h2>
                </header>
                <form class="help-center-block__search" action="#" method="get" role="search">
                    <label class="sr-only" for="help-center-search">Search the help center</label>
                    <input class="form-control form-control--lg" id="help-center-search" name="q" type="search" placeholder="Search articles, like “export invoices”">
                    <button class="btn btn--primary btn--lg" type="submit">Search</button>
                </form>
                <p class="help-center-block__popular"><span>Popular:</span> <a href="#">Reset password</a>, <a href="#">Invite teammates</a>, <a href="#">Custom domain</a>, <a href="#">Refunds</a>
                </p>
            </div>
            <ul class="info-card-list help-center-block__topics">
                <li class="info-card">
                    <span class="info-card__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1z"/><path d="M12 15 9 12a22 22 0 0 1 2-4A13 13 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2z"/><path d="M9 12H4s.6-3 2-4c1.6-1.1 5 0 5 0"/><path d="M12 15v5s3-.6 4-2c1.1-1.6 0-5 0-5"/>
</svg>
</span>
                    <div class="info-card__caption">
                        <h3 class="info-card__title" id="help-topic-1">Getting started</h3>
                        <p class="info-card__text">Set up your account, workspace and first project.</p>
                    </div>
                    <a class="info-card__link" href="#" aria-describedby="help-topic-1">18 articles</a>
                </li>
                <li class="info-card">
                    <span class="info-card__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/>
</svg>
</span>
                    <div class="info-card__caption">
                        <h3 class="info-card__title" id="help-topic-2">Teams and roles</h3>
                        <p class="info-card__text">Invite people, manage seats and permissions.</p>
                    </div>
                    <a class="info-card__link" href="#" aria-describedby="help-topic-2">12 articles</a>
                </li>
                <li class="info-card">
                    <span class="info-card__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</span>
                    <div class="info-card__caption">
                        <h3 class="info-card__title" id="help-topic-3">Security</h3>
                        <p class="info-card__text">Two-factor login, SSO and audit logs.</p>
                    </div>
                    <a class="info-card__link" href="#" aria-describedby="help-topic-3">9 articles</a>
                </li>
                <li class="info-card">
                    <span class="info-card__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>
</svg>
</span>
                    <div class="info-card__caption">
                        <h3 class="info-card__title" id="help-topic-4">API and webhooks</h3>
                        <p class="info-card__text">Keys, rate limits and event payloads.</p>
                    </div>
                    <a class="info-card__link" href="#" aria-describedby="help-topic-4">24 articles</a>
                </li>
            </ul>
            <div class="help-center-block__bottom">
                <div class="help-center-block__faq">
                    <h3 class="help-center-block__subtitle">Frequently asked questions</h3>
                    <div class="accordion-list" data-accordion>
                        <div class="accordion-card">
                            <h4 class="accordion-card__title">How do I change my plan?</h4>
                            <div class="accordion-card__content">
                                <div>
                                    <p>Go to Settings, then Billing, and choose Change plan. Upgrades apply right away; downgrades apply at the end of the billing period.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-card">
                            <h4 class="accordion-card__title">Can I export my data?</h4>
                            <div class="accordion-card__content">
                                <div>
                                    <p>Yes. Every workspace owner can export the projects, the members and the invoices as CSV or JSON from Settings, then Data.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-card">
                            <h4 class="accordion-card__title">Do you offer discounts for nonprofits?</h4>
                            <div class="accordion-card__content">
                                <div>
                                    <p>Registered nonprofits and schools get 50% off every paid plan. Contact us with your registration document.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-card">
                            <h4 class="accordion-card__title">How do I delete my account?</h4>
                            <div class="accordion-card__content">
                                <div>
                                    <p>Transfer or delete your workspaces first, then choose Delete account in your profile. We remove your data within 30 days.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <aside class="callout callout--tip help-center-block__contact" aria-labelledby="help-center-contact">
                    <svg class="callout__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    <div class="callout__content">
                        <p class="callout__title" id="help-center-contact">Still need help?</p>
                        <p>Our support team answers in under 2 hours on weekdays.</p>
                        <p><a class="btn btn--primary btn--sm" href="#">Contact support</a></p>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>

Help Center

Technical Details

It combines the Block Heading, Info Cards for the topics, Accordion Cards for the questions and a Callout for the contact box. Load the accordion script too.
The search is a GET form with role="search", so it's a search landmark and works without JavaScript; connect it to the Autocomplete or the Command Palette for instant results.
Each topic link reads its article count and is described by the topic title ("24 articles, API and webhooks").
The questions are h4s under the "Frequently asked questions" h3, so the heading outline stays correct inside the block.
Override the content with helpCenterBlock.