Shadow Reveal Accordion
An accordion that lifts each item with a soft shadow on open. The raised panel clearly signals the active answer in FAQs and feature breakdowns.
An accordion that lifts each item with a soft shadow on open. The raised panel clearly signals the active answer in FAQs and feature breakdowns.
Search blocks by description or jump to a page.
Shadow Reveal Accordion is a single-open accordion built from three independent items, each sitting inside a rounded card that carries a resting shadow. When a reader opens an item, the shadow deepens and a faint tinted wash fills the trigger row and the answer area below it, so the active panel lifts visually away from the rest. A chevron turns on open and the answer slides in beneath the trigger.
Every item is a self-contained card with no divider lines between them. The question text, the answer copy, and the number of items are all independent, so you can swap the FAQ copy, add or remove cards, and adjust the answer length without changing how the shadow interaction works.
This layout suits any page that surfaces short answers to common questions and needs the open panel to stand out without loud color or heavy borders. On an HR and hiring platform it works well in a candidate FAQ section, a recruiter help center, or an onboarding page where each card reveals a policy or step. The raised shadow makes it clearer than a flat line accordion when the item count is low and each answer deserves to feel distinct.
A natural flow around it on a Components page:
Before
After
The block is a general purpose FAQ frame that works wherever a reader is likely to open one question at a time. A few natural fits:
Tip: keep answers to two or three sentences so the shadow lift feels proportional and the page does not jump too far on open.