UI Kit

Les titres

Exemple de titre : .page-title

Exemple de titre H1 : .h1

Exemple de titre H2 : .h2

Exemple de titre H3 : .h3

Les Typos

Exemple de texte large : .body-large

Exemple de texte moyen : .body-medium

Exemple de texte petit : .body-small

Exemple de texte large strong : .body-large

Exemple de texte moyen strong : .body-medium

Exemple de texte petit strong : .body-small

Exemple de texte de couleur transparent : .text-transparent
Exemple de texte de couleur primary : .text-primary
Exemple de texte de couleur secondary : .text-secondary
Exemple de texte de couleur success : .text-success
Exemple de texte de couleur danger : .text-danger
Exemple de texte de couleur warning : .text-warning
Exemple de texte de couleur info : .text-info
Exemple de texte de couleur gray : .text-gray
Exemple de texte de couleur white : .text-white
Exemple de texte de couleur dark : .text-dark
Exemple de texte de couleur light : .text-light
Exemple de texte de couleur text : .text-text
Exemple de texte de couleur blue : .text-blue

Les Couleurs

transparent

primary

secondary

success

danger

warning

info

gray

white

dark

light

text

blue

Les Boutons

Les Icons

Afficher un icon

{{ svg_icon('icon_name' }}

Liste des icons

Les Cards

Cards Post

{{ include('cards/post.twig', {'post':post}) }}

Layout

Basique

.layout-maxed

    
        <div class="layout-maxed">
            <div class="bg-primary">
                <p>.layout-maxed</p>
            </div>
        </div>

.layout-hero

    
        <div class="layout-maxed mb-20">
            <div class="layout-hero bg-primary">
                <p>.layout-hero</p>
            </div>
        </div>

4 colonnes

left : .expand-left

right

    
        <div class="layout-maxed-4col">
            <div class="bg-primary expand-left">
                    left : .expand-left
                </div>
                <div class="bg-secondary">
                    right
            </div>
        </div>

left

right : .expand-right

    
        <div class="layout-maxed-4col">
            <div class="bg-primary">
                left
            </div>
            <div class="bg-secondary expand-right">
                right : .expand-right
            </div>
        </div>