CMS Design System - Card Component Size Specifications

In preparing specifications for developers, I wanted to show the sizing (both fixed and variable) system I've been utilizing. An 8px grid system, with 4px sub-grid, has made creating a visual rhythm much easier.

For the media card in particular, it was important that the spacing is consistent wherever possible (most notably 12px of padding throughout, with 8px spacing for smaller sub-sections), as well as a layout that works at a variety of widths in the responsive layout that contains these cards.

More shots to come soon showing the cards in page layouts, and other portions of the application.

Max Burnside
This is where I Dribbble.

More by Max Burnside

View profile