Skip to content
Submitted over 1 year ago

Order Summary Card made with custom variables

Mariana Freire•20
@marisfreire
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I make this more accessible? I feel as if working with SVG files takes away the opportunity for me to add that alt attribute to images, and I really don't know how to do that when using them as background images. Any thoughts? All feedback is welcome.

Community feedback

  • Joshua Hellard•545
    @jhellardPosted over 1 year ago

    Hi Mariana, great solution!

    You can use a img element and pass in the svg as the src, that would allow you to set an alt tag for your images. Utilizing this approach you could change your container-image from a div to an img and just apply the same CSS.

    Here's an article that describes this in more detail. Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord