Sticker

Le sticker est un entête permettant de catégoriser et labelliser visuellement les composants auquels ils sont rattachés, comme des cartes ou des box.

Code de base

Aperçu

Mode responsive

Label Lorem

                                                        <div class="sticker is-primary">Label Lorem</div>
                            <div class="sticker is-success">Label Lorem</div>
                            <div class="sticker is-info">Label Lorem</div>

Aperçu avec un fond

Mode responsive

Label Lorem

                                                        <div class="sticker is-primary is-inverted">Label Lorem</div>
                            <div class="sticker is-success is-inverted">Label Lorem</div>
                            <div class="sticker is-info is-inverted">Label Lorem</div>

DO

Les stickers se déclinent dans toutes les couleurs de marque et sémantique ; voir le guide des styles

ACCESSIBILITY

Si la couleur a un sens sémantique (ex : "Attention"), le préciser dans le texte ou l'aria-label du switch pour rester conforme aux exigences d'accessibilité.

Flats

Aperçu

Mode responsive

Label Lorem

                                                        <div class="sticker is-primary is-outlined">Label Lorem</div>
                            <div class="sticker is-success is-outlined">Label Lorem</div>
                            <div class="sticker is-info is-outlined">Label Lorem</div>

Aperçu avec un fond

Mode responsive

Label Lorem

                                                        <div class="sticker is-primary is-outlined is-inverted">Label Lorem</div>
                            <div class="sticker is-success is-outlined is-inverted">Label Lorem</div>
                            <div class="sticker is-info is-outlined is-inverted">Label Lorem</div>

Penchés

Aperçu

Mode responsive

Label Lorem

                                                        <div class="sticker is-primary is-stretched">Label Lorem</div>
                            <div class="sticker is-success is-stretched">Label Lorem</div>
                            <div class="sticker is-info is-stretched">Label Lorem</div>

Petits

Ces stickers peuvent avoir une valeur similaire aux badges, mais avec un contenu textuel.

Aperçu

Mode responsive

Label Lorem

                                                        <div class="sticker is-small is-primary">Label Lorem</div>
                            <div class="sticker is-small is-success">Label Lorem</div>
                            <div class="sticker is-small is-info">Label Lorem</div>

Chapeau

Permet d'accrocher un sticker en haut d'une box ou d'une carte. has-hat est alors nécessaire sur l'ensemble des boxes, afin de combler l'espace du chapeau. Le sticker qui est effectivement affiché doit posséder la classe is-hat

Aperçu

Mode responsive

Sticker

                                                        <div class="columns">
                                <div class="column">
                                    <div class="box has-hat">
                                        <div class="box-content"></div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="box has-hat">
                                        <div class="sticker is-success is-hat">Sticker</div>
                                        <div class="box-content"></div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="box has-hat">
                                        <div class="box-content"></div>
                                    </div>
                                </div>
                            </div>