Underline Accordion
An accordion where each question sits above a single underline. The clean text first look fits editorial FAQs and quiet, tidy help sections.
An accordion where each question sits above a single underline. The clean text first look fits editorial FAQs and quiet, tidy help sections.
Search blocks by description or jump to a page.
Underline Accordion is a single-column stack of expandable items. Each question sits as plain text above a bottom border, and when a reader hovers or opens an item a thin two-pixel line animates outward from the left edge beneath the question text. One item can be open at a time, and a chevron rotates to signal the open state. The answer sits directly below its question inside the same row, keeping the eye on track.
The three demo items and all their copy are yours to swap freely. You can add or remove items without any layout changes, and the underline animation works identically on every row. The centered narrow container is a sensible default but the accordion itself will fill whatever column you drop it into.
This block fits any FAQ or documentation section where a quiet, editorial tone matters more than decoration. For a developer tools site it reads naturally on a docs page, an API reference landing section, or a support portal where a cluttered frame would compete with code samples. It is a better pick than the Card Accordion when you want the content to feel lightweight and inline rather than visually boxed, and better than the Highlight Active Accordion when background tints would clash with the surrounding page.
A natural flow around it on a Components page:
Before
After
The block works for any short question and answer content where motion should stay subtle. A few natural fits:
Tip: keep answers to two or three sentences so the expand animation feels snappy and readers are not surprised by a large content jump.