Timeline

La timeline est un composant permettant à l'utilisateur de visualiser des actions ou évènements dans l'ordre chronologique, et de se situer temporellement dans son parcours.

Code de base

Aperçu

Mode responsive

20 Septembre - Compte

Modification de votre identifiant de connexion

Voir l'email

08 juillet - 0654389754 - Michel

SMS Bon voyage avec seuil usage inclus

Voir le SMS

20 Septembre - Compte

Passage en boutique concernant un accessoire

05 Mai - 0756432876 - Cédric

Modification de votre adresse de facturation

                                                        <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Modification de votre identifiant de connexion</p>
                                        <a>Voir l'email</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">08 juillet - 0654389754 - Michel</p>
                                        <p>SMS Bon voyage avec seuil usage inclus</p>
                                        <a>Voir le SMS</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-question-circle" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Passage en boutique concernant un accessoire</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">05 Mai - 0756432876 - Cédric</p>
                                        <p>Modification de votre adresse de facturation</p>
                                    </div>
                                </div>
                            </div>

Avec état actif

État actif sur le premier élément, avec la classe active

Aperçu

Mode responsive

20 Septembre - Compte

Modification de votre identifiant de connexion

Voir l'email

08 juillet - 0654389754 - Michel

SMS Bon voyage avec seuil usage inclus

Voir le SMS

20 Septembre - Compte

Passage en boutique concernant un accessoire

05 Mai - 0756432876 - Cédric

Modification de votre adresse de facturation

                                                        <div class="timeline">
                                <div class="timeline-item active">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Modification de votre identifiant de connexion</p>
                                        <a>Voir l'email</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">08 juillet - 0654389754 - Michel</p>
                                        <p>SMS Bon voyage avec seuil usage inclus</p>
                                        <a>Voir le SMS</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-question-circle" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Passage en boutique concernant un accessoire</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">05 Mai - 0756432876 - Cédric</p>
                                        <p>Modification de votre adresse de facturation</p>
                                    </div>
                                </div>
                            </div>

Comme des notifications

La barre de liaison entre les éléments disparait et le composant s'apparente à un ensemble de notifications grâce à la classe notifications

Aperçu

Mode responsive

20 Septembre - Compte

Modification de votre identifiant de connexion

Voir l'email

08 juillet - 0654389754 - Michel

SMS Bon voyage avec seuil usage inclus

Voir le SMS

20 Septembre - Compte

Passage en boutique concernant un accessoire

05 Mai - 0756432876 - Cédric

Modification de votre adresse de facturation

                                                        <div class="timeline notifications">
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Modification de votre identifiant de connexion</p>
                                        <a>Voir l'email</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">08 juillet - 0654389754 - Michel</p>
                                        <p>SMS Bon voyage avec seuil usage inclus</p>
                                        <a>Voir le SMS</a>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-question-circle" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">20 Septembre - Compte</p>
                                        <p>Passage en boutique concernant un accessoire</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker is-icon">
                                        <div class="card-header-icon">
                                            <span class="icon has-text-grey is-small">
                                                <i class="tri-envelope" aria-hidden="true"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <p class="heading">05 Mai - 0756432876 - Cédric</p>
                                        <p>Modification de votre adresse de facturation</p>
                                    </div>
                                </div>
                            </div>