Align text on association cards

[FalHuor]

Alignement du texte des cards de la page fédération. J'ai ajouté un align-items pour avoir le titre centré verticalement, ce qui donne cela :

à la place de

[hugoattal]

Top 😄 ! Mais si je peux me permettre, en terme d'UX, centrer le titre verticalement est pas une super idée 😕... Le fait de le fixé en haut garde une consistance sur la hauteur du début du titre.

D'ailleurs, dans ton exemple, y'a aussi un petit problème avec des noms d'écoles très long... Peut être que ça serait pas mal de mettre un overflow: hidden avec un text-overflow: ellipsis et un title pour quand même avoir le nom complet 🤔...

En plus, en terme d'UI, si un titre à une ligne de plus ou de moins que celui d'à coté, les lignes ne sont plus alignées.

[FalHuor]

C'est peut-être qu'un avis perso, mais j'ai l'impression de voir que ça et je trouve ça limite horrible d'avoir un si grand espace vide pour rien si des noms sur la ligne sont aussi longs :3

Après du coup entre un titre sur 2 lignes et un sur 3, s'ils sont centrés verticalement, ça me paraît presque logique qu'ils soient décalés d'une demie ligne du coup non ?

[hugoattal]

Si le vide te gêne, on peut peut-être limiter le titre à 2 lignes, puis le tronquer 🤔. Mais l'alignement doit rester consistant (et pas décalé) 😕...

Voilà un petit article que j'ai trouvé sur les best practices pour les cards : https://uxdesign.cc/8-best-practices-for-ui-card-design-898f45bb60cc

[FalHuor]

Ouai, j'ai cherché aussi un peu de mon côté, mais effectivement, juste, je trouve ça pas beau 😶

[FalHuor]

Updated

(L'image est cassée parce que j'ai refait mon environnement)