Modules

A list of global modules around the store.

Overlays

Overlays are used to present different kinds of information without loading a new page.

GENERAL

Overlays have a few display rules which apply to all sizes. Please review below:

  • There's no maximum height value. Height is determined by the amount of content inside the overlay
  • All overlays have a minimum height value
  • All overlays have two inner padding values, which will be determined based on the layout
  • All overlays will have the option to display the header "outside" of content area. Similarly to FoodKick.
  • Close button (X) is always visible
  • Overlay background color value (CSS): rgba(0, 0, 0, 0.8);

SMALL

  • width: 400px
  • min-height: 232px
  • padding: 30px
  • top: 150px

MEDIUM

  • width: 480px
  • min-height: 246px
  • padding: 30px
  • top: 150px

LARGE

  • width: 800px
  • min-height: 514px
  • padding: 40px
  • top: 150px

FULL SCREEN

  • width: full width
  • height: full height
  • content-width: 1368px

Accessibility

In general, there are three kinds of content that can be displayed in overlays: Dialogue, Form, and Rich Content.

Dialogue & Form Overlays

  • Overlay should have role=”dialog” attribute. Learn more.

All Overlays

  • Use aria-labelledby="" for headers.
  • Use aria-describedby="" for content (paragraphs, lists, etc).
  • Close button should be an HTML button, not a div or span.
  • All overlays should be accessible via the keyboard.