Demo
Page de test : un exemplaire de chaque snippet MikiEdit, pour vérifier leur rendu et leurs comportements (galerie/carrousel + visionneuse, vidéos, accordéon, animations…) sur ce thème.
Texte
Titre
Titre niveau 1
Titre niveau 2
Titre niveau 3
Titre niveau 4
Texte
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Voici un lien et un peu de texte en italique.
- Premier élément de liste
- Deuxième élément de liste
- Troisième élément de liste
- Étape une
- Étape deux
- Étape trois
Une citation pour vérifier le style des blockquotes.
Tableau
| Produit | Référence | Quantité | Prix unitaire | Statut |
|---|---|---|---|---|
| Chaise de bureau | REF-001 | 12 | 89.00 CHF | En stock |
| Table basse | REF-002 | 4 | 149.00 CHF | En stock |
| Lampe sur pied | REF-003 | 0 | 59.00 CHF | Épuisé |
| Étagère murale | REF-004 | 7 | 39.00 CHF | En stock |
Média
Galerie (avec visionneuse)
Galerie — variante 4 colonnes
Carrousel (autoplay + visionneuse)
Image (avec légende, centrée, largeur moyenne)
Icône
Vidéo externe
Vidéo (fichier)
Mise en page
Colonnes — 2 colonnes
Colonne A
Contenu de la première colonne.
Colonne B
Contenu de la deuxième colonne.
Colonnes — 3 colonnes
Carte 1
Texte descriptif court.
Carte 2
Texte descriptif court.
Carte 3
Texte descriptif court.
Colonnes — fluide
Bloc 1
S'adapte selon la largeur disponible.
Bloc 2
S'adapte selon la largeur disponible.
Bloc 3
S'adapte selon la largeur disponible.
Bloc 4
S'adapte selon la largeur disponible.
Section — padding 0
Une couleur par taille, pour voir la respiration verticale d'un coup d'œil : 0 / S / M (défaut) / L.
Aucune respiration verticale (--py-0).
Section — padding S
Respiration réduite (--py-sm).
Section — padding M (défaut)
Respiration par défaut, sans modificateur.
Section — padding L (fond couleur)
Section à fond sombre
Bande pleine largeur avec un padding vertical important (--py-lg) et une couleur de fond posée en style inline.
Section (fond image, bord à bord)
Section plein cadre
Groupe (conteneur neutre)
Premier bloc dans le groupe.
Deuxième bloc dans le groupe.
Flex
Responsive
Espace
Une couleur par taille (du plus clair au plus foncé), pour voir la hauteur de chaque espace sans avoir à la mesurer.
Espace — xs :
Espace — sm :
Espace — défaut :
Espace — lg :
Espace — xl :
Espace — 2xl :
Séparateur
La marge autour du trait est ici contenue dans un fond coloré (au lieu de rester invisible) pour comparer les 5 tailles.
m-xs
m-sm
m-md
m-lg
m-xl
Composants
Boutons
Bouton plein Bouton contour Bouton sombreBouton icône
En savoir plusAccordéon
-
L'éditeur front qui permet de composer une page à partir de ces snippets.
-
En le glissant depuis le panneau de snippets vers la zone de contenu.
-
Oui, chaque bloc est déplaçable, duplicable et supprimable.
Accordéon — plusieurs volets ouverts
-
Peut rester ouvert en même temps que les autres.
-
Idem, sans fermer le précédent.
Image + texte
Image + texte — inversé
Image à gauche
Même composant, avec l'image basculée à gauche via le bouton « Inverser ».
Bannière
Bloc plein cadre : elle s'échappe volontairement de la colonne de contenu jusqu'aux bords de l'écran.
Menu
Les animations sont montrées ici sur une image plutôt qu'un texte : le mouvement s'y remarque bien plus facilement.