Cards and Composability in Design Systems

Structure, Content, Style & Behavior of Composed Components

Nathan Curtis
Apr 21, 2018 · 10 min read
Image for post
Image for post

Composing Structure

Identify Core Elements

Image for post
Image for post

Identify All Possible Elements & Cases

Image for post
Image for post

Solidify Element Relationships

Image for post
Image for post
Image for post
Image for post

Cope with Regions Allowing Flexible Input

Image for post
Image for post
Flexible regions for a system user to inject their own content.

Composing Content

Content Varies. Form Conventions Based on Real Content.

Image for post
Image for post
Variety of aspect ratios encountered in real images spread across existing products
Image for post
Image for post

Too Much Content? Address Wrapping & Truncation

Image for post
Image for post
Image for post
Image for post
Truncation results in a shorter, but potentially not preferable, description.
Image for post
Image for post
Narrow card width causes a left-aligned button to collide with a right-aligned icon list.

Not Enough Content? When Image(s) and/or Copy Go Missing

Image for post
Image for post
Image for post
Image for post
Instances with wrapping titles and missing descriptions.
Image for post
Image for post
Instances with missing images replaced by background fill & icon to indicate asset type.

Composing Style

Expand a System’s Visual Language

Image for post
Image for post

Style Within and Across Components

Image for post
Image for post
Image for post
Image for post

Arranging in Layouts

Image for post
Image for post

Composing Behavior

Image for post
Image for post
Many elements that can potentially respond to events like click and hover

EightShapes

A collection of stories, studies, and deep thinking from…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store