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.

We knew good things were in the cards for this week! Check out some of our favorite Pens from week one of the June 2018 #CodePenChallenge.

Adam Kuhn brings delightful splashes of blobby color to a “Pure CSS Card UI”

See the Pen Pure CSS Card UI by Adam Kuhn (@cobra_winfrey) on CodePen.


“Blog Card” an elegant, responsive design for a blog post card from Katherine Kato.

See the Pen Blog Card by Katherine Kato (@kathykato) on CodePen.


Halida Astatin designs an article card concept for a k-pop fan blog in ” BTS on Soompi”.

See the Pen #CodePenChallenge – Cards – BTS on Soompi by Halida Astatin (@halidaa) on CodePen.


“SWAPI Cards” from Florence Bolsée takes you on a journey through the Star Wars universe.

See the Pen SWAPI Cards by Florence Bolsée (@FlorenceBolsee) on CodePen.


jh3y builds a slick carousel of blog cards in “Card UI concept w/ React + styled-components”

See the Pen Card UI concept w/ React + styled-components #CodePenChallenge by Jhey (@jh3y) on CodePen.

We’ve gathered up these and many more Pens from this week’s challenge in our Cards collection. A new challenge prompt is coming tomorrow! Sign up to get notified, or check back here Monday for the next prompt.

Thanks to our Sponsor!

This month’s challenge is sponsored by Jetpack — the ideal way to experience WordPress.

JetPack is a WordPress plugin that combines all sorts of powerful functionality into a single plugin. Here’s a handful of things it can do:

  • Secure and back up your site.
  • Connect your social media accounts for easy publishing after posting.
  • Enable Markdown and editing enhancements.
  • Increase performance though CDN-hosted and responsive images and video.