Profile card component

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I am still learning accessibility practices. I have to go back and fix issues with some of my past solutions.

  Marked as helpful

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  You want to wrap the card div inside a Main tag. All "main" content should be inside a Main tag for accessibility reasons.

  Marked as helpful

  0

  ---

  

  P

  Aleksander Tysklind•860

  @outerpreneurPosted almost 3 years ago

  @brodiewebdt Thank you, I have placed the main tag. though it was the same thing as the body. I've been reading more about it and it's purpose. Thanks for the tip!

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I used negative margin to move the image into place. I would think transform translate would work as well. As you can see from the other comments that there are multiple way to get things done.

  Wrap your container div in a Main tag and add an ALT tag to the images and it will clear the accessibility warnings. You can leave the ALT tags empty in this case.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  0

  ---

  

  P

  Aleksander Tysklind•860

  @outerpreneurPosted almost 3 years ago

  @brodiewebdt Thank you, David. Yes, some of the tips above helped me. I have added all the all tags. I'll make a better effort to include them in future mock projects. As for the Main tag, I believe I use a container called card already, is the main div wrapper. Thanks for the tip for Axe, I'm testing it.

  0
• 

  Anthony Weathersby•350

  @acweathersbyPosted almost 3 years ago

  Hey @outerpreneur,

  One solution for dealing with the position of the avatar img is to make it an absolute positioned element, and then set its bottom position to bottom:-48px, which is negative half the height of the image. This will center the image on the bottom edge of the upper-card element.

  position:relative will also need be added to the upper-card element to insure the position of the image is based on its parent container.

  Finally, add enough padding to the next element, middle-card, to compensate for the overlap of the image into this element's container. padding-top:50px should do the trick.

  Marked as helpful

  0

  ---

  

  P

  Aleksander Tysklind•860

  @outerpreneurPosted almost 3 years ago

  @acweathersby Thank you so much! that worked very well. I will look more into more in-depth so I can understand how it works. Thanks a bunch again

  0
• 

  Miguel Silva•510

  @migsilva89Posted almost 3 years ago

  You should add a class relative to the back items and absolute to the image, so then you have freedom to move it as you want.

  I did the same project with Tailwind. https://profile-card-component-silk-gamma.vercel.app/ Keep going.

  Marked as helpful

  0

  ---

  

  P

  Aleksander Tysklind•860

  @outerpreneurPosted almost 3 years ago

  @migsilva89 Thank you!! looks good now. Great work!!

  0