How to Build UNBREAKABLE "Counter" Cards (Process/Step Cards)

Apr 8th, 20252 min

Kevin Geary

This is one of those unicorn trainings: it has something for EVERYONE (beginners, intermediate, advanced) and it's super practical (you can use it on TONS of sites).

There are three layers to this given the example design:

1. The cards have to count themselves.
2. The numbers have to appear "cutout" from the card's border.
3. The "cutout" has to be a real cutout, not a fake cutout, and must support the cards being on top of gradients and patterns without breaking.

You'll learn exactly how to make this happen, step by step, in this training.

Enjoy!

*** MY TOOLS ***

🔥 Etch – https://gearyco.link/9rjL8bh
🔥 AutomaticCSS (ACSS) – https://gearyco.link/LBeYKSP
🔥 Frames – https://gearyco.link/kSwaWZx

See all my recommended tools here: https://geary.co/tools/

*** INNER CIRCLE ***

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ …and much more!

Learn more and join here: https://gearyco.link/fbDNKfe

*** SOCIAL ***

👉 X – https://gearyco.link/VkiChCe
👉 FB – https://gearyco.link/Or2kjDg
👉 LinkedIn – https://gearyco.link/wjJkUWK

*** CHAPTERS ***