Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Perhaps you’ve heard of Google’s Material Design?

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.

It’s more of an aesthetic and set of principles than it is a grab-n-go pattern library. People play with it quite a bit on CodePen. Here’s a collection of Pens I’ve found. There is also a gallery site called Material Design with loads of examples, including stuff here on CodePen.

But Google actually does offer a lot of Material Design stuff as patterns you can take and use through Angular Material.

Even better, you can snag any pattern they offer, and with a single click, move it over to CodePen to play with it.

It uses our Prefill API which is open to all!