UX Design for Creating a Universal Card Component

As content management systems evolve, so does the way we implement solutions for our clients.

For years, web agencies have been designing and developing individual content cards. However, this has typically impacted development, content editing, and cost.

Our design objective was to unify the humble content card to speed up development and improve the content editing experience. This way, editors can benefit from a single card solution (Universal Card component), which saves them budget for more adventurous features.

A Universal Card to Capture Multiple, Optional Properties and Layouts

As part of a client Design Sprint, we considered properties that could be included in the Universal Card. These include:

• Image
• Icon
• Title
• Summary text
• CTA button
• Date
• Tag
• Color
• Alignment

We also defined how the Universal Card would work across the column grid. For example, can the card be full-width or span multiple columns to create a grid layout? Can an image be displayed as a background image or above, left or right of the content? While icons could optionally be displayed inline.

The Flexibility to Create Multiple Card Designs from a Single Component in the CMS Back Office

The Universal Card now features as a Development Accelerator in the GrowCreate toolkit, which delivers:

• A flexible content card solution
• A simplified editing experience
• Cost savings through rapid development