Search blocks by description or jump to a page.
An accordion with a bold colored bar down the side of each item. The thick accent marks active rows in FAQs and grabs reader attention quickly.
Thick Side Border Accordion is a single column accordion list. Each item sits between a bottom divider and a smooth left border that appears only when that row is open, growing to a bold four pixel accent bar in the foreground color. The open trigger gains medium weight so the active question stands out from the closed ones. Only one panel can be open at a time, and each panel transitions in with a short animation.
The question and answer copy, the number of items, and the accent color are all straightforward to change. Items can be added or removed without affecting the others, and the whole list sits inside a centered container that can be widened or narrowed to fit a column layout.
This layout suits any page that needs a compact FAQ or help section where the open row must be unmistakably obvious. The side bar is a stronger active signal than a simple underline or background tint, which makes it a good fit for dense product pages where readers skim quickly. On an ecommerce storefront it works well in a product detail page below the description, letting shoppers expand shipping, returns, and sizing questions without leaving the page.
A natural flow around it on a Components page:
Before
After
This frame works wherever a clear active state matters more than decoration. A few specific fits for an ecommerce context:
Tip: keep question text short enough to fit on one line in the trigger so the bold left bar appears cleanly against a single row height.