UI kit

Couleurs

Pink
#e51a50
Blue
#112134
Black
#000000
White
#ffffff
Grey
#f3f3f3
Grey Dark
#c6c6c6
Error
#fc2525
Warning
#d97706
Success
#436a5b

Typographie

Titre : Nunito Sans

Corps de texte : Roboto

Grid

1
1
1
1
1
1
1
1
1
1
1
1
10 colonnes + 1 offset
4 colonnes + 1 offset
3 colonnes + 1 offset
1 colonnes + 2 offset
3 / 6 / 9
9 / 6 / 3
invisible / 6 / 9
9 / 6 / invisible
12 / 10 colonnes + 1 offset / 4 colonnes + 1 offset
12 / 10 colonnes + 1 offset / 5 colonnes + 1 offset

Headings

Titre primary

Titre secondary

Titre tertiary

Titre quaternary

Titre quinary

Buttons

Wysiwyg

Titre de niveau 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo lacus, suscipit id porta in, varius non dolor. Quisque fringilla congue justo at pharetra. Suspendisse potenti. Morbi dapibus mollis velit.

Titre de niveau 3

Sed nec nunc velit. Nullam blandit dapibus lorem, ac maximus massa facilisis id. Ceci est un lien. Integer dapibus urna ac magna rutrum ultrices. Vivamus cursus nulla ipsum, et convallis odio porttitor et.

Titre de niveau 4

  • Élément de liste non ordonnée 1
  • Élément de liste non ordonnée 2
  • Élément de liste non ordonnée 3
  1. Élément de liste ordonnée 1
  2. Élément de liste ordonnée 2
  3. Élément de liste ordonnée 3

Ceci est une citation (blockquote). Elle permet de mettre en avant un texte important ou une déclaration.

Un bouton

Un paragraphe final pour clore cette démonstration du WYSIWYG avec toutes ses possibilités de mise en forme standards.

Formulaire

Cases à cocher
Cases à cocher requises
Acceptance
Options radio
Options radio requises
Glissez & Déposez pour uploader OU
Taille max : 2 Mo Formats acceptés : PDF, IMAGE/*
Glissez & Déposez pour uploader OU
Taille max : 5 Mo Formats acceptés : PDF, DOC, DOCX
Glissez & Déposez pour uploader OU
Maximum : 3 fichiers Taille max : 2 Mo Formats acceptés : PDF, DOC, DOCX, JPG, PNG

Messages & Alertes

Info !

Ceci est une information.

Félicitations !

Votre message a été envoyé avec succès. Nous vous répondrons dans les plus brefs délais.

Breadcrumb

Pagination

Chips

Titre court Titre court avec icône Titre long avec icône pour tester l'alignement vertical et horizontal Un titre de chip beaucoup plus long pour tester le comportement du composant sur plusieurs lignes si nécessaire

Cards - Events

Catégorie 1 Catégorie 2 Catégorie 3 Le titre est super long qu”est ce qu’il se passe
Le
De à

Événement avec 3 catégories

Le

Événement sans catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Formation Atelier
Le
À

Événement avec 2 catégories

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Conférence
Du au

Événement avec 1 seule catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Atelier
Du au
À

Autre événement avec 1 catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Du au
De à

Événement sans catégorie (test long titre)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Cards - News

Innovation Tech

Actualité avec 2 catégories

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Cards - Question

Question courte ?

Une réponse courte et simple.

Une question avec un titre de longueur moyenne pour tester le retour à la ligne ?

Une réponse plus longue avec du gras et des italiques pour tester le rendu WYSIWYG à l'intérieur de la carte question.

Est-ce que le composant supporte une question extrêmement longue qui pourrait s'étendre sur plusieurs lignes sur mobile et même sur desktop ?

Oui, et il supporte aussi les listes à l'intérieur :

  • Premier point important
  • Deuxième point avec un lien interne
  • Troisième point pour conclure

Le tout est encapsulé dans une classe wysiwyg.

Cards - Page

Page standard avec vignette

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet laoreet risus eget consequat. Phasellus lobortis magna id lacus ultrices lacinia.

Cards - Contact

Cards - Offre d'emploi

Cards - Fichier

PDF

Plan Stratégique 2024

01/03/2024 1.8 MB
DOCX

Formulaire d'inscription

15/02/2024 450 KB

Tabs

Titres longs

Ceci est un exemple de contenu court pour tester l'alignement et le rendu initial du composant d'onglets.

Titres courts

Contenu de l'onglet 1 avec un titre court.

Popin