Overview

A few words about zis

Comment ça marche ?

1 – Le visuel de l’élément sous l’onglet “Design“
2 – Le code html de cet élément sous l’onglet “HTML“
3 – Le code css de l’élément sous l’onglet “CSS” (no kidding.)
4 – Quelques indications d’utilisations de l’élément et une idée d’où le retrouver pour l’utiliser et le mettre en forme, sous l’onglet “Usage“

Un petit exemple avec un composant “card” ci-après :

- Sounds
- India
Tea in Mammallapuram

Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...
READ ME

 <!-- Elément "card" -->
<ul class="grid-layout grid-half-m">
  <li>
        <!-- La "Card" est dans un article -->
        <article class="product-card is-horizontal h-card-third">
            
            <!-- Vignette -->
            
                <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/square-images/mammallapuram-beach-morning_square.jpg" alt="Image de l'élément" />
            
            
            <!-- En tête -->
            <header class="product-card--header">
                <div class="product-card--category">
                    <ul class="post-categories">
                        <li><a href="#" rel="category tag">Sounds</a></li>
                        <li><a href="#" rel="category tag">India</a></li>
                    </ul>
                </div>
                
                <!-- Titre -->
                <h4 class="product-card--title">Tea in Mammallapuram</h4>

                <!-- Exergue -->
                <p class="product-card--excerpt show-on-large">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                <!-- Lien -->
                <a class="product-card--main-link is-moving to-right" href="#" title="Voir">READ ME <i class="spacer-left-xs fa fa-arrow-right"></i></a>
            </header>

        </article>
    </li>
  
</ul>

Notes

 /* La carte est VERTICALE par défaut */
.product-card {
    position: relative;
    /* height: 100%; */ 
    border-radius: .25rem;
    transition: .25s;
    z-index: 10;
    overflow: hidden;
    /* display: flex;
    flex-direction: column-reverse;*/
    box-shadow: var(--small-shadow) 
}


/* HORIZONTALE */
.h-card-half {
    @include half-grid;
}

.h-card-third {
    @include third-grid;
}

.h-card-quarter {
    @include quarter-grid;
}

Notes

Où ça se trouve ?

On peut retrouver les “cards” dans le fichier /components/_product-cards.scss