New month, new #CodePenChallenge! This month's theme is Blogging.

Blogging is such a huge part of the web. What was once a niche phrase is now widely known and for good reason! Blogging is just writing on the web. A blog is just a place with published articles. In a sense, you could call just about any publication on the web a blog.

Since so many of us have blogs of our own, or have found ourselves in one way or another designing a blog, let's use this as a theme this month. Each week we'll have a challenge prompt for some element of a blog that typically needs designing.

This Week's Prompt: Cards

Cards are a staple design pattern in so many content-based sites. They might even be the primary pattern for displaying articles for the browsing user. They are an important pattern not only because of how common they are, but because they need to support variety and be resilient to vastly different content.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag: cpc-cards. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  • A card is a perfect "component". The idea of a component is that it is a data-driven and repeatable piece of UI. You could explore a variety of different JavaScript frameworks (think React, Angular, Vue) and build a card component in them.
  • Search around Dribbble for article card designs. Are they up for the job of dynamic data? Can you make them responsive?
  • As useful and practical as card designs are, what could you do to make them less boring? Could you evoke a deck of cards? Could they have an interesting interaction or animation? How weird can you get with them?

Resources

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.