Expandable Detail
Native <details>/<summary> chip that expands inline to reveal a description on click. Real semantic disclosure, not a tooltip — keyboard accessible by default.
Expandable Detail the 18th of 20 designs in the 20 CSS Tags & Chips Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<details class="ctc-exp">
<summary>
<span class="ctc-exp-tag">React</span>
<svg viewBox="0 0 12 12" aria-hidden="true">
<path
d="M3 4.5l3 3 3-3"
stroke="currentColor"
stroke-width="1.6"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</summary>
<p class="ctc-exp-body">
A JavaScript library for building user interfaces with components and hooks.
</p>
</details> .ctc-exp {
display: inline-block;
background: #1f1f2e;
border: 1px solid rgba(124, 108, 255, 0.3);
border-radius: 14px;
overflow: hidden;
font-family: system-ui, sans-serif;
max-width: 280px;
}
.ctc-exp summary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
list-style: none;
cursor: pointer;
font-weight: 600;
font-size: 12px;
color: #c4b5fd;
user-select: none;
}
.ctc-exp summary::-webkit-details-marker {
display: none;
}
.ctc-exp summary svg {
width: 11px;
height: 11px;
color: currentColor;
transition: transform 0.2s ease;
}
.ctc-exp[open] summary svg {
transform: rotate(180deg);
}
.ctc-exp[open] {
display: block;
border-radius: 14px;
}
.ctc-exp-body {
margin: 0;
padding: 8px 14px 12px;
font-size: 12px;
line-height: 1.55;
color: #b8b6d4;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ctc-exp summary:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}