# Overlays

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Modal</strong></td><td>A modal displays content that requires user interaction in a layer that shows up on top of the current context. Modals block access to the rest of the page and force user interaction.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FWQAXfZEOmFoQDXYvrzyQ%2FModal%20Card.png?alt=media&#x26;token=e96fa021-11c7-4fb8-901e-195f6c71f405">Modal Card.png</a></td><td><a href="overlays/modal">modal</a></td></tr><tr><td><strong>Popover</strong></td><td>An overlay for larger amounts of data.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FVadXgQ4G1R7okwCbce9x%2FPopover%20Card.png?alt=media&#x26;token=5b82dd93-a9e7-45a1-b4e6-8d5cabe40bc6">Popover Card.png</a></td><td><a href="overlays/popover">popover</a></td></tr><tr><td><strong>Tooltip</strong></td><td>An overlay for small amounts of data.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F38aWTSjyefg3XaW7hfI2%2FTooltip%20Card.png?alt=media&#x26;token=ef8c5b7d-5396-4d3e-9635-7d8b59ab1ee0">Tooltip Card.png</a></td><td><a href="overlays/tooltip">tooltip</a></td></tr><tr><td><strong>Side Drawer</strong></td><td></td><td>A panel that slides in from the right side of the view port</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FMrQWM8EHi4f7zc4xUauE%2Fsidedrawer.svg?alt=media&#x26;token=ae999d25-0840-4d5d-bc20-d5a2226a6502">sidedrawer.svg</a></td><td><a href="overlays/side-drawer">side-drawer</a></td></tr></tbody></table>