Frame
Neutral well with an elevated white panel. Wraps lists with columns and tables.
Default
Flush neutral-100 well at 17px with a 16px white shadow surface. Same frame recipe used by lists with columns and tables.
Section
Neutral-100 well, white panel, shadow-sm.
Panel
White panel on a neutral-100 well with shadow-sm.
Thin
2px inset for compact framed surfaces.
Compact section
Thin panel
White panel on a neutral-100 well with shadow-sm.
Separated panels
Multiple panels share the well. Add a gap when they should sit apart.
Sections
One well, two elevated panels.
First
White panel on a neutral-100 well with shadow-sm.
Second
White panel on a neutral-100 well with shadow-sm.
With a list
ListColumns adds a 1px inset on Frame. Column labels sit in the well; the list is the elevated panel.
RoleAccess
- OwnerFull
- AdminLimited
- MemberLimited
Best practices
When to use
- Use to group related content in a neutral-100 well with an elevated white panel.
- Use default (17px well / 16px panel) for lists with columns and tables. ListColumns adds a 1px inset; lists use shadow-sm without a stroke. Tables stay flush and provide their own neutral-200 stroke. Use thin (2px) for compact framed surfaces.
Behavior
- Frame is the well. FramePanel is the white shadow-sm surface. Put at most one FrameTitle in each Frame.
- Lists with columns keep only column labels in the well — not a section title. Tables render inside Frame by default.