Open demo

CSS code

HTML 
<div><span class="lbl">Icon and subtitle</span>
<div class="acc acc-rich">
<details open>
<summary><span class="ico" aria-hidden="true">◧</span><span class="txt"><b>What is in the pack?</b><span>Files, formats and licensing</span></span><span class="chev" aria-hidden="true"></span></summary>
<div class="body">Eight sets, one folder each, and every set in plain CSS, Bootstrap 5 and Tailwind CSS versions.</div>
</details>
<details>
<summary><span class="ico" aria-hidden="true">◎</span><span class="txt"><b>Browser support</b><span>What works where</span></span><span class="chev" aria-hidden="true"></span></summary>
<div class="body">Everything here uses widely supported features. The exclusive accordion in set four relies on the <code>name</code> attribute for <code><details></code>, which is the newest feature in the pack.</div>
</details>
</div>
</div>
<div><span class="lbl">With an image</span>
<div class="acc acc-rich">
<details open>
<summary>What does a set look like?<span class="chev" aria-hidden="true"></span></summary>
<div class="body"><div class="shot">Preview</div>Each set page lays the variants out with a label above each one, so the file doubles as its own documentation.</div>
</details>
</div>
</div>
<div><span class="lbl">With a table</span>
<div class="acc acc-rich">
<details open>
<summary>Shipping rates<span class="chev" aria-hidden="true"></span></summary>
<div class="body"><table><thead><tr><th>Region</th><th>Delivery</th><th>Cost</th></tr></thead><tbody><tr><td>Latvia</td><td>1–2 days</td><td>€4.90</td></tr><tr><td>Baltics</td><td>2–3 days</td><td>€7.50</td></tr><tr><td>Rest of the EU</td><td>3–5 days</td><td>€12.00</td></tr></tbody></table></div>
</details>
</div>
</div>
CSS 
/* Native <details>/<summary> with richer content in the summary and the panel. */
.acc{--acc-bg:#fff;--acc-border:#e2e8f0;--acc-text:#1e293b;--acc-muted:#475569;
  --acc-hover:#f8fafc;--acc-icon:#64748b;--acc-focus:#2563eb;max-width:560px}
.acc details{background:var(--acc-bg);border:1px solid var(--acc-border);border-radius:11px;margin:0 0 9px;overflow:hidden}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;cursor:pointer;
  list-style:none;font-size:.94rem;font-weight:600;color:var(--acc-text);transition:background-color .15s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--acc-hover)}
.acc summary:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .body{padding:0 18px 17px;font-size:.89rem;line-height:1.66;color:var(--acc-muted)}
/* chevron: two borders of a small square, rotated to point down, then up when open */
.acc .chev{flex:none;width:9px;height:9px;margin-top:-3px;border-right:2px solid var(--acc-icon);
  border-bottom:2px solid var(--acc-icon);transform:rotate(45deg);transition:transform .2s}
.acc details[open]>summary .chev{margin-top:3px;transform:rotate(-135deg)}
.acc-rich summary{align-items:flex-start;padding:16px 18px}
/* icon tile and a two-line title */
.acc-rich .ico{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:13px;border-radius:9px;
  background:#eff6ff;color:#2563eb;font-size:1.05rem}
.acc-rich .txt{flex:1}
.acc-rich .txt b{display:block;font-size:.94rem}
.acc-rich .txt span{display:block;margin-top:3px;font-size:.79rem;font-weight:400;color:#64748b}
.acc code{font-size:.85em}
/* image placeholder */
.acc .shot{display:grid;place-items:center;width:100%;height:120px;margin-bottom:13px;border-radius:9px;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;font-size:.8rem;font-weight:600}
/* table */
.acc table{width:100%;margin-top:4px;border-collapse:collapse;font-size:.83rem}
.acc th,.acc td{padding:8px 10px;text-align:left;border-bottom:1px solid #f1f5f9}
.acc th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
@media (prefers-reduced-motion:reduce){.acc summary,.acc .chev{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div><span class="lbl">Icon and subtitle</span>
<div class="accordion acc acc-rich">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b5-1" aria-expanded="true" aria-controls="b5-1"><span class="ico" aria-hidden="true">◧</span><span class="txt"><b>What is in the pack?</b><span>Files, formats and licensing</span></span></button></h3>
<div id="b5-1" class="accordion-collapse collapse show">
<div class="accordion-body">Eight sets, one folder each, and every set in plain CSS, Bootstrap 5 and Tailwind CSS versions.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b5-2" aria-expanded="false" aria-controls="b5-2"><span class="ico" aria-hidden="true">◎</span><span class="txt"><b>Browser support</b><span>What works where</span></span></button></h3>
<div id="b5-2" class="accordion-collapse collapse">
<div class="accordion-body">Everything here uses widely supported features. The exclusive accordion in set four relies on the <code>name</code> attribute for <code><details></code>, which is the newest feature in the pack.</div>
</div>
</div>
</div>
</div>
<div><span class="lbl">With an image</span>
<div class="accordion acc acc-rich">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b5-3" aria-expanded="true" aria-controls="b5-3">What does a set look like?</button></h3>
<div id="b5-3" class="accordion-collapse collapse show">
<div class="accordion-body"><div class="shot">Preview</div>Each set page lays the variants out with a label above each one, so the file doubles as its own documentation.</div>
</div>
</div>
</div>
</div>
<div><span class="lbl">With a table</span>
<div class="accordion acc acc-rich">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b5-4" aria-expanded="true" aria-controls="b5-4">Shipping rates</button></h3>
<div id="b5-4" class="accordion-collapse collapse show">
<div class="accordion-body"><table class="table"><thead><tr><th>Region</th><th>Delivery</th><th>Cost</th></tr></thead><tbody><tr><td>Latvia</td><td>1–2 days</td><td>€4.90</td></tr><tr><td>Baltics</td><td>2–3 days</td><td>€7.50</td></tr><tr><td>Rest of the EU</td><td>3–5 days</td><td>€12.00</td></tr></tbody></table></div>
</div>
</div>
</div>
</div>
CSS 
/* Bootstrap .accordion + Collapse plugin, restyled through the --bs-accordion-* variables. */
.acc{--bs-accordion-color:#475569;--bs-accordion-bg:#fff;--bs-accordion-border-color:#e2e8f0;
  --bs-accordion-border-radius:11px;--bs-accordion-inner-border-radius:10px;
  --bs-accordion-btn-padding-x:18px;--bs-accordion-btn-padding-y:15px;--bs-accordion-btn-color:#1e293b;
  --bs-accordion-btn-bg:transparent;--bs-accordion-active-color:#1e293b;--bs-accordion-active-bg:transparent;
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-btn-icon-width:16px;--bs-accordion-btn-icon-transition:transform .2s;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-width='2' d='M2.5 5 8 10.5 13.5 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:var(--bs-accordion-btn-icon);
  --bs-accordion-body-padding-x:18px;--bs-accordion-body-padding-y:17px;
  --acc-hover:#f8fafc;--acc-focus:#2563eb;max-width:560px}
/* separate cards instead of one joined block */
.acc .accordion-item{margin-bottom:9px;border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  border-radius:var(--bs-accordion-border-radius);overflow:hidden}
.acc .accordion-button{justify-content:space-between;gap:14px;font-size:.94rem;font-weight:600;line-height:normal;
  box-shadow:none;transition:background-color .15s}
.acc .accordion-button::after{margin-left:0}
.acc .accordion-button:hover{background-color:var(--acc-hover)}
.acc .accordion-button:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .accordion-body{padding-top:0;font-size:.89rem;line-height:1.66}
.acc-rich{--bs-accordion-btn-padding-y:16px}
.acc-rich .accordion-button{align-items:flex-start}
.acc-rich .accordion-button::after{margin-top:-4px}
/* icon tile and a two-line title */
.acc-rich .ico{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:13px;border-radius:9px;
  background:#eff6ff;color:#2563eb;font-size:1.05rem}
.acc-rich .txt{flex:1}
.acc-rich .txt b{display:block;font-size:.94rem}
.acc-rich .txt span{display:block;margin-top:3px;font-size:.79rem;font-weight:400;color:#64748b}
.acc code{color:inherit;font-size:.85em}
/* image placeholder */
.acc .shot{display:grid;place-items:center;width:100%;height:120px;margin-bottom:13px;border-radius:9px;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;font-size:.8rem;font-weight:600}
/* Bootstrap .table, recoloured */
.acc .table{--bs-table-bg:transparent;--bs-table-color:#475569;--bs-table-border-color:#f1f5f9;
  margin:4px 0 0;font-size:.83rem}
.acc .table>:not(caption)>*>*{padding:8px 10px}
.acc .table th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
@media (prefers-reduced-motion:reduce){.acc .accordion-button,.acc .accordion-button::after,.acc .collapsing{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Icon and subtitle</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" open>
<summary class="flex cursor-pointer list-none items-start justify-between gap-[14px] px-[18px] py-4 text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span class="mr-[13px] grid size-9 flex-none place-items-center rounded-[9px] bg-[#eff6ff] text-[1.05rem] text-[#2563eb]" aria-hidden="true">◧</span><span class="flex-1"><b class="block text-[.94rem]">What is in the pack?</b><span class="mt-[3px] block text-[.79rem] font-normal text-[#64748b]">Files, formats and licensing</span></span><span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Eight sets, one folder each, and every set in plain CSS, Bootstrap 5 and Tailwind CSS versions.</div>
</details>
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white">
<summary class="flex cursor-pointer list-none items-start justify-between gap-[14px] px-[18px] py-4 text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span class="mr-[13px] grid size-9 flex-none place-items-center rounded-[9px] bg-[#eff6ff] text-[1.05rem] text-[#2563eb]" aria-hidden="true">◎</span><span class="flex-1"><b class="block text-[.94rem]">Browser support</b><span class="mt-[3px] block text-[.79rem] font-normal text-[#64748b]">What works where</span></span><span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Everything here uses widely supported features. The exclusive accordion in set four relies on the <code class="text-[.85em]">name</code> attribute for <code class="text-[.85em]"><details></code>, which is the newest feature in the pack.</div>
</details>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">With an image</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" open>
<summary class="flex cursor-pointer list-none items-start justify-between gap-[14px] px-[18px] py-4 text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">What does a set look like?<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]"><div class="mb-[13px] grid h-[120px] w-full place-items-center rounded-[9px] bg-linear-135 from-[#dbeafe] to-[#bfdbfe] text-[.8rem] font-semibold text-[#1d4ed8]">Preview</div>Each set page lays the variants out with a label above each one, so the file doubles as its own documentation.</div>
</details>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">With a table</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" open>
<summary class="flex cursor-pointer list-none items-start justify-between gap-[14px] px-[18px] py-4 text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Shipping rates<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]"><table class="mt-1 w-full border-collapse text-[.83rem]"><thead><tr><th class="border-b border-[#f1f5f9] px-2.5 py-2 text-left text-[.72rem] font-bold tracking-[.06em] text-[#64748b] uppercase">Region</th><th class="border-b border-[#f1f5f9] px-2.5 py-2 text-left text-[.72rem] font-bold tracking-[.06em] text-[#64748b] uppercase">Delivery</th><th class="border-b border-[#f1f5f9] px-2.5 py-2 text-left text-[.72rem] font-bold tracking-[.06em] text-[#64748b] uppercase">Cost</th></tr></thead><tbody><tr><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">Latvia</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">1–2 days</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">€4.90</td></tr><tr><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">Baltics</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">2–3 days</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">€7.50</td></tr><tr><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">Rest of the EU</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">3–5 days</td><td class="border-b border-[#f1f5f9] px-2.5 py-2 text-left">€12.00</td></tr></tbody></table></div>
</details>
</div>
</div>

About this set

Accordions for content that is more than a line of text. Icon and subtitle puts a tinted icon tile and a two-line title in the header, a bold question with a smaller grey subtitle under it, for help centres and feature lists where a short description helps readers pick the right panel. With an image shows a full-width image area above the answer text; the demo uses a gradient placeholder that you replace with an img element. With a table places a compact three-column table inside the panel, with small uppercase column headings and hairline rows, for specifications, prices or file sizes. The header aligns its items to the top, so the chevron stays level with the first line when the title wraps. The plain CSS and Tailwind versions are native details and summary elements; the Bootstrap version uses .accordion with the Collapse plugin and Bootstrap’s .table component inside the panel, recoloured through the –bs-table-* variables.

What’s included

  • Three panel types: icon and subtitle, image, table
  • Two-line header with a bold title and a muted subtitle
  • Subtitle and table headings darkened to meet 4.5:1
  • Bootstrap version uses .accordion and a recoloured .table
  • No JavaScript in the plain CSS and Tailwind versions

Accessibility

The header text, including the subtitle, forms the accessible name of each summary or Bootstrap button, and the decorative icon glyphs are aria-hidden. The table uses th cells in a thead for its column headings. Tab reaches each header, Enter or Space toggles it, focus shows a 2px blue outline, and the chevron transition is removed under prefers-reduced-motion.

Customise it

Change the --acc-* properties on .acc, the .ico background and colour, and the .shot gradient or swap it for an img. In Bootstrap adjust the --bs-accordion-* and --bs-table-* variables; in Tailwind edit the bg-[#eff6ff] and text-[#2563eb] classes on the icon tile and the colour classes on the table cells.