Components · Layout
Card
A panel that groups content. With an action it becomes a button.
Try itChange the motion setting at the top to feel each personality.
Lesson 3
A plain card. It only groups content.
A plain card. It only groups content.
Use it
<Card>Lesson 3</Card>
<Card onClick={open}>Lesson 4</Card>How it moves
| When | Role | What moves |
|---|---|---|
| A plain card is shown | none | Nothing. A card does not animate by itself |
| A card with an action: pointer moves over or away | feedback | Background color changes |
| A card with an action: pressed down, released | feedback | Scales to the role's scale and back |
Rules:
- A plain card never moves. If a group of cards should arrive one after another, put them in a List, which owns that motion.
- Only a card that does something when tapped gives feedback.
- A card does not lift, tilt, or grow a shadow on hover. Sidestep has no shadows.
Reduced motion: the feedback scale is 1, so the card does not move. The hover color still changes.
CSS variables used: --ss-motion-feedback-scale, --ss-motion-feedback-spring, --ss-motion-feedback-spring-duration, --ss-motion-feedback-duration, --ss-motion-feedback-easing.