Slab

Surfaces

Overview

Just for clarification: slab is a container component. It uses a 3px border edge, radius and a hard shadow on card. It is used on cards, the table of contents, the language listbox, demo frames and tables are all slabs.

Live example

Usage

• shadow (4px) for a slab, shadow-sm (3px) for a control.
• Choose padding with pad: sm (space-3) for a compact card, md (space-6) by default, lg (space-10) for a feature panel, or none.
• Give it a landmark or heading when it holds content (<article> with an aria-labelledby).
• Do not nest a slab inside a slab. Use border 1px or a Rule inside.

Accessibility

This section is still in progress.

Related

• Interactive Card

References

This section is still in progress.