Accordion FAQ Card

A shared group keeps one answer open at a time. ::part(container) joins the accordions into a single card by collapsing the doubled borders and rounding only the outer corners. The card is a labeled section, and heading-level slots the questions into the page outline as level 2 headings.

How does the free trial work?

Every plan starts with a 14 day trial with all features enabled. No card is required, and the workspace moves to the free tier when the trial ends.

Can I switch plans later?

Plans can change at any time. Upgrades apply immediately and are billed pro rata, downgrades take effect at the next renewal.

What payment methods do you accept?

All major cards, PayPal, and SEPA direct debit. Annual invoices can also be paid by bank transfer.

How do I cancel my subscription?

Cancel from the billing page in one click. The workspace stays on the paid plan until the end of the billing period, and data is kept for 90 days after.

Code

The following example assumes that you have imported the component and set up the theme.

<section class="faq-card" aria-label="Billing questions">
28 collapsed lines
  <sv-accordion group="billing-faq" heading-level="2" opened>
    <span slot="summary">How does the free trial work?</span>
    <p>
      Every plan starts with a 14 day trial with all features enabled. No card is required, and the workspace moves to the free
      tier when the trial ends.
    </p>
  </sv-accordion>

  <sv-accordion group="billing-faq" heading-level="2">
    <span slot="summary">Can I switch plans later?</span>
    <p>
      Plans can change at any time. Upgrades apply immediately and are billed pro rata, downgrades take effect at the next
      renewal.
    </p>
  </sv-accordion>

  <sv-accordion group="billing-faq" heading-level="2">
    <span slot="summary">What payment methods do you accept?</span>
    <p>All major cards, PayPal, and SEPA direct debit. Annual invoices can also be paid by bank transfer.</p>
  </sv-accordion>

  <sv-accordion group="billing-faq" heading-level="2">
    <span slot="summary">How do I cancel my subscription?</span>
    <p>
      Cancel from the billing page in one click. The workspace stays on the paid plan until the end of the billing period, and
      data is kept for 90 days after.
    </p>
  </sv-accordion>
</section>

<style>
27 collapsed lines
  .faq-card {
    max-inline-size: 40rem;
    padding-block: 1em;
    margin-inline: auto;

    [slot="summary"] {
      font-weight: 600;
    }

    sv-accordion::part(container) {
      border-radius: 0;
    }

    sv-accordion:not(:first-of-type)::part(container) {
      border-block-start: none;
    }

    sv-accordion:first-of-type::part(container) {
      border-start-start-radius: var(--sv-bdr-rad-lg);
      border-start-end-radius: var(--sv-bdr-rad-lg);
    }

    sv-accordion:last-of-type::part(container) {
      border-end-start-radius: var(--sv-bdr-rad-lg);
      border-end-end-radius: var(--sv-bdr-rad-lg);
    }
  }
</style>