Guide de style

A style guide is a reference source where you collect and present all of the design decisions for your website. This includes its color scheme, typography, spacing, icons, imagery, and all the visual language used on your site.

Boutons

Couleurs

  • Primary
  • Gold
  • Zinc
  • Primary Lighter
  • Primary Darker
  • Secondary
  • Secondary Lighter
  • Secondary Darker
  • Tertiary
  • Tertiary Lighter
  • Tertiary Darker
  • Quaternary
  • Quaternary Lighter
  • Quaternary Darker
  • Zinc / 900
  • Zinc / 200
  • Zinc / 100

Icônes

See more on HeroIcons v2

Don't forget to use them with the correct viewModel
$viewModels->require(\Hyva\Heroicons2\ViewModel\Heroicons2Outline::class)

Évaluation

Clickable part:

Visual part:

star star star star star

Typographie

Polices web

Exo - Light (300)

Exo - Regular (400)

Exo - Medium (500)

Exo - Semi-bold (600)

Exo - Bold (700)

Mulish - Light (300)

Mulish - Regular (400)

Mulish - Semi-bold (600)

Mulish - Bold (700)

Niveaux de titres

H1 Headings

H2 Headings

H3 Headings

H4 Headings

H5 Headings
H6 Headings

Paragraphes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. bold text example dans le texte rutrum, vulputate lectus eu, elementum risus. Pellentesque sollicitudin sed sem lacinia faucibus. Integer commodo vitae mauris ut aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque venenatis augue eget purus euismod efficitur. Phasellus tristique, mauris nec molestie ultrices, risus sem accumsan risus, eget hendrerit mi turpis sit amet odio. In dignissim a velit sit amet tempus. Morbi ut dui a est malesuada molestie.

Donec vel auctor eros. link text example sed ante ipsum, malesuada vel odio quis, dignissim aliquam nisi. Aenean auctor diam ac nunc aliquam aliquet. Ut ut neque neque. Fusce ac euismod orci, eget porttitor ligula. Nulla vitae justo at neque vehicula fermentum. Suspendisse ut consectetur augue, quis rutrum libero. Cras elit erat, convallis in efficitur eu, ullamcorper ac massa.

Fiabilité du mot de passe

Password Strength: No password

Password Strength: Medium

Password Strength: Strong

Password Strength: Very Strong

Demo:

Accordéon

Loader

Messages

  • Message de succès
  • Message informatif
  • Message d’alerte
  • Message de notification

Modales

Pagination

Formulaires

Champ radio

Champ checkbox

Champ text

Optionnel
  • We'll only use this for spam.

Choice

Textarea

Optionnel

Tables

Order# Date Total Status
000000012 09/08/2022 17,00 € Pending Edit
000000012 09/08/2022 17,00 € Pending Edit
000000012 09/08/2022 17,00 € Pending Edit
000000012 09/08/2022 17,00 € Pending Edit
000000012 09/08/2022 17,00 € Pending Edit

Onglets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem finibus nisi facilisis, eget iaculis eros bibendum. Suspendisse vitae quam blandit, viverra tellus vel, scelerisque sem. Etiam efficitur vehicula ullamcorper. In facilisis euismod odio, sed cursus enim porttitor ut. Sed dictum lectus nec diam congue, quis aliquam tortor porta. Proin rhoncus nulla nisi, non faucibus diam ultricies id. Aliquam ultricies ipsum at nunc auctor, non elementum ligula varius. Quisque ac tempor metus. Curabitur at facilisis est, a imperdiet nulla. Nulla non lacus aliquet ex eleifend blandit. Cras fringilla tortor at nisi porttitor, nec convallis odio tristique.

Duis justo est, consectetur at elit ultrices, dignissim volutpat justo. Phasellus ac lorem vitae eros gravida dapibus. Nunc vitae dui placerat, consectetur ipsum pellentesque, molestie ipsum. Fusce vel lectus sapien. Phasellus venenatis, magna dignissim tincidunt consectetur, turpis magna molestie eros, congue dapibus nulla ante at leo. Aliquam rhoncus congue sapien rutrum viverra.

Mauris convallis velit vel sapien pellentesque aliquet. Morbi a tristique mauris. Nunc laoreet orci in sem ullamcorper interdum. Donec laoreet est quis cursus vulputate. Nulla felis ex, blandit et orci nec, lobortis ullamcorper orci. Praesent fringilla varius ante, at volutpat dui posuere sodales.

Phasellus aliquam vestibulum turpis, eget gravida neque faucibus at. Proin vehicula, mi scelerisque elementum luctus, felis ligula pulvinar enim, et pellentesque est quam eget nibh. Nunc sit amet ex pretium, tempor velit non, finibus turpis. Quisque fermentum convallis nulla, vitae gravida risus ullamcorper vitae. Duis a nunc cursus, scelerisque arcu id, faucibus odio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem finibus nisi facilisis, eget iaculis eros bibendum. Suspendisse vitae quam blandit, viverra tellus vel, scelerisque sem. Etiam efficitur vehicula ullamcorper. In facilisis euismod odio, sed cursus enim porttitor ut. Sed dictum lectus nec diam congue, quis aliquam tortor porta. Proin rhoncus nulla nisi, non faucibus diam ultricies id. Aliquam ultricies ipsum at nunc auctor, non elementum ligula varius. Quisque ac tempor metus. Curabitur at facilisis est, a imperdiet nulla. Nulla non lacus aliquet ex eleifend blandit. Cras fringilla tortor at nisi porttitor, nec convallis odio tristique.

Duis justo est, consectetur at elit ultrices, dignissim volutpat justo. Phasellus ac lorem vitae eros gravida dapibus. Nunc vitae dui placerat, consectetur ipsum pellentesque, molestie ipsum. Fusce vel lectus sapien. Phasellus venenatis, magna dignissim tincidunt consectetur, turpis magna molestie eros, congue dapibus nulla ante at leo. Aliquam rhoncus congue sapien rutrum viverra.

Mauris convallis velit vel sapien pellentesque aliquet. Morbi a tristique mauris. Nunc laoreet orci in sem ullamcorper interdum. Donec laoreet est quis cursus vulputate. Nulla felis ex, blandit et orci nec, lobortis ullamcorper orci. Praesent fringilla varius ante, at volutpat dui posuere sodales.

Phasellus aliquam vestibulum turpis, eget gravida neque faucibus at. Proin vehicula, mi scelerisque elementum luctus, felis ligula pulvinar enim, et pellentesque est quam eget nibh. Nunc sit amet ex pretium, tempor velit non, finibus turpis. Quisque fermentum convallis nulla, vitae gravida risus ullamcorper vitae. Duis a nunc cursus, scelerisque arcu id, faucibus odio.

loader
Chargement...

Bienvenue sur le site PROMODENTAIRE

Ce site est réservé exclusivement aux professionnels de l'art dentaire

Je certifie être un professionnel de l’art dentaire