ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
Senior, then lead product designer
Case card
Hover or tab to it to see the padding redline.
Clean · light
Clean · dark
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
Senior, then lead product designer
Vector
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
Senior, then lead product designer
Comic
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
Senior, then lead product designer
Markup contract
article.case-card > .case-card__body (.case-card__title, .case-card__meta, .case-card__summary, .case-card__role)
+ figure.case-card__media + .case-card__deco (aria-hidden, with .case-card__label).
Title comes first for screen readers; CSS moves the cover and meta up. The whole card is one link (stretched title link).
State hook: --card-active is 0 at rest, 1 on hover or keyboard focus. Themes drive their own effects from it.
.case-card__deco sits on the body, so it relies on the 4:3 cover. .case-card__label holds the real token value.
Set `item` to a case from collections.work.
Set `morph` to true where the cover should move into the case header. Each name may appear only once on a page.