Documentation

Class et ID

Class

à appliquer sur la colonne

  • .quote ajoute des guillemets qui vont entourer une citation
  • .cercle ajoute un badge en arriere-plan dans l'esprit du logo (comme sur les colonnes "selected by")
  • .column-highligthed / colonnes en surbrillance ajoute un cadre sur la colonne
  • .grey ajoute un fond gris
  • .beige ajoute un fond beige
  • .white ajoute un fond blanc et une légère marge inférieure

à appliquer sur la ligne

  • .align-col égalise la hauteur des colonnes sur la ligne
  • .column-highligthed / colonnes en surbrillance ajoute un cadre sur la colonne
  • .grey ajoute un fond gris
  • .beige ajoute un fond beige
  • .grille à appliquer sur deux lignes, permet de fusionner les deux lignes et de rapprocher les colonnes

à appliquer sur le widget image

  • .with-btn lorque l'image est un lien, appliquer la class with-btn permettra d'afficher le titre donné à l'image au survol de celle-ci

ID

à appliquer sur la ligne

  • #carrousel ID à appliquer sur une ligne qui possède deux colonnes, d'abord une colonne de texte puis une colonne contenant le widget carrousel. Permet d'afficher le carrousel en pleine largeur et la colonne de texte par dessus dans un encadré blanc transparent.

Cette colonne possède la class .quote

Exemple cercle

Cette colonne possède la class "colonne en surbrillance"

Cette ligne possède la class .beige et .align-col

Cette colonne possède la class .white

Libero, eaque! Rerum ipsa, consequuntur occaecat nobis voluptatibus, blandit delectus rhoncus earum tempor? Wisi provident, laborum facilis. Occaecat, consectetur, voluptatibus condimentum cras! Ad minima! Fusce, arcu platea, augue dolorem quibusdam placeat eiusmod ratione convallis dolores omnis? Sed wisi torquent maecenas!

Cette colonne possède la class .white

Ducimus fringilla laboriosam blanditiis veritatis arcu quas quod laborum quisque magnam, euismod, massa nobis congue veniam lobortis asperiores quaerat velit dignissimos pellentesque, ea sunt? Parturient laoreet tincidunt id, minus netus, dui vitae, laboris? Facere alias ullam, nec quam sodales rutrum corrupti nobis leo? Luctus luctus, illo lacinia dolore curabitur dignissim deserunt? Voluptatem. Dignissim, netus minus odit, dolorum ipsam rhoncus, incididunt!

Les deux images de chaque côté de cette colonne possèdent la classe .with-btn

Cette class permet d'afficher le titre de l'image au survol.

Pour une mise en page harmonieuse, il vaut mieux choisir une taille personnalisée pour l'image puis recadrer.

Cette ligne possède la class .grey

Cette colonne possède la class .white

Libero, eaque! Rerum ipsa, consequuntur occaecat nobis voluptatibus, blandit delectus rhoncus earum tempor? Wisi provident, laborum facilis. Occaecat, consectetur, voluptatibus condimentum cras! Ad minima! Fusce, arcu platea, augue dolorem quibusdam placeat eiusmod ratione convallis dolores omnis? Sed wisi torquent maecenas!

Cette colonne possède la class .white

Libero, eaque! Rerum ipsa, consequuntur occaecat nobis voluptatibus, blandit delectus rhoncus earum tempor? Wisi provident, laborum facilis. Occaecat, consectetur, voluptatibus condimentum cras! Ad minima! Fusce, arcu platea, augue dolorem quibusdam placeat eiusmod ratione convallis dolores omnis? Sed wisi torquent maecenas!