Components
Cards
Two distinct families: the deep-dive editorial card for brand storytelling, and the legacy utility card for confirmation and share dialogs.
Deep-dive editorial card
Portrait crop, rolling hover
aspect-ratio: 3/4, slides up on scroll-into-view, swaps to the rolling-chevron affordance on hover.
Editorial card
.card-image { aspect-ratio: 3 / 4; border-radius: 12px; }
.card:hover .card-image { transform: translateY(-4px); }
/* footer rolling-chevron — see Motion */Utility card
Denser, modal-adjacent
6px radius, layered soft shadow, circular icon-only dismiss button matching the Circle shape primitive.
Share to…
Confirmation and share dialogs use this denser, utility treatment.
Utility card
.utility-card {
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1);
}Usage
Do / Don't
Do
- Use the editorial card for brand storytelling and creator-focused content.
- Use the utility card for confirmation, share, and other transient dialogs.
- Keep the dismiss control on a utility card circular, matching the Circle shape primitive.
Don’t
- Mix the two families — an editorial card's rolling-chevron hover doesn't belong on a utility dialog.
- Apply the editorial card's slide-up scroll entrance to a card that appears inside an already-open modal.