-vertical & -horizontal-lg..-vertical .-column-lg, .-column-definition-width-4 & .-column-definition-text-align-right :
HTML
Pour un affichage vertical en Mobile et horizontal en desktop il faut ajouter les classes -vertical & -horizontal-lg.
- Terme long lorem ipsum dolor sit amet lorem ipsum dolor :
- définition lorem ipsum dolor sit amet.
- Terme court :
- définition lorem ipsum dolor sit amet.
Exemple mobile vertical -> column-lg 4 avec les classes .-vertical .-column-lg, .-column-definition-width-4 & .-column-definition-text-align-right :
- Terme lorem ipsum dolor sit amet :
- Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
- Terme court :
- Définition un lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
- Définition deux lorem ipsum dolor sit amet lorem ipsum dolor sit amet
- Définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
-->
PUG
// Hybrid
.title-exemple
h4 Pour un affichage vertical en Mobile et horizontal en desktop il faut ajouter les classes #[code -vertical] & #[code -horizontal-lg].
dl.definition-list-version2.-vertical.-horizontal-lg
.item
dt Terme long lorem ipsum dolor sit amet lorem ipsum dolor :
dd définition lorem ipsum dolor sit amet.
.item
dt Terme court :
dd
strong définition lorem ipsum dolor sit amet.
.documentation-space
.title-exemple
h4 Exemple mobile vertical -> column-lg 4 avec les classes #[code .-vertical] #[code .-column-lg], #[code .-column-definition-width-4] & #[code .-column-definition-text-align-right] :
dl.definition-list-version2.-vertical.-column-lg.-column-definition-text-align-right.-column-definition-width-4
.item
dt Terme lorem ipsum dolor sit amet :
dd Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
.item
dt Terme court :
dd Définition un lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
dd Définition deux lorem ipsum dolor sit amet lorem ipsum dolor sit amet
dd Définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet