3 column preview card using Flexbox

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted about 1 year ago

  Hello!

  Regarding the CSS it's actually quite nice!

  Some few suggestions regarding the semantics:

  • Learn More is actually an anchor (<a>) tag and not a button. (buttons are for interactiveness on the page and anchor tags lead the user to a different page and here learn more would most likely lead them somewhere else so using a anchor tag seems to make more sense). So in your code replace <button> with <a> and add display: inline-block to the existing CSS styles. (we add inline-block or block to anchor tags because by default they are inline elements and paddings or margins wouldn't affect them if they are inline)
  • Generally, it is recommended to only use 1 <h1> per page as it represents the main heading or topic of a page and currently, you have 3 so instead of using 3 h1s you can change them with h2s. But since the page should at least contain a h1 to let the SEOs know the main theme/content of the page you can add a h1 to the page but make it only visible for screen readers. You can do something like 3 column card component as a text and just add a sr-only class with the following CSS:

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  

  This way the design won't be disrupted with h1 while still being pretty accessible to the SEOs and screen readers!

  With these few tweaks here and there your solution would be quite accessible!

  Good luck!

  Marked as helpful

  1

  ---

  

  P

  Franklin Gomez•180

  @frankgomezdevPosted about 1 year ago

  @adityaphasu Thank you! I really appreciate the well-thought-out response and the examples! Implemented the tweaks and it looks better.

  1