Overview
When to use
- Place most page content inside boxes, including H2-H4 and components
- Boxes can contain any content, including body copy, selection cards, and buttons
When not to use
- H1 and H1 subtitles live on the page (not inside a box.) Sometimes these page titles may have related components, like page-level actions or badges.
- Side panels and dialogues. These have white backgrounds.
Specs
Similar styling as a card but it does not have a dropshadow.
Placement
Web
Related grouping
Space 16px apart
Disparate grouping
Space 40px apart
Native app - Phone
Space 12px apart
Best Practices
Inverse
This style is pioneered by our brand team. Join our Brand Office Hours or reach out to brand directly for guidance in applying this inverse style.
Default
- Style: Blondie (mono100) bkgd + White Stripes boxes
- Use case: 95% of the product
Inverse
- Style: White Stripes (mono0) bkgd + Blondie (mono100) cards
- Use case: zero state pages and monetization scenarios
Interactive cards in boxes
How to style and when to use interactive cards within boxes
Specs
Not all these states apply to each interactive card
In boxes
In accordions
Examples
Desktop
Native app: phone
Native app Component
Types
Do’s and Don’ts
Examples
Basic Box
Form Box
Table Box
Form box: Editing
When a form box is in read-only mode, the button at the top right is “Edit.” Once edit has been tapped, the buttons change to “Cancel” and “Save.”
Resources
(internal only)