Device
The body of a phone around a screenshot, a video or a running demo.
On this page
A device is the body of a phone around a screenshot, a video or a running demo. It is drawn in one material, like a model cast in clay: a lifted sheet for the body, a narrow bezel, and a small well at the top of the screen where the camera would be. The frame says "this is a phone" and leaves every color to what it shows, as a window does for a desktop.
Device
<div class="device" style="--device-width: 13.5rem"> <img class="device-screen" src="/demo/moonstone.svg" alt="A pale stone over grey hills"></div>#The screen
device-screen goes on whatever the phone shows: an <img>, a <video>, an <iframe> or a block of markup. It fills the body inside the bezel, and an image is cropped to it. Its corner is the body's corner less the bezel, so the gap between the two keeps one width around the bend.
A screen made of markup starts under the camera's well: leave about a sixth of the body's width clear at the top, as a real status bar does.
Markup as a screen
<div class="device" style="--device-width: 13.5rem"> <div class="device-screen bg-surface-base flex flex-col gap-sm px(14) pt(44) pb(14)"> <p class="eyebrow">Wednesday</p> <p class="heading heading-lg">Today</p> <ul class="checklist mt(4)"> <li class="checklist-item"> <label class="checklist-label"> <input class="checkbox" type="checkbox" checked> <span class="checklist-title">Review the contract</span> </label> </li> <li class="checklist-item"> <label class="checklist-label"> <input class="checkbox" type="checkbox"> <span class="checklist-title">Call Grace at three</span> </label> </li> <li class="checklist-item"> <label class="checklist-label"> <input class="checkbox" type="checkbox"> <span class="checklist-title">Book the flight</span> </label> </li> </ul> </div></div>#Size
The body is 280px wide and 9 by 19.5. Resize it with --device-width, not with a width: the corner is 14% of that property and the bezel 3%, so both follow and the phone keeps its shape at any size. --device-ratio changes the proportions, for an older phone or a small tablet. The side buttons stand 2px proud of the body, and the element is that much wider on each side to hold them, so a device at the edge of a scrolling region adds nothing to scroll.
Sizes
<div class="device" style="--device-width: 7rem"> <img class="device-screen" src="/demo/moonstone.svg" alt></div><div class="device" style="--device-width: 9rem"> <img class="device-screen" src="/demo/moonstone.svg" alt></div><div class="device" style="--device-width: 11rem; --device-ratio: 3 / 4"> <img class="device-screen" src="/demo/moonstone.svg" alt></div>#Accessibility
- The frame is decoration and is not announced. The meaning is in the screen: give an image an
altthat says what the interface shows, or an emptyaltwhen the text beside it already does. - A live demo inside the screen is a real, small page. Keep its targets at touch size, and make sure it can be operated with the keyboard or is hidden from it.
- In forced colors the body and the camera's well take a system outline.
#Classes
| Class | Description |
|---|---|
device | The body: a lifted sheet 280px wide and 9 by 19.5, with a narrow bezel, the camera's well and the side buttons. The buttons stand 2px proud of the body inside the element's own box, so nothing is drawn outside it |
device-screen | The screen, on an image, a video, a frame or a block of markup: it fills the body inside the bezel and is finished by a corner concentric with the body's |
#Custom properties
| Property | Default | Description |
|---|---|---|
--device-width | 17.5rem | The body's width; the corner and the bezel are measured from it |
--device-ratio | 9 / 19.5 | The body's proportions |
--device-radius | calc(var(--device-width) * .14) | The body's corner, as a circular radius |
--device-bezel | calc(var(--device-width) * .03) | Width of the frame around the screen |