Bordered Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<!--
Snippet Name: Bordered Accordion
Description: Enterprise accordion with distinct bordered cards, status chips, and refined hover/focus states.
Author: DevSnips Contributors
Usage Example: Use inside enterprise admin panels or compliance docs where each section needs clear containment.
-->
<div class="space-y-3" data-accordion="bordered">
  <div class="rounded-xl border border-gray-200 bg-white transition-colors hover:border-gray-300 data-[open=true]:border-blue-200 data-[open=true]:ring-1 data-[open=true]:ring-blue-100" data-accordion-item data-open="false">
    <h3>
      <button type="button" id="bordered-trigger-1" aria-controls="bordered-panel-1" aria-expanded="false" class="accordion-trigger flex w-full items-center gap-4 px-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2">
            <span class="text-sm font-semibold text-gray-900">Identity & access management</span>
            <span class="rounded-full bg-green-50 px-2 py-0.5 text-[11px] font-medium text-green-700">Enforced</span>
          </span>
          <span class="mt-0.5 block text-xs text-gray-500">SAML SSO, MFA, and session policies</span>
        </span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="bordered-panel-1" role="region" aria-labelledby="bordered-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <dl class="grid grid-cols-1 gap-px overflow-hidden border-t border-gray-100 bg-gray-100 sm:grid-cols-3">
          <div class="bg-white px-4 py-3"><dt class="text-xs text-gray-500">SSO provider</dt><dd class="mt-0.5 text-sm font-medium text-gray-900">Okta</dd></div>
          <div class="bg-white px-4 py-3"><dt class="text-xs text-gray-500">MFA enrollment</dt><dd class="mt-0.5 text-sm font-medium text-gray-900">98%</dd></div>
          <div class="bg-white px-4 py-3"><dt class="text-xs text-gray-500">Session length</dt><dd class="mt-0.5 text-sm font-medium text-gray-900">8 hours</dd></div>
          <div class="bg-white px-4 py-4 sm:col-span-3"><p class="text-sm leading-relaxed text-gray-600">All members authenticate through your identity provider. Password login is disabled and mandatory MFA is enforced for every account, including service users with elevated scopes.</p></div>
        </dl>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-gray-200 bg-white transition-colors hover:border-gray-300 data-[open=true]:border-blue-200 data-[open=true]:ring-1 data-[open=true]:ring-blue-100" data-accordion-item data-open="false">
    <h3>
      <button type="button" id="bordered-trigger-2" aria-controls="bordered-panel-2" aria-expanded="false" class="accordion-trigger flex w-full items-center gap-4 px-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2">
            <span class="text-sm font-semibold text-gray-900">Data encryption & key rotation</span>
            <span class="rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-700">Review</span>
          </span>
          <span class="mt-0.5 block text-xs text-gray-500">At-rest, in-transit, and KMS policies</span>
        </span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="bordered-panel-2" role="region" aria-labelledby="bordered-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <div class="border-t border-gray-100 px-4 py-4 text-sm leading-relaxed text-gray-600">Customer data is encrypted at rest with AES-256 and in transit via TLS 1.3. Customer-managed keys rotate every 90 days; the next rotation is scheduled automatically and surfaces an alert if a policy drifts out of compliance.</div>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-gray-200 bg-white transition-colors hover:border-gray-300 data-[open=true]:border-blue-200 data-[open=true]:ring-1 data-[open=true]:ring-blue-100" data-accordion-item data-open="false">
    <h3>
      <button type="button" id="bordered-trigger-3" aria-controls="bordered-panel-3" aria-expanded="false" class="accordion-trigger flex w-full items-center gap-4 px-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2">
            <span class="text-sm font-semibold text-gray-900">Audit logging</span>
            <span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">Optional</span>
          </span>
          <span class="mt-0.5 block text-xs text-gray-500">Immutable event trail and exports</span>
        </span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="bordered-panel-3" role="region" aria-labelledby="bordered-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <div class="border-t border-gray-100 px-4 py-4 text-sm leading-relaxed text-gray-600">Every privileged action is written to an append-only log. Exports stream to your SIEM over HTTPS and include actor, target, IP, and full request context for forensic review.</div>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-accordion]');
      if (!root) return;
      root.querySelectorAll('[data-accordion-item]').forEach((item) => {
        const trigger = item.querySelector('.accordion-trigger');
        const panel = item.querySelector('.accordion-panel');
        const chevron = item.querySelector('.accordion-chevron');
        if (!trigger || !panel) return;
        const toggle = () => {
          const open = trigger.getAttribute('aria-expanded') === 'true';
          trigger.setAttribute('aria-expanded', String(!open));
          panel.classList.toggle('grid-rows-[1fr]', !open);
          panel.classList.toggle('grid-rows-[0fr]', open);
          item.setAttribute('data-open', String(!open));
          if (chevron) chevron.style.transform = open ? '' : 'rotate(180deg)';
        };
        trigger.addEventListener('click', toggle);
      });
    })();
  </script>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# Bordered Accordion

Enterprise-style accordion that presents each section as a distinct bordered card with leading status icons, status chips, and metadata grids. Designed for compliance dashboards, admin panels, and structured data review interfaces where visual separation and status cues matter.

## Preview

The preview shows multiple self-contained accordion cards. Each card has a border, an icon, a status chip, and expandable content with metadata. Opening a card applies an open-state ring.

## Features

- Distinct bordered card treatment per item
- Leading status / accent icons
- Status chips for quick scanning
- Metadata grids inside panels
- Open-state ring feedback
- Focus-visible rings on triggers
- Independent or coordinated toggles (per implementation)
- Semantic structure with ARIA support where present in the markup

## Usage

```bash
npx devsnips add Tailwind/Components/Accordions/bordered-accordion
```

Copy the markup from `code.html` into a Tailwind project. Include any inline script that ships with the component for toggle behavior. No external JS libraries are required.

## Customization

- **Card chrome**: Adjust border color, radius, padding, and shadow classes on the item containers.
- **Status colors**: Update chip and icon color utilities (e.g. green/amber/red semantic tokens).
- **Typography**: Heading size/weight and body text classes inside panels.
- **Spacing**: Gap between cards and internal padding.
- **Focus / open states**: Ring color and width classes.

## Accessibility

- Triggers use native buttons with clear labels.
- Focus-visible rings are present for keyboard users.
- ARIA attributes (`aria-expanded`, `aria-controls`, regions) are used where the implementation includes them.
- Icons that are decorative should remain `aria-hidden`.

## Responsive Behavior

Cards stack vertically and remain full-width on small screens. Metadata grids reflow as the available width changes. No horizontal overflow at common breakpoints.

## Dependencies

- Tailwind CSS
- No external JavaScript libraries
- Inline SVG icons (no icon package required)

## File Structure

- `code.html` — copy/paste component snippet
- `preview.html` — standalone preview/demo
- `metadata.json` — component metadata
- `README.md` — this documentation

## Notes

- Prefer this variant when each accordion item needs strong visual separation and status communication.
- For a lighter documentation style, use the basic or minimal accordion variants instead.