CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Devices

A collection of CSS tech devices.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Devices component is used to display (CSS powered) tech devices. Select a device (phone/tablet/browser/laptop), copy its 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: 15%;
  --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: 2%;
  --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)
}

Some devices include additional options (modifiers):

Phone

Tablet

Browser

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.