# Accordion 01 brand

> A centred heading over six questions that open one at a time, and a panel to get in touch, on the brand colour.

URL: https://apogee.avaui.dev/docs/faq-sections/accordion-01-brand
Last updated: 2026-10-20

A centred heading over six questions that open one at a time, and a panel to get in touch, on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/faq/accordion-01-brand

```astro
---
/**
 * Accordion 01 brand: A centred heading over six questions that open one at a time, and a panel to get in touch, on the brand colour.
 *
 * @block faq
 * @order 13
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import Accordion from '@/components/apogee/Accordion/Accordion.astro'
import AccordionItem from '@/components/apogee/Accordion/AccordionItem.astro'
import AvatarGroup from '@/components/apogee/AvatarGroup/AvatarGroup.astro'
import Button from '@/components/apogee/Button/Button.astro'

import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { FAQContent } from '@/components/apogee/sections/_shared/faq.ts'

/** @composable */
interface Props extends FAQContent {
  /** The heading on the get-in-touch panel. @category content */
  contactHeading?: string | null
  /** The line on the get-in-touch panel. @category content */
  contactDescription?: string | null
}

const {
  heading = 'Frequently asked questions',
  description = 'Everything you need to know about the product and billing.',
  items = [
    { question: 'Is there a free trial available?', answer: 'Yes, you can try us for free for 30 days. If you want, we will give you a free 30-minute onboarding call to get you up and running.' },
    { question: 'Can I change my plan later?', answer: 'Of course. Our pricing scales with your company. Chat to our friendly team to find a solution that works for you.' },
    { question: 'What is your cancellation policy?', answer: 'We understand that things change. You can cancel your plan at any time and we will refund you the difference already paid.' },
    { question: 'Can other info be added to an invoice?', answer: 'Yes. Add your company details, a purchase order number or a note in your billing settings, and every invoice carries them.' },
    { question: 'How does billing work?', answer: 'Plans are per workspace, not per account. You can upgrade one workspace and still have any number of free workspaces.' },
    { question: 'How do I change my account email?', answer: 'You can change the email address associated with your account by going to your account settings from a laptop or desktop.' },
  ],
  primaryAction = { label: 'Get in touch', href: '#' },
  contactHeading = 'Still have questions?',
  contactDescription = "Can't find the answer you're looking for? Please chat to our friendly team.",
} = Astro.props
---

<Section spacing="large" containerWidth="small" background="primary">
  <SectionHeader heading={plain(heading)} description={description ? plain(description) : undefined} align="center" background="primary" class="mb-16" />
  <Accordion variant="plain">
    {items.map((f, i) => (
      <AccordionItem title={f.question} open={i === 0} icon="plus" size="large" group="faq">{f.answer}</AccordionItem>
    ))}
  </Accordion>
  {(contactHeading || contactDescription || primaryAction) && (
  <div class="mt-16 flex flex-col items-center gap-6 rounded-2xl bg-page text-neutral p-8 text-center">
    <AvatarGroup items={[{ name: 'Ada Lovelace' }, { name: 'Alan Turing' }, { name: 'Grace Hopper' }]} size="large" />
    <div class="flex flex-col gap-2">
      {contactHeading && <Heading as="h3" size="h5">{contactHeading}</Heading>}
      {contactDescription && <p class="text-neutral-faded">{contactDescription}</p>}
    </div>
    {primaryAction && <Button href={primaryAction.href}>{primaryAction.label}</Button>}
  </div>
  )}
</Section>
```

## Add

```sh
npx @ava-ui/apogee add faq/accordion-01-brand
```

This copies the block to `src/components/apogee/blocks/faq/` with everything it uses: Accordion, AccordionItem, AvatarGroup, Button, Heading, Section, SectionHeader. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/faq-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.
-   Each question is a native disclosure (`<details>`): Enter or Space opens it, and opening one closes the others. It works without JS.

## Related

[

AccordionA stack of collapsible disclosure panels; expand one to read it, collapse it to reclaim space.

](https://apogee.avaui.dev/docs/accordion)[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)[

AvatarGroupOverlapping avatars for a compact "who's involved" cluster, with an optional +N overflow chip.

](https://apogee.avaui.dev/docs/avatar-group)