Version

Démarrer

Design system ?
Présentation de Trilogy
L'installation
Les performances
Accessibilité
Changelog
Releases

Guide pratique

Sémantique des pages
Contenu éditorial
Contenu graphique
Composants

Structure d'une page

Page de base
Les colonnes
Les rangées

Guide des styles

Couleurs
Listes (ul, dl)
Helpers
Icones
Typographie
Z-Index

Composants

Accordion
Badge
Box
Breadcrumb
Button & Link
Card
Checkradio
Countdown
Disclaimer
Divider
Entry
Footer
Form
Hero
Icon
Loader
Menu
Modal
Navbar
Notification
Option
Otp
Pagination
Popover
Price
Pricing Table
Product Tour
Progress Bar
Select
Slice
Slider
Stepper
Sticker
Table
Tab
Tag
Timeline
Title & text
Toolbar
Transfert

Toolbar

A placer juste après la barre de navigation.

Barre d'outil

Aperçu

Mode responsive

Ligne :

Ma conso
Mon offre
Mon mobile

                                                <div class="toolbar has-background-white">
                        <div class="toolbar-group">
                            <div class="toolbar-item"> Ligne :</div>
                            <div class="toolbar-item">
                                <div class="field">
                                    <div class="select">
                                        <select aria-label="example">
                                            <option value="" selected="selected">Select lorem</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="toolbar-group is-elastic">
                            <div class="toolbar-space"></div>
                            <div class="toolbar-item is-clipped-to-bottom">
                                <div class="column tabs is-centered is-clipped is-paddingless">
                                    <ul>
                                        <li><a>Ma conso</a></li>
                                        <li class="is-active"><a>Mon offre</a></li>
                                        <li class=""><a>Mon mobile</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="toolbar-space"></div>
                        </div>
                    </div>