All solutions

staggering of the cards caught me off guard lol

i came up with a decent solution; i used a function to detect screen size and adjusted the staggering of the cards accordingly.

also added some shadows around the cards cause it felt "flat" and put a little falling animation on the stars. i think this brings highlight to the rating...

i mean, this is a social proof card after all! 😂

this was interesting.

• custom accordion using typescript
• added small animations in desktop and mobile
• softened the transitions on the accordion

enjoy ✌

I love how deceiving a simple card component like this can be. 😈

derped this one uploading a little early; screenshot isn't reflecting the padding, but it reflects in browser.

Focused on the logic. Passing data via the provided json. Not pixel perfect in design, but the component reusability is here.

Too bad there isn't data for the total tests for a more accurate percentage 😜

bg's cause me issues sometimes -.-;

hmm. the screen shot isn't accurate? looks how it is supposed to in browser?

anyone know what's up with that?

edit: looks fine in chrome, but not firefox?

edit2: nevermind, i debugged. screenshot is not updated though, but component is accurate. :)

I had fun with this one. Getting more familiar with lifting props up. This really solidified it for me, I think!

Hey. This is my first submission!