Accordion Bordered

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

bordered.html

<div class="ws-accordion mx-auto max-w-2xl divide-y divide-[var(--ws-accordion-border)] border-y border-[var(--ws-accordion-border)]">
  <details class="group">
    <summary class="flex cursor-pointer items-center justify-between 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="pb-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">
    <summary class="flex cursor-pointer items-center justify-between 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="pb-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">
    <summary class="flex cursor-pointer items-center justify-between 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="pb-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

accordionbordereddividersstructureddetailssummary

Slots

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

Bordered accordion extending the base with divide-y dividers between items and border-y top/bottom borders. Provides a more structured, list-like appearance suited for FAQ pages and settings panels.