Search blocks by description or jump to a page.
An accordion where each item border softly fades on open. Adds a quiet visual cue for active panels in FAQs and settings without loud styling.
Border Fade Accordion is a single-open accordion with three items stacked vertically. Each item is a borderless panel at rest. When a panel opens, a rounded border fades in around the entire item over 500 ms, and a soft horizontal shimmer appears behind the question text. Closing the panel reverses both transitions, leaving the row looking clean and flat again.
The three demo questions and answers are placeholder copy; you can replace them with any content. Each item is independent, so you can add or remove panels freely. The fade timing and the rounded corner radius are consistent across all items, so the list stays coherent at any length.
Reach for this block when you want an FAQ section that acknowledges the active row without loud color or heavy borders. It suits a careers or hiring page where candidates scan role requirements, a benefits explainer, or a policies section in a recruiting portal. The fade cue is subtle enough that it does not compete with surrounding content, yet clear enough that readers always know which panel is open.
A natural flow around it on a Components page:
Before
After
Each panel in the accordion is self-contained, so you can tailor the content and structure to fit your page:
Tip: keep each answer to two or three short sentences so the border fade has room to breathe and the list stays easy to scan.