Introduction

If you have ever gone through material design guideline before, you might have encountered the "dp" unit whenever you are referencing their documentation.

"dp" or "Density-independent pixels" is a unit measurement for pixel density. Android, IOS and the web all have different calculation for converting "dp" to pixels("px"). More information about "dp" can be found in the Material Design guidelines

In this article, I will only use material design for web design.

"dp" conversion to "px" for the web is very simple: 1 dp = 1 px.

Using material design specification

Link to card component specification

For this demo, I will recreate the component from the picture above.

All the numbers specify the width and height of elements in the components using dp units. Using a rectangle shape, we can just change the width and height of the rectangle (measured in px) to act as a ruler.

Example as illustrated below:

Link to my Figma file, so you can see the demo