I have this component (list-item), that is going to be in a lot of pages of my application, in different variants, that I’m designing. Now every time i have a component like this, I’m struggling getting all the variants on my 4px baseline grid.
The component looks like this:
And should follow some rules:
- All text on 4px baseline grid
- min-height of 60px
- “Left” is required, “Right” is optional
- “Left” and “Right” can hold multiple “Content” elements in horizontal direction
- “Content” element can hold multiple text elements in vertical direction
- Text elements can go over multiple lines
- Most left and right elements can container icons or pills
In the document i made, you can see the problem with every variation:
It’s always like 1 or 2 pixels off, and not sure how to fix this. Someone got some tips on how i can get everything in my variations on the grid?