HomeChallengesRepsProblemsLeaderboardTake a challenge

Pricing Card

Build a pricing tier with a features list and a highlighted "popular" badge.

Advanced10 min on the clock8 graded checks · 100 pointsComponent BuilderPro
Graded by reading your code against the checklist below.

What you build

    How it is graded

    Published in full, before you start — every point is one of these and there is nothing else.

    1. Use gradient utilities+15Visual polish
    2. Position the badge+15CSS layout
    3. Add border styling+10Visual polish
    4. Use vertical spacing for the list+10Spacing and rhythm
    5. Use Flexbox for list items+10CSS layout
    6. Add shadow effects+10Visual polish
    7. Add a transform on hover+15Interaction and motion
    8. Add transitions+15Interaction and motion

    What it teaches

    Spacing and rhythmbeginner

    Padding is the breathing room inside a box; without it text touches its own border and everything looks amateur, no matter how good the colours are.

    Interaction and motionbeginner

    A :hover style tells the user something is clickable, and a transition stops that change from snapping — together they are the cheapest way to make a page feel built rather than assembled.

    The rest of Component Builder