Split With Aside

About this block

Split With Aside sets a short FAQ next to a heading instead of under one. The left rail holds a bold heading and a help-center prompt for anyone whose question is not on the list, while a flat, single-open accordion stacks the answers on the right. The first question opens by default, so a reader always lands on an answer rather than a wall of closed rows.

The rail stays in view as the answers scroll, keeping the heading and the way out to support in reach the whole time. Everything is built from theme tokens and the shadcn Accordion, so the block adapts to light and dark with no external images.

When to use

Reach for this block when your questions form a single short list rather than a set of groups, and you want the section to read as one clean column of answers. The heading rail gives the FAQ a strong left anchor and a place for the help- center handoff, which keeps the answers themselves uncluttered.

It sits well near the foot of a Modern SaaS landing page, after the pricing and the proof, where it clears the last few objections before the closing ask.

A natural flow around it on a Modern SaaS page:

Before

• A pricing section to set out the plans
• A testimonials section to back the plans with proof

After

• A closing CTA to capture the click

What you can display

The obvious fit is six to nine common questions with a short answer each. A few other ways to use the frame:

• A launch FAQ. Lead with a plain "What is it?" answer open by default, then tuck the detail into the rows below.
• One topic in depth. Keep every question on a single subject, like billing, so a buyer can read it all in one place.
• A support handoff. Point the rail link at your help center or contact form so the unanswered question still has somewhere to go.

Tip: keep the list to under ten questions. When it grows past that, the flat column gets long, and a tabbed FAQ will carry the extra questions better.