Build a Semantic Card Before Styling

before-after step-trail common-trap A feature card is currently built as generic divs: wrapper, title, body text, and clickable-looking CTA. It will be copied across a marketing page, so the first implementation sets the pattern for every card. Name the content role first, then attach styling classes. The common shortcut is to preserve the Figma layers as div names. That makes the card visually fast but semantically thin, and the mistake repeats anywhere the component is reused. Choose the container Use article for the card because each feature summary has its own title, body, and destination, and can be understood as…

Sign up free — one personalized lesson every day, matched to your role and goals.

Already have an account? Sign in