Hero

Bannière de haut de page destiné à attirer l'attention.

Code de base

Aperçu

Mode responsive

Bonjour Michel

Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.

                                                        <section class="hero">
                                <div class="hero-body">
                                    <div class="container">
                                        <h1 class="title">Bonjour Michel</h1>
                                        <h2 class="subtitle">Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.</h2>
                                    </div>
                                </div>
                            </section>

DO

Pour l'utiliser il suffit d'une section.hero, directement suivie d'une div.hero-body
Sans spécifier de couleur le Hero de base est blanc
Il n'est pas restreint en taille, c'est son contenu qui le définit
Le contenu n'est pas centré par défaut mais il est possible de forcer le centrage en ajoutant la class .hero.is-centered

Utilisation avec fond de couleur

Aperçu

Mode responsive

Bonjour Michel

Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.

Bonjour Michel

Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.

                                                        <section class="hero is-info">
                                <div class="hero-body">
                                    <div class="container">
                                        <h1 class="title">Bonjour Michel</h1>
                                        <h2 class="subtitle">Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.</h2>
                                    </div>
                                </div>
                            </section>
                            <br>
                            <section class="hero has-background-tertiary">
                                <div class="hero-body">
                                    <div class="container">
                                        <h1 class="title has-text-tertiary-invert">Bonjour Michel</h1>
                                        <h2 class="subtitle has-text-tertiary-invert">Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.</h2>
                                    </div>
                                </div>
                            </section>

DO

L'option .is-info est disponible et les textes automatiquement passés en blanc

WARNING

Dans le cas où vous voudriez utiliser une autre couleur, via .has-background-xxx, pensez à utiliser .has-text-xxx-invert sur les éléments de votre Hero

Utilisation avec image de fond

En déclarant votre Hero avec .is-primary, les textes de celui-ci passeront en blanc.
Le Hero attend de votre part une image de fond, en ajoutant la class has-background.

Aperçu

Mode responsive

Message de bienvenue

Bonjour Michel

Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.

                                                <section class="hero is-primary has-background" style="background-image: url(https://picsum.photos/id/1/1500/600);">
                        <div class="hero-body">
                            <div class="container">
                                <p class="suptitle">Message de bienvenue</p>
                                <h1 class="title">Bonjour Michel</h1>
                                <h2 class="subtitle">Fugiat velit dolor ad adipisicing id quis enim cupidatat Lorem dolore aute excepteur tempor.</h2>
                                <button class="button">Click me !</button>
                            </div>
                        </div>
                    </section>

Ajouter un lien de retour

Utilisez .hero-back sur votre lien.

Aperçu

Mode responsive

Retour

Bien connecté

Internet garanti

Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

                                                <section class="hero">
                        <div class="hero-body">
                            <a class="hero-back">Retour</a>
                            <div class="container">
                                <p class="suptitle">Bien connecté</p>
                                <h1 class="title">Internet garanti</h1>
                                <p class="subtitle">Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.</p>
                            </div>
                        </div>
                    </section>

Superposer le contenu qui suit sur un hero

Aperçu

Mode responsive

Bien connecté

Internet garanti

Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

Bien connecté

Internet garanti

Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

                                                        <section class="hero is-info is-overlapped">
                                <div class="hero-body">
                                    <div class="container">
                                        <p class="suptitle">Bien connecté</p>
                                        <h1 class="title">Internet garanti</h1>
                                        <p class="subtitle">Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.</p>
                                    </div>
                                </div>
                            </section>
                            <section class="section">
                                <div class="container">
                                    <div class="box">
                                        <div class="box-content">
                                            <p class="suptitle">Bien connecté</p>
                                            <h1 class="title">Internet garanti</h1>
                                            <p class="subtitle">Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.</p>
                                        </div>
                                    </div>
                                </div>
                            </section>

DO

Effectuez un overlap de votre contenu, en ajoutant la classe .is-overlapped sur la section Hero.

DON'T

Les classes .has-overlap, .is-overlap deviennent obsolètes
Les classes is-overlap-(small|medium|large)-(mobile|tablet|desktop) ont été supprimés

Superposer le contenu qui suit sur un hero avec une image de fond

Le Hero attend de votre part une image de fond, en ajoutant la class has-background.
Effectuez un overlap de votre contenu sur le hero en en ajoutant las class is-overlapped sur la section Hero

Aperçu

Mode responsive

Bien connecté

Internet garanti

Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

Bien connecté

Internet garanti

Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.

                                                <section class="hero is-primary has-background is-overlapped" style="background-image: url(https://picsum.photos/id/1/1500/600);">
                        <div class="hero-body">
                            <div class="container">
                                <p class="suptitle">Bien connecté</p>
                                <h1 class="title">Internet garanti</h1>
                                <p class="subtitle">Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.</p>
                            </div>
                        </div>
                    </section>
                    <section class="section">
                        <div class="container">
                            <div class="box">
                                <div class="box-content">
                                    <p class="suptitle">Bien connecté</p>
                                    <h1 class="title">Internet garanti</h1>
                                    <p class="subtitle">Profitez d'Internet dès l'abonnement et même en cas de coupure grâce à une clé 4G dans les nouvelles offres Bbox.</p>
                                </div>
                            </div>
                        </div>
                    </section>