Floating Label Accordion
An accordion where the question label lifts up as the panel opens. The floating title keeps context visible while reading through long FAQ answers.
An accordion where the question label lifts up as the panel opens. The floating title keeps context visible while reading through long FAQ answers.
Search blocks by description or jump to a page.
Floating Label Accordion is a stacked list of bordered panels, each one sitting in its own rounded card. Every card has a small category label pinned to the top left corner, a question trigger below it, and an answer that appears beneath a thin divider when the panel opens. The border subtly sharpens when a panel is active, giving a clear but restrained signal that this item is selected.
The category label, question, and answer text are independent across every item. You can add or remove panels freely, swap the label text to reflect your own topic groupings, and rewrite the questions and answers to match your content. The single open at a time behavior means readers always see one focused answer.
This block suits an FAQ section where questions fall into distinct categories and you want readers to know which topic they are reading without scrolling back up. On an online education platform it works especially well for course detail pages, where questions can be grouped under labels like Curriculum, Enrollment, and Certificates so prospective students quickly find what matters to them.
A natural flow around it on a Components page:
Before
After
Each panel carries three independent pieces of text you can tailor to any topic set:
Tip: keep category labels to one or two words so they stay tucked neatly in the corner without competing with the question text below them.