Styleguide

Les titres

Hero title
Banner title
Section title
Footer title
Card title

Les Call to Actions

Primary Secondary Accent Default No SplitText

SVG / ICONS

Réseaux sociaux

Animations SplitText

Partage réseaux sociaux

Modal FancyBox

Déclarer un @yield() de votre choix dans app.blade.php.
Exemple ici: @yield('modal-styleguide')

Puis inclure votre markup de modal dans @section('modal-styleguide')

            <button class="cta cta-primary" data-fancybox="modal-styleguide" data-src="#modal-styleguide"> 

              Afficher modal styleguide 

            </button>
            

            

            @section('modal-styleguide') 

              // Soit un include de votre partial 

              @include('partials.modal-styleguide') 

            

              // Ou bien le markup directement ici de cette façon 

              <div id="modal-styleguide" style="display:none;"> 

                 <div class="tinymce"> 

                  [...] 

                 </div> 

              </div> 

            @endsection

Gabarits d'image

thumbnail (150x150)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'thumbnail', placeholder: true)

Ce gabarit ne garde pas le ratio original. Il crop cette dernière en 150px par 150px.

small (480x480)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'small', placeholder: true)

Ce gabarit garde le ratio original. Il réduit la largeur ou la hauteur à 480px en fonction de son format, seulement si cette dernière possède une hauteur ou une largeur supérieure à cette valeur.

medium (768x768)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'medium', placeholder: true)

Ce gabarit garde le ratio original. Il réduit la largeur ou la hauteur à 768px en fonction de son format, seulement si cette dernière possède une hauteur ou une largeur supérieure à cette valeur.

large (1280x1280)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'large', placeholder: true)

Ce gabarit garde le ratio original. Il réduit la largeur ou la hauteur à 1280px en fonction de son format, seulement si cette dernière possède une hauteur ou une largeur supérieure à cette valeur.

xlarge (1920x1920)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'xlarge', placeholder: true)

Ce gabarit garde le ratio original. Il réduit la largeur ou la hauteur à 1920px en fonction de son format, seulement si cette dernière possède une hauteur ou une largeur supérieure à cette valeur.

full (original ou scaled 2560px)

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, size: 'full', placeholder: true)

Ce gabarit garde le ratio original. Il appelle le fichier original WordPress, généralement plafonné à 2560px avec le suffixe -scaled quand l'image uploadée dépasse ce seuil.

Responsive

                        Exemple d'utilisation : 

                        MediaHelper::displayImage($thumbnailID, srcset: true, placeholder: true)

Cette méthode applique des srcset et sizes à l'image.

Modal Styleguide