3-column-preview-card-component

Hi 👋, some of this may interest you:

HTML | ACCESSIBILITY:

• The icons are decorative images and the way to set an SVG image as decorative is by using the aria-hidden='true' attribute.

• Remember that <button> should be used for any interaction that performs an action on the current page and <a> should be used for any interaction that navigates to another view. It seems that links are more appropriate in this case.

CSS:

• The trick of setting the font size: 62.5%; is no longer commonly recommended because it can cause issues with accessibility and readability.

• To center the page content you should change max-height: 100vh to min-height: 100vh; for the body.

• It might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

Let me know if you want more info on any of these topics.

I hope it’s useful : )

Regards,