04
Cards · GG·04
GuideCard — the workhorse
default for grids, horizontal for search results, compact for sidebars. This is one DOM tree — press S and D and watch the same cards serve both businesses. Hover lifts 2px and zooms art 5%: the only motion a card is allowed.
01 Three variants — live
GuideCard
✓ DO
Clamp excerpts at 2 lines; let titles wrap free. Pinned uses brand ink; Premium always uses the gradient pill.
✗ DON'T
No shadows heavier than --shadow-lift, no motion beyond lift+zoom, never two status badges on one thumb.
motion hover translateY(-2px) 200ms · art scale(1.05) 300ms
grid default cards land in minmax(280px,1fr) columns