Sheet (aka Drawer)

Ready for review

A Sheet is a full-with or full-height panel that overlays on top of a page flush to one edge. It some cases it can slide in from the side, top, or bottom.

Contributors

@Kevin McGrath (Deactivated) @Ben Warzeski (Deactivated) @Bronwyn Hawkins (Deactivated)

Slack Channel

#paragon-sheet-component

Paragon Ticket

https://openedx.atlassian.net/browse/PAR-266

Related Tickets

https://openedx.atlassian.net/browse/UXTL-9?atlOrigin=eyJpIjoiZDUyM2VmYWEyNWVjNGM0MzkwODhlZjlmMjlhOGVjZGEiLCJwIjoiaiJ9

Other Resources

https://miro.com/app/board/o9J_kmDZQvU=/

Similar components:

Use case

As a potential learner searching for courses on Google I would like to be able to view some of the actual course content without first having to enroll or login so that I can understand whether or not this is the right fit.

When I find the right course I would like to be able to enroll right from the course content page so that it is easy and quick to sign up!

https://www.figma.com/file/uAtSeYHUSUrjb0F93ohTtR/Low-fi?node-id=246%3A271

 

Specification

Anatomy

Legend

  1. Button

 

Behaviors

 

 

 

 

Accessibility

Focus Management Expectations

Semantics