Alignment between icons and text in the Icon blocks doesn't look centered

[miherb]

You can see this in the page Real estate: https://smpx-admin.tjikko-studio.a2hosted.com/panel/pages/advanced-reality-tool+real-estate

On the template, we can see the image placeholder is aligned with the top of the header.

Possible solutions: 1-Adding alignment options for the group text. (Top, center, bottom) 2-Trying to execute this block from a combination of Figure block and Heading + Text blocks

[miherb]

En complément, permettre de redimensionner l’image.

[shawninder]

All of these images are aligned with the top of the header, it's just that some of the images contain some empty space, or padding, so they look misaligned .

I think the solution here is 2-fold:

• Use images that don't include padding
• Allow the addition of padding around an image in the icon block (therefore shrinking the icon, should that be desired)

I'm hoping we don't need to allow top/center/bottom alignment since I expect top alignment will be best almost all of the time for this block.

What do you think @miherb ?

[miherb]

I'm not a designer, I'm not sure. @PierreDG tu en penses quoi?

[PierreDG]

@shawninder Sur le design de Catherine l'icon est ferré en haut, mais. elle est plus petite (52px)

[miherb]

@shawninder If Hadrien wants to add a custom icon size and wants to center it to replicate that use case but more custom to his taste, could he do it ultimately using Figure and Header and text?

[shawninder]

I don't know, have you tried it?

[miherb]

Just did some experiments. Two things: 1-The icon card image uploaded doesn't display the correct size of the image. As in the Figma files, we were expecting 52 px for these images. So this block is not displaying an icon as it should, unless I am missing something. 2-We can't move images on "Y" axis with neither options. Might be handy to fine tune alignment.

[miherb]

I think the solution here is 2-fold:

• Use images that don't include padding
• Allow the addition of padding around an image in the icon block (therefore shrinking the icon, should that be desired)

Basically what you suggest is that we give to Hadrien the dimensions of the space allocated to images in the icon block and then he can go to photoshop, create an image with the right dimension and padding to fit the alignment desired?

[shawninder]

Hmm no that's not what I mean. I mean tell him not to include padding in the image itself, and add a panel feature to adjust the padding after the fact, with the understanding that the total available width will stay the same, and so the padding added by the Kirby panel would shrink the picture

[miherb]

I see. That sounds good. And would we be able to preview the resize and position? Also, would we be able to edit the padding at will?

[shawninder]

Preview probably will be broken in some places and work in others, padding at will: sure, but that leaves the space open for bad design due to lack of testing on multiple screen sizes and devices

[miherb]

I was thinking in order to allow flexibility for both adjusting the size and position. Knowing Hadrien he will ask us for centering the picture instead of letting up aligned with the top or changing the size etc...

[shawninder]

Is this whole thing about the Icon block? Or are other blocks suffering the same problem too?

[miherb]

The icon block is the one having the issue as you can see on my screens above. On the figure block, the only thing restricting is that we can't adjust images on the "Y" axis. Otherwise, it's quite good. On the Hero or Primary or card we are always filling all the space, so it's not an issue.