UI-Kit

Les titres

Exemple de titre : .page-title

Les Typos

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

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>

left : .expand-left

right : .expand-right


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