Accordion Separated

Fetch pattern JSON: curl https://webspire.de/patterns/accordion/separated.json

separated.html

<div class="ws-accordion mx-auto max-w-2xl space-y-3">
  <details class="group rounded-lg border border-[var(--ws-accordion-border)] bg-[var(--ws-accordion-bg)]">
    <summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      What payment methods do you accept?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="border-t border-[var(--ws-accordion-border)] px-5 py-4 text-sm text-[var(--ws-accordion-text-soft)]">
      We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. Enterprise customers can also pay via invoice with NET-30 terms.
    </div>
  </details>

  <details class="group rounded-lg border border-[var(--ws-accordion-border)] bg-[var(--ws-accordion-bg)]">
    <summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      Can I cancel my subscription?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="border-t border-[var(--ws-accordion-border)] px-5 py-4 text-sm text-[var(--ws-accordion-text-soft)]">
      Yes, you can cancel anytime from your account settings. Your access continues until the end of the current billing period. No cancellation fees apply.
    </div>
  </details>

  <details class="group rounded-lg border border-[var(--ws-accordion-border)] bg-[var(--ws-accordion-bg)]">
    <summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      Do you offer a free trial?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="border-t border-[var(--ws-accordion-border)] px-5 py-4 text-sm text-[var(--ws-accordion-text-soft)]">
      We offer a 14-day free trial on all plans with full feature access. No credit card required to start. You'll receive a reminder before the trial ends.
    </div>
  </details>
</div>

Details

Family

accordion

Tier

enhanced

Kind

component

Extends

accordion/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

accordionseparatedcardsspaceddetailssummarymodern

Slots

Name	Required	Description
title	Yes	Summary/trigger text for each item.
content	Yes	Expandable body content.

Separated accordion extending the base with individually bordered, rounded card items spaced apart via space-y-3. Each panel has its own background and an inner divider between summary and content, creating a modern, airy layout.