Slice

Le slice est un composant permettant de mettre en valeur une action utilisateur importante ou clé dans le parcours.

Code de base

Elle contient par exemple une icône illustrative, du contenu textuel et incite à être cliquée grâce à l'icône située tout à droite.

Aperçu

Mode responsive

Slice avec Call To Action (CTA) simple (ici, un simple chevron)

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

                                                        <div class="slice">
                                <div class="slice-icon">
                                    <div class="icon is-large">
                                        <i class="tri-search" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="slice-content">
                                    <p class="title is-6">Slice avec Call To Action (CTA) simple (ici, un simple chevron)</p>
                                    <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                </div>
                                <div class="slice-cta">
                                    <i class="tri-arrow-right-r" aria-hidden="true"></i>
                                </div>
                            </div>

WARNING

L'icône est masquée par défaut sur mobile ; pour forcer son affichage, utilisez la facette .is-illustrated-mobile

Avec CTA

L'icône tout à droite peut aussi être un CTA. Il est important de le préciser à la slice avec has-long-cta pour que le comportement soit adapté en conséquence sur mobile.

Aperçu

Mode responsive

Slice avec CTA de type Button

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

                                                        <div class="slice has-long-cta">
                                <div class="slice-icon">
                                    <div class="icon is-large">
                                        <i class="tri-shopping-cart" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="slice-content">
                                    <p class="title is-6">Slice avec CTA de type Button</p>
                                    <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                </div>
                                <div class="slice-cta">
                                    <button class="button is-primary">Cliquez ici</button>
                                </div>
                            </div>

Slices multiples

Utilisez .slices en tant que container pour grouper les slices.

Aperçu

Mode responsive

Titre de mon action

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

Titre de mon action

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

Titre de mon action

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

                                                        <div class="slices">
                                <div class="slice has-long-cta">
                                    <div class="slice-icon">
                                        <div class="icon is-large">
                                            <i class="tri-shopping-cart" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                    <div class="slice-content">
                                        <p class="title is-6">Titre de mon action</p>
                                        <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                    </div>
                                    <div class="slice-cta">
                                        <button class="button is-primary">Cliquez moi</button>
                                    </div>
                                </div>
                                <div class="slice has-long-cta">
                                    <div class="slice-icon">
                                        <div class="icon is-large">
                                            <i class="tri-star" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                    <div class="slice-content">
                                        <p class="title is-6">Titre de mon action</p>
                                        <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                    </div>
                                    <div class="slice-cta">
                                        <button class="button is-primary">Cliquez moi</button>
                                    </div>
                                </div>
                                <div class="slice has-long-cta">
                                    <div class="slice-icon">
                                        <div class="icon is-large">
                                            <i class="tri-sliders" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                    <div class="slice-content">
                                        <p class="title is-6">Titre de mon action</p>
                                        <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                    </div>
                                    <div class="slice-cta">
                                        <button class="button is-primary">Cliquez moi</button>
                                    </div>
                                </div>
                            </div>

DO

Le regroupement de slice est sur fond blanc par défaut. Pour rendre cet arrière-plan transparent, utilisez la facette is-transparent sur le container

Désactivée

Pour rendre inactive une slice, utilisez .is-disabled. Elle perd alors son comportement au hover.

Aperçu

Mode responsive

Titre de mon action

Un texte supplémentaire pour décrire le contenu de l'action

                                                        <div class="slice is-disabled">
                                <div class="slice-icon">
                                    <div class="icon is-large">
                                        <i class="tri-sliders" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="slice-content">
                                    <p class="title is-6">Titre de mon action</p>
                                    <p>Un texte supplémentaire pour décrire le contenu de l'action</p>
                                </div>
                                <div class="slice-cta">
                                    <button class="button is-primary" disabled="true">Je suis un CTA</button>
                                </div>
                            </div>

WARNING

Pensez à adapter vos composants si nécessaire : un Button devra prendre l'attribut HTML disabled="true" afin d'être désactivé au sein d'une Slice

Avec un switch

On impacte l'élément input avec un atome .has-slice et son comportement va alors s'adapter pour ce modèle précis.

Aperçu

Mode responsive

Libellé de mon switch

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

                                                        <div class="slice">
                                <div class="slice-content">
                                    <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio is-primary has-slice" type="checkbox" id="switch-doc">
                                            <label for="switch-doc">
                                                <p class="title is-6">Libellé de mon switch</p>
                                                <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

Avec une checkbox

Permet d'ajouter des cases à cocher devant chaque Slice d'un groupement. En cochant la case, le CTA peut alors apparaître

Aperçu

Mode responsive

Visualisez la doc en mobile pour vous rendre compte

In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.

                                                        <div class="slices slice-select">
                                <div class="slice">
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-doc" type="checkbox" name="checkbox1">
                                            <label for="checkbox-doc">
                                                <div class="slice-body">
                                                    <div class="slice-content">
                                                        <p class="title is-6">Visualisez la doc en mobile pour vous rendre compte</p>
                                                        <p>In magna enim ad eu est labore occaecat. Excepteur eiusmod est excepteur anim laborum Lorem amet sit officia est in. Consequat quis mollit fugiat in dolor exercitation do pariatur adipisicing cillum. Et elit sunt nisi deserunt nostrud do. Anim excepteur fugiat quis pariatur voluptate ex pariatur.</p>
                                                    </div>
                                                    <div class="slice-cta">
                                                        <button class="button is-primary">Je suis un CTA</button>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

DO

La facette slice-select est nécessaire sur le container.
Une classe slice-body est nécessaire pour scinder la case à cocher du reste de la Slice.

WARNING

Sur mobile, la présence de la checkbox diminue l'espace disponible et le CTA passera donc toujours à la ligne.