Article Preview Component

What are you most proud of, and what would you do differently next time?

Built with. 🔨

• HTML & CSS.
• TypeScript.
• Vite.

New Things Learned. 🎓

• To allow images to scale beyond their original file dimensions, you have to use width: 100% rather than max-width: 100%. For example, an image sized at 576px X 576px won’t expand beyond 576px if max-width: 100% is applied.
• Inline SVGs need to have the viewBox attribute. Without it, the SVG won’t scale with the browser’s root font size, even if you’ve set its width and height in rem within CSS.
• I initially used aria-expanded, but i was told it's only for disclosure patterns. Since this was a popover, i changed it to an aria-haspopup="dialog".

Note. 📌

• I changed the colors a bit since the colors in the design file had very poor contrast ratios.

What specific areas of your project would you like help with?

Any sort of feedback is appreciated.