Styleguide
Texte
text
Lorem ipsum dolor sit amet, exemple consectetur adipiscing elit. Suspendisse porta venenatis sodales. Fusce tristique, enim porta pharetra porta, nulla est porttitor lectus, eu malesuada dui elit ac leo. Fusce in lectus mi. In ut varius lorem, ac varius nisl. Duis venenatis iaculis arcu ac ultricies. Fusce eu eros vel risus varius gravida sed smalla nulla. Nulla nunc arcu, porttitor vitae lobortis non, tempor quis enim. Proin luctus non elit a mollis. Maecenas aliquam3, nisi ac vehicula maximus 3, lorem mi rutrum ex, non malesuada elit felis at massa. Morbi sed arcu urna. Phasellus nec efficitur lorem, vitae congue dui. Sed erat mauris, condimentum vitae fringilla at, tincidunt et metus. Duis porta felis eu orci consectetur, in aliquet risus venenatis.
text.medium
Hello world
text.bold
Hello world
text.size-display
Hello world
text.size-1
Hello world
text.size-2
Hello world
text.size-3
Hello world
text.size-4
Hello world
text.size-5
Hello world
text.size-6
Hello world
ul > li
- Nuts
- Cream
- Maple syrup baby
ol > li
- Nuts
- Cream
- Maple syrup baby
dl
- Term
- Description
- Term
- Description
- Term
- Description
quote
La nuit porte de garage.
blockquote, q
La nuit porte de garage
linkSee bananas
p sub
hello 2
p sup
hello 2
smallpetit
label
wysiwyg
wysiwyg
Gros titre super important h2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
- Dance floor
- Heavy music
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
* Lorem, ipsum dolor sit amet consectetur adipisicing elit.
- Bananes
- Chocolat
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Titre de section h3
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Titre de sous-section h4
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Titre de sous-sous-section h5
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Titre de sous-sous-sous-section
Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam? Lorem ipsum dolor sit, elit. Totam repudiandae perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Faux titre en strong avec br
Lorem ipsum dolor sit, elit. Totam repudiandae
perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere
eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
Lorem ipsum dolor sit, elit. Totam repudiandae
perferendis adipisci magni culpa numquam officiis itaque dolore, esse facere
eaque magnam placeat accusantium iusto dolores, non quam? A, ipsam?
| Stranger | 2323 |
| Danger | 298374.29847298347298% * |
| Loser | 0 |
*Incroyable
Buttons
button.to-right
button.small.to-bottom
button.secondary
button.icon.to-bottom
button.secondary.icon.small.secondary
button.icon.small.reveal-text
button.error
button.success
button.outline
button.block
button.carousel
button.carousel.active
button.close
button-group
button-group > .button.small
button-group > .button.large
button-group > .button.outline
button-group > .button.rounded
Badges
badgeAnnulé
badge.smallExample
badge.outlineExample
badge.secondary.outline.roundedExample
badge-group
badge-group > .badge.small
badge-group > .badge.large
badge-group > .badge.outline
badge-group > .badge.rounded
Forms and inputs
input
input.small
input.large
input
input.small
input.large
input
input
input
input
input
input
input
input
input
input
input
input
input
input
input
input
Exemple d'erreur
input
Exemple de message
input
input
input
input
input
input
Contact form
input
Contactez-nous
On est toujours heureux de vous lire.
Newsletter form
input
Infolettre
Goutez à nos ptites recettes coquettes par courriel.
Cards
.card
L'envers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20 septembre 2021
au 3 novembre 2021
