Component documentation

Basics

Components

Objects

Utilities

Card banner

<div class="o-grid u-spacer-bottom-l">
    <div class="o-grid-col-3 c-card c-card__banner" data-gradient="data-gradient" style="--bckg-color: black; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 20%; --gradient-step-1-opacity: 0.85; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 0, 0, 0;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
    <div class="o-grid-col-3 c-card c-card__banner" data-gradient="data-gradient" style="--bckg-color: #228860; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 15%; --gradient-step-1-opacity: 0.455; --gradient-step-2-pos: 85%; --gradient-step-2-opacity: 0.20; --gradient-color: 34, 135, 95;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
    <div class="o-grid-col-3 c-card c-card__banner" data-gradient="data-gradient" style="--bckg-color: black; --title-color: #FF4054; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 20%; --gradient-step-1-opacity: 0.45; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 0, 0, 0;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
</div>
<div class="o-grid u-spacer-bottom-l">
    <div class="o-grid-col-3 c-card c-card__banner img-right" data-gradient="data-gradient" style="--bckg-color: #1e3137; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 35%; --gradient-step-1-opacity: 1; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 30, 49, 55;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
    <div class="o-grid-col-3 c-card c-card__banner" data-gradient="data-gradient" style="--bckg-color: black; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 10%; --gradient-step-1-opacity: 0.75; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.05; --gradient-color: 0, 0, 0;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
    <div class="o-grid-col-3 c-card c-card__banner" data-gradient="data-gradient" style="--bckg-color: #228860; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 15%; --gradient-step-1-opacity: 0.345; --gradient-step-2-pos: 85%; --gradient-step-2-opacity: 0.10; --gradient-color: 34, 135, 95;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-col-3 c-card c-card__banner img-right" data-gradient="data-gradient" style="--bckg-color: #950413; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 5%; --gradient-step-1-opacity: .8; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 149, 4, 19;">
        <div class="c-card__banner--text">
            <div class="wrap">
                <p class="sub-title">Smart vous
                    <br> souhaite de
                </p>
                <p class="main-title c-h3">joyeuses fêtes
                    <br> de fin d'année
                </p>
            </div>
        </div>
    </div>
    <div class="o-grid-col-3"></div>
    <div class="o-grid-col-3"></div>
</div>

.o-grid.u-spacer-bottom-l
    .o-grid-col-3.c-card.c-card__banner(data-gradient style="--bckg-color: black; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 20%; --gradient-step-1-opacity: 0.85; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 0, 0, 0;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
    .o-grid-col-3.c-card.c-card__banner(data-gradient style="--bckg-color: #228860; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 15%; --gradient-step-1-opacity: 0.455; --gradient-step-2-pos: 85%; --gradient-step-2-opacity: 0.20; --gradient-color: 34, 135, 95;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
    .o-grid-col-3.c-card.c-card__banner(data-gradient style="--bckg-color: black; --title-color: #FF4054; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 20%; --gradient-step-1-opacity: 0.45; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 0, 0, 0;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
.o-grid.u-spacer-bottom-l
    .o-grid-col-3.c-card.c-card__banner.img-right(data-gradient style="--bckg-color: #1e3137; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 35%; --gradient-step-1-opacity: 1; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 30, 49, 55;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
    .o-grid-col-3.c-card.c-card__banner(data-gradient style="--bckg-color: black; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 10%; --gradient-step-1-opacity: 0.75; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.05; --gradient-color: 0, 0, 0;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
    .o-grid-col-3.c-card.c-card__banner(data-gradient style="--bckg-color: #228860; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@1x.jpg'); --background-r: url('../images/banners/202212/min-banner-december-tree-2022-dsktp@2x.jpg'); --gradient-step-1-pos: 15%; --gradient-step-1-opacity: 0.345; --gradient-step-2-pos: 85%; --gradient-step-2-opacity: 0.10; --gradient-color: 34, 135, 95;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
.o-grid
    .o-grid-col-3.c-card.c-card__banner.img-right(data-gradient style="--bckg-color: #950413; --title-color: #FFBC1A; --subtitle-color: #000; --background: url('../images/banners/202212/banner-december-2022.jpg'); --background-r: url('../images/banners/202212/banner-december-2022.jpg'); --gradient-step-1-pos: 5%; --gradient-step-1-opacity: .8; --gradient-step-2-pos: 80%; --gradient-step-2-opacity: 0.25; --gradient-color: 149, 4, 19;")
            .c-card__banner--text
                .wrap
                    p.sub-title Smart vous<br> souhaite de
                    p.main-title.c-h3 joyeuses fêtes<br> de fin d'année
    .o-grid-col-3
    .o-grid-col-3