2 min lesson
Align three pricing cards through shared code
Select three pricing cards, change their shared styling once and check the result at 1440 and 390 pixels.
Check your understanding
Complete the practice "Align three pricing cards through shared code".
Outcome: The cards stay readable on mobile, and the same shared rule explains both viewport results.
Align three pricing cards through shared code
Design Mode multi-select, element context, responsive check
DoOpen /pricing at 1440 pixels in the browser inside the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition.. Toggle Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. with ⌘Ctrl⇧D and select all three pricing cards with multi-select.
SeeThe selection contains the Basic, Pro and Enterprise cards. The middle card sits eight pixels higher than the others.
DoBefore sending the prompt, confirm that Cursor has element identity and screenshot context for the selected cards.
SeeAll three selections point to PricingCard. Their computed styles show that one instance uses different top spacing.
SayAlign these cards to one top edge and use the shared card padding token. Keep the featured badge. Do not add a private translate, fixed height or one-off margin.
SeeAgent edits the shared PricingCard styling instead of adding three instance overrides.
DoLet the app hot reload, then inspect the diff before queuing another visual edit. Confirm that only the shared component or token changed.
SeeThe desktop cards align and the featured badge remains attached to the middle card.
DoRepeat the page at 390 pixels. Check the stacked gap, badge position, heading wrap and card padding.
SeeThe cards stay readable on mobile, and the same shared rule explains both viewport results.
Learn more
Optional practice
Test yourself on Align three pricing cards through shared code
QWhich result proves the pricing-card edit is ready to keep?