3-column preview card component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  That's a really nice looking solution! ^_^ To answer the quesitons:

  1. I'd say probably using px for min/max-width/height isn't as bad as simply using fixed width/height. But I don't see a reason not to use rem for this purpose (other than the fact, that it may not be as comfortable using rem units, at first) to be 100% sure your solution is accessible and responsive.

  2. I'd say article is fine. Nesting sections inside? Probably less so. Not that it's strictly bad, it's just gives you unnecessary errors in your accessibility report while not being any more semantic than a simple div.

  3. I'd say it's always nice to have a max-width on items. You don't want components to stretch to eternity >.< I usually use a combination of width (in %) and max-width (in rem). Or max-width and some margin.

  Some other things to note:

  1. It would be the best to just have one <h1> heading for your solution. All the rest can be <h2>, for example. You could have a screen-reader only <h1> saying "Cars for hire" or just uh, "Our cars" (I'm honestly struggling here to come up with a meaningful title >.<). Then you could apply a screen reader only class to this:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  

  Or you could just leave the <h1> out completely, if you're not too bothered by the accessibility report.

  2. I'd leave the alt texts for these icons empty. No reason for them to be there, they're decorative only.

  3. It would be really nice if you added some transition animations to the buttons to make the hover look smoother.

  I hope this helped a bit. Again, good job ^^

  Marked as helpful

  2