Countdown

Utilisé pour les annonces importantes, le compte à rebours s'intègre facilement avec Trilogy Vanilla s'il est nécessaire de l'animer.

Compte à rebours événementiel

Aperçu

Mode responsive

19j
20h
33m
50s

                                                                <ul class="countdown" data-countdown="" data-date="2022/12/31 23:59:59">
                                        <li class="count"><span class="value" data-days="">19</span>j</li>
                                        <li class="count"><span class="value" data-hours="">20</span>h</li>
                                        <li class="count"><span class="value" data-minutes="">33</span>m</li>
                                        <li class="count"><span class="value" data-seconds="">50</span>s</li>
                                    </ul>

Aperçu avec un fond

Mode responsive

19j
20h
33m
50s

                                                                <ul class="countdown is-inverted" data-countdown="" data-date="2022/12/31 23:59:59">
                                        <li class="count"><span class="value" data-days="">19</span>j</li>
                                        <li class="count"><span class="value" data-hours="">20</span>h</li>
                                        <li class="count"><span class="value" data-minutes="">33</span>m</li>
                                        <li class="count"><span class="value" data-seconds="">50</span>s</li>
                                    </ul>

Petit

Une seule variante de taille existe (.is-small) et impacte tous les breakpoints.

Aperçu

Mode responsive

19j
20h
33m
50s

                                                                <ul class="countdown is-small" data-countdown="" data-date="2022/12/31 23:59:59">
                                        <li class="count"><span class="value" data-days="">19</span>j</li>
                                        <li class="count"><span class="value" data-hours="">20</span>h</li>
                                        <li class="count"><span class="value" data-minutes="">33</span>m</li>
                                        <li class="count"><span class="value" data-seconds="">50</span>s</li>
                                    </ul>