Exemple de DCE

C'est un contenu de type 'card' ou il est possible de mettre une image, un titre, un texte et un lien

Comme paramétrage, nous avons :

1. Au niveau de la carte
   1. Couleur de fond
   2. Opacité de la couleur de fond
   3. Lien 
   4. suppression du shadow sur le hover
   5. prendre 100% de la hauteur
   6. Ajouter un bord
   7. Ajouter une marge
   8. Ajouter un padding
2. Au niveau de l'image
   1. Mettre un eimage
   2. Opacité de l'image
   3. Adaptation à la taille disponible
   4. Image en background
   5. Couleur de fond de la partie titre et texte
   6. Opacité de la couleur de fond
3. Au niveau de la partie qui contient le titre et le texte
   1. Margintop
   2. Unité de mesure du margin
4. Au niveau du titre
   1. Hierarchisation du titre
   2. Position horizontale
   3. Couleur
   4. Couleur de fond
   5. Opacité de la couleur de fond
   6. Padding
5. Au niveau du texte
   1. Position horizontale
   2. Couleur
   3. Couleur de fond
   4. Opacité de la couleur de fond
   5. Padding

Contraintes :

• En l'état, il doit être utilisé avec les contenus de type container car il prend toute la largeur disponible.
• Au niveau de la hiérarchie des titres, il faudrait sans doute ajouter la possibilité de ne pas mettre de hiérarchie
• Pas possible de mettre dans un <ul><li>

Ce contenu est utilisé pour mettre un bandeau sur la page d'accueil, ou toute autre page.

Il sera, en principe le premier contenu de la page.

Comme paramétrage, nous avons :

1. Dans l'onglet général
   1. La couleur de fond
   2. Le lien
2. Dans l'onglet 'rendu sur desktop'
   1. Possibilité de mettre une image pour les écran > 1200px
   2. Possibilité de mettre une image pour les écran > 992px
   3. Possibilité de mettre une image pour les écran > 576px
3. Paramètre du titre
   1. cacher le titre
   2. Position horizontale
   3. Position verticale
   4. couleur de fond
   5. Margin
   6. Padding
4. Paramètre du texte
   1. Position verticale
   2. Position horizontale
   3. Position absolue
   4. Couleur de fond
   5. Margin
   6. Padding

Ce contenu est utilisé pour mettre un bandeau sur la page d'accueil, ou toute autre page.

Les paramètres sont : 

• Le Lien
• Le titre pour l'accessibilité
• La hierarchie du titre (Si c'est un call tu action alors le titre est invisible)
• Le alt text de l'image
• L'image

On pourrait amélioré en supprimant le champ alt text et en prenant celui de l'image.

Le H2 est automatiquement mis en 'sr-only'