Card

Ces classes CSS sont utilisées pour créer des mises en page de cartes et de listes.

Classe Card

La classe .card est utilisée pour créer une carte avec une ombre, un arrondi et un fond blanc.

Titre de la Carte

Contenu de la carte...

Titre de la Carte

Contenu de la carte...

HTML

<div class="card">
    <div class="listing listing-2">
        <div class="card">
            <div class="card-body">
                <div class="title">Titre de la Carte</div>
                <p>Contenu de la carte...</p>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="title">Titre de la Carte</div>
                <p>Contenu de la carte...</p>
            </div>
        </div>
    </div>
</div>

Classe Listing

La classe .listing est utilisée pour organiser les éléments en grille. Par défaut, elle crée une grille de trois colonnes.

Abstract Harmony

Concert · Live

Abstract Harmony

Concert · Live

Abstract Harmony

DJ

HTML

<div class="listing">

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

</div>

Classes de Grilles Supplémentaires

Deux autres classes, .listing-4 et .listing-2, sont utilisées pour créer des grilles de quatre et deux colonnes respectivement.

Abstract Harmony

Concert · Live

Abstract Harmony

Concert · Live

Abstract Harmony

DJ

Abstract Harmony

DJ

HTML

<div class="listing listing-4">

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

    <a href="#" class="artist card">
        <div class="thumbnail bg-cover ratio-169" style="background-image: url('image.jpg')">
        </div>
        <div class="card-body">
            <div class="title">Abstract Harmony</div>
            <div class="style">Concert · Live</div>
        </div>
    </a>

</div>