Card

Les cartes permettent d'afficher une image et un contenu, dans différentes orientations possibles

Code de base

Aperçu

Mode responsive

Subtitle

Title lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="card">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Title lorem</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>

Carte inversée

Pour placer l'image en bas de la carte, utilisez la facette is-reversed (ancien code, déprécié : is-inverted, pensez à mettre à jour votre HTML)

Aperçu

Mode responsive

Subtitle

Title lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="card is-reversed">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Title lorem</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate
                                    vera.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>

Cartes côte-à-côte

Pour mettre plusieurs cartes côte-à-côte, utilisez le layout que vous souhaitez et insérez-y le code pour vos cartes. Exemple ici avec deux colonnes.

Aperçu

Mode responsive

Carte classique

.card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

Carte renversée

.card.is-reversed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="columns">
                            <div class="column">
                                <div class="card">
                                    <div class="card-image">
                                        <figure class="image">
                                            <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                        </figure>
                                    </div>
                                    <div class="card-content">
                                        <p class="suptitle">Carte classique</p>
                                        <h3 class="title is-3">.card</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                            <button class="button is-tertiary">Button Lorem</button>
                                    </div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="card is-reversed">
                                    <div class="card-image">
                                        <figure class="image">
                                            <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                        </figure>
                                    </div>
                                    <div class="card-content">
                                        <p class="suptitle">Carte renversée</p>
                                        <h3 class="title is-3">.card.is-reversed</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                            <button class="button is-tertiary">Button Lorem</button>
                                    </div>
                                </div>
                            </div>
                        </div>

DO

Si les cartes côte à côte ont une hauteur différente, utiliser la classe .is-fullheight sur l'élément carte pour aligner le bas des cartes.

Carte horizontale

Pour autoriser le changement de sens, utilisez la classe is-horizontal. Notez que le texte ne sera plus centré. La place prise par l'image peut être augmentée grâce à différentes facettes allant de is-1 à is-4. Vous pouvez ensuite centrer les contenus en utilisant la classe is-vcentered

Aperçu

Mode responsive

Subtitle

Carte horizontale par défaut (illustration à 20%)

Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Subtitle

Carte horizontale (illustration à 30%)

Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Subtitle

Carte horizontale (illustration à 40%)

Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Subtitle

Carte horizontale (illustration à 50%)

Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Incididunt . Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Subtitle

Carte horizontale (illustration à 60%)

Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

Incididunt . Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.

                                                    <div class="card is-horizontal is-vcentered">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Carte horizontale par défaut (illustration à 20%)</h3>
                                <p>Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>
                        <br>
                        <div class="card is-horizontal is-vcentered">
                            <div class="card-image is-1">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Carte horizontale (illustration à 30%)</h3>
                                <p>Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>
                        <br>
                        <div class="card is-horizontal is-vcentered">
                            <div class="card-image is-2">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Carte horizontale (illustration à 40%)</h3>
                                <p>Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>
                        <br>
                        <div class="card is-horizontal is-vcentered">
                            <div class="card-image is-3">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Carte horizontale (illustration à 50%)</h3>
                                <p>Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                <p>Incididunt . Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>
                        <br>
                        <div class="card is-horizontal is-vcentered">
                            <div class="card-image is-4">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Carte horizontale (illustration à 60%)</h3>
                                <p>Incididunt fugiat incididunt esse enim eiusmod anim commodo quis aliqua fugiat ad aute fugiat culpa. Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                <p>Incididunt . Exercitation minim irure sunt ad aute. Ea eu veniam non id dolore. Et ad do amet id magna enim elit minim deserunt esse. Deserunt sint irure sunt officia deserunt labore mollit. Sunt nisi qui adipisicing cillum eiusmod ullamco consequat aute aliqua.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>

Flat card

Utilisez la classe is-flat pour ajouter une bordure sur le contenu de votre carte.

Aperçu

Mode responsive

Subtitle

Title lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="card is-flat">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Title lorem</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>

Carte flottante

Utilisez la classe is-floating pour rendre votre carte flottante. Ni bordures, ni ombrages. L'illustration possède 4 bords arrondis.
Fonctionne aussi avec is-horizontal.

Aperçu

Mode responsive

Subtitle

Title lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="card is-floating">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title is-3">Title lorem</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>

Carte avec un titre important

La facette is-strong va forcer le comportement du titre (ici 24px en typo Bouygues Speak)

Aperçu

Mode responsive

Subtitle

Title lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.

                                                    <div class="card is-floating is-strong">
                            <div class="card-image">
                                <figure class="image">
                                    <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                </figure>
                            </div>
                            <div class="card-content">
                                <p class="suptitle">Subtitle</p>
                                <h3 class="title">Title lorem</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate vera.</p>
                                    <button class="button is-tertiary">Button Lorem</button>
                            </div>
                        </div>