Layout
Delish has 16 different layout options for a popover. While the content inside can change, the beak is what changes the overall layout.
None
Visual of layout with no beak
Above
Visual of layouts with beaks above
Below
Visual of layouts with beaks below
Before
Visual of layouts with beaks before
After
Visual of layouts with beaks after
Styles
Popovers have two styles: default and inverted.
- Default: use in most cases
- Inverted: use when default styling won’t work with the UI
Visual of styles
Color application
|
|
Design token |
Value |
|---|---|---|
|
(1) Default container |
NeutralBackground1.Rest |
#FFFFFF |
|
(2) Inverted container |
NeutralBackgroundInverted.Rest |
#0F1A38 |
Specs
Popovers should have a maximum width of 400px and are flexible in height.
|
|
Design token |
Value |
|---|---|---|
|
(1) Container radius |
borderRadiusMedium |
4px |
Spacing
|
|
Design token |
Value |
|---|---|---|
|
Padding left / right
|
spacingHorizontalLNudge |
24px |
|
Padding top / bottom |
spacingVerticalLNudge |
24px |