# FAQ (Block, Content)

> A frequently asked questions block with a sticky heading, a help card and an exclusive accordion.

- Type: block
- Preview: https://sprucecss.com/blocks/faq/
- Markdown: https://sprucecss.com/blocks/faq.md
- Framework: Spruce CSS v3 (`npm install sprucecss`). Every SCSS file below starts with `@use 'sprucecss/scss/spruce' as *;`, so compile it with `node_modules` as a Sass load path (`sass --load-path=node_modules`).

## How to use it

1. Copy the SCSS of this block and of every stylesheet dependency into your project, in the order listed under Dependencies, and compile them with your Spruce CSS setup.
2. Copy the HTML.
3. Replace the demo content (text, links, image URLs) in the HTML; keep the classes, the structure and the accessibility attributes.

The HTML below is rendered with the default content. In the Spruce UI source (Nunjucks) the content comes from a data object: Override with `faqBlock` ({ heading, items: [{ question, answer }], help }).

## Dependencies

Stylesheets, in this order (each one is `{name}.scss` in the library; its endpoint has the code):

1. `content-and-layout/container`: https://sprucecss.com/ui/content-and-layout/container.md
2. `content-and-layout/block-heading`: https://sprucecss.com/ui/content-and-layout/block-heading.md
3. `block/faq` (this block, below)

## HTML

```html
<section class="faq-block" aria-labelledby="faq-title">
    <div class="container">
        <div class="faq-block__inner">
            <div class="faq-block__aside">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">FAQ</p>
                <h2 class="block-heading__title" id="faq-title">Frequently asked questions</h2>
                <p class="block-heading__text">Everything you need to know about the product and billing.</p>
            </header>
                <div class="faq-block__help">
                    <h3 class="faq-block__help-title">Still have questions?</h3>
                    <p>Can’t find the answer you’re looking for? Our team is happy to help.</p>
                    <a class="btn btn--primary btn--sm" href="#">Contact support</a>
                </div>
            </div>
            <div class="faq-block__list">
                <details name="faq-block" open>
                    <summary>Is there a free plan?</summary>
                    <p>Yes. The Starter plan is free forever for personal projects, with no credit card required.</p>
                </details>
                <details name="faq-block">
                    <summary>Can I change my plan later?</summary>
                    <p>Of course. You can upgrade, downgrade or cancel at any time from your account settings.</p>
                </details>
                <details name="faq-block">
                    <summary>Do you offer discounts for nonprofits?</summary>
                    <p>We offer a 50% discount for registered nonprofits and educational institutions. Contact us to apply.</p>
                </details>
                <details name="faq-block">
                    <summary>How does the yearly billing work?</summary>
                    <p>You pay for twelve months upfront and save 20% compared to the monthly price.</p>
                </details>
                <details name="faq-block">
                    <summary>Is my data secure?</summary>
                    <p>All data is encrypted in transit and at rest, and we never sell your data.</p>
                </details>
            </div>
        </div>
    </div>
</section>
```

## SCSS

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

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

  &__inner {
    display: grid;
    gap: spacer-clamp('l', 'xl');

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

  &__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: spacer('l');

    @include breakpoint('lg') {
      inset-block-start: spacer('l');
      position: sticky;
    }
  }

  &__help {
    background-color: color('surface-muted');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    padding: spacer('m');
    @include layout-stack('xs');
  }

  &__help-title {
    font-size: font-size('h5');
  }

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

    details {
      background-color: color('surface');
    }
  }
}
```

## Notes

## Technical Details

- The questions are native `details` elements (styled by Spruce CSS) with the same `name`, so only one is open at a time; no JavaScript.
- The heading is the start-aligned [Block Heading](https://sprucecss.com/ui/content-and-layout/block-heading/); on large screens the side column is sticky.
- Override the content with `faqBlock` (`heading`, `items` with `question` and `answer`, and `help`).