AIDE
Grilles, listes et cartes
Explorer les variations et comprendre comment les appliquer
Grilles et Listes
Lorsqu’on souhaite présenter une liste de services, deux options principales s’offrent à nous : la grille ou la liste.
Hiérarchie des éléments contenus
Une liste, comme une grille, comporte des éléments contenus :
Ceci est une liste
Voici une liste constituée de trois cartes
Intitulé de mon accompagnement
60 €
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo.
Intitulé de mon accompagnement
60 €
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo.
Intitulé de mon accompagnement
60 €
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo.
Ceci est une grille
Voici une grille constituée de deux lignes, comportant chacune trois cartes, soit six cartes au total.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Variations sur le nombre d’éléments
Il est possible de placer autant d’éléments que souhaité dans une liste ou une grille. Il conviendra toutefois de prendre en compte :
– la longueur de la liste (idéalement de 3 à 10 éléments)
– le nombre d’éléments dans une grille, en fonction de la largeur / hauteur de la page. L’exemple ci-dessous montre les variations et limites d’une grille.
Variations du nombre d’éléments d’une grille
À noter que la grille s’adapte à la taille de l’écran de l’ordinateur, la tablette ou le mobile
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
On constate dans le dernier exemple, comportant quatre cartes, que le design des boutons n’est pas satisfaisant. Heureusement, nous avons des solutions si on souhaite absolument conserver ce design à quatre cartes.
Variations des cartes
L’exemple ci-dessous montre les variations possibles sur les cartes :
– Avec ou sans pastille de prix
– Avec ou sans boutons « En savoir plus ».
– Avec des boutons juxtaposés ou superposés.
60 €
Pastille prix ✅ | En savoir plus ✅
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Pastille prix ❌ | En savoir plus ✅
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Pastille prix ✅ | En savoir plus ❌
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Pastille prix ❌ | En savoir plus ❌
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Boutons superposés
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Boutons superposés
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
60 €
Un seul bouton
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Un seul bouton
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis ut nisl et pretium. Donec cursus sem quis neque sagittis commodo. Curabitur id dolor lacus. Praesent lacinia feugiat iaculis. Fusce pharetra tincidunt sapien, non aliquam blandit.
Ce dernier exemple nous montre une solution pour utiliser une grille à quatre cartes, tout en conservant un ou deux boutons. Le tout dans une variation avec ou sans pastille prix.