Carte

Options

Classe Elément Description
.card <div> Créer une carte.
.childCard <div> Créer des cartes sur tous les enfants directs.

Une carte permet notament d'empêcher la fusion des marges extérieures en haut et en bas.

Complémentarités intéressantes

Classe Elément Description
.removePadding <div class='card'> Enlever les marges intérieures pour afficher une image par exemple.

Examples

Carte simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<div class="card">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
</div>

Carte sur une colonne

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Carte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

<div class="grid4 grid12S gutterL">
    <div class="card shadow removePadding">
        <img src="https://images.pexels.com/photos/944743/pexels-photo-944743.jpeg">
        <div class="paddingXXL">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
        </div>
    </div>
    <div class="card">
        <p class="p1">Carte</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
    <div class="card bgColor1 light radius removePadding">
        <img src="https://images.pexels.com/photos/1198817/pexels-photo-1198817.jpeg">
        <div class="padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
        </div>
    </div>
</div>

Carte sur une colonne 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Carte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

<div class="grid4 grid12S gutterL flexTop">
    <div class="card shadow removePadding">
        <img src="https://images.pexels.com/photos/944743/pexels-photo-944743.jpeg">
        <div class="padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
        </div>
    </div>
    <div class="card bgGray5 light radius center paddingL">
        <p class="p1">Carte</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
    </div>
    <div class="card bgColor1 light radius removePadding">
        <img src="https://images.pexels.com/photos/1198817/pexels-photo-1198817.jpeg">
        <div class="padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
        </div>
    </div>
</div>

Carte et grille

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.

<div class="card shadow removePadding">
    <div class="grid6 grid12S removeMargin">
        <div>
            <img src="https://images.pexels.com/photos/1198817/pexels-photo-1198817.jpeg">
        </div>
        <div class="padding">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula augue eget erat lobortis efficitur.</p>
        </div>
    </div>
</div>