Devices

A collection of CSS-only tech devices.

How to

The Devices component is used to display (CSS-only) tech devices. Select a device (phone/tablet/browser/laptop/desktop), copy its HTML and CSS code, and paste it in your web page!

To upload your artwork, replace the SVG element of the demo (e.g., with an <img> element), and remember to update the appropriate image-ratio CSS custom property:

:root {
  // phone
  --dev-phone-radius: 14%;
  --dev-phone-img-ratio: 0.56; // width:height (e.g., 750:1334)

  // tablet
  --dev-tablet-radius: 6%;
  --dev-tablet-img-ratio: 0.75; // width:height (e.g., 2048:2732)

  // browser
  --dev-browser-radius: 1.5%;
  --dev-browser-img-ratio: 1.6; // width:height (e.g., 1920:1200)

  // laptop
  --dev-laptop-radius: 3%;
  --dev-laptop-img-ratio: 1.6; // width:height (e.g., 1920:1200)

  // desktop
  --dev-desktop-radius: 3%;
  --dev-desktop-img-ratio: 1.6; // width:height (e.g., 1920:1200)
}

Some devices include additional options (modifiers):

Phone

• choose between the .dev-phone--top-light and .dev-phone--front-light modifiers to change the light direction (and affect the shadow appearance).
• add the class .dev-phone--landscape to change the orientation (if you do so, remember to update your artwork as well).

Tablet

• choose between the .dev-tablet--top-light and .dev-tablet--front-light modifiers to change the light direction (and affect the shadow appearance).
• add the class .dev-tablet--landscape to change the orientation (if you do so, remember to update your artwork as well).

Browser

• choose between the .dev-browser--top-light and .dev-browser--front-light modifiers to change the light direction (and affect the shadow appearance).

Categories

• Content and Layout > Misc

Bug report & feedback

Component Github page ↗