About this block

Side Bordered Collapsible is a single expandable panel. A trigger row sits above a bottom border and shows a heading on the left with a chevron on the right that swaps direction when the panel opens. When expanded, a vertical bar appears on the left edge of the entire block, and the hidden content drops in below the trigger as a block of small, muted text.

The heading, the body copy, and the number of paragraphs inside the expanded region are all yours to change. The side bar and chevron behavior are driven by open state, so you do not need to wire anything up yourself. The block works as a standalone unit and can sit inside a list of similar panels without any wrapper.

When to use

Reach for this block on a logistics or delivery platform wherever a policy, status detail, or condition needs to stay out of the way until a user asks for it. The side bar gives a clear visual anchor that something is active, which makes it a better fit than a plain text toggle when the expanded content carries real weight, such as a return window, a delivery exception notice, or a carrier SLA. Nearby alternatives in the collapsible group suit grouped settings or step by step flows; this one is best for a single self-contained disclosure.

A natural flow around it on a Components page:

Before

• Alerts to surface a status message that leads into the expandable detail below
• Badges to label the item whose policy or condition the panel explains

After

• Grouped Collapsible when several related policies need to live side by side
• Cards to wrap a summary view once the user has read the expanded detail

What you can customize

The block is a single panel so swapping its parts is straightforward:

• Trigger label. Replace the heading text with any short label that names the detail being hidden, such as a deadline, a rule, or a status.
• Body paragraphs. Add or remove paragraphs inside the expanded region; the panel grows to fit whatever you place there.
• Panel placement. Drop the block into any column or card; the max width constraint keeps it readable but can be removed to fill its container.

Tip: keep the expanded text to two or three short paragraphs so the side bar stays proportionate and the panel closes without a jarring scroll.