Components

Jouer aux cartes

READ ME

Des cards à tout faire

Un élément modulaire pour afficher des infos texte, image et lien.

# Product Cards horizontales

- Sounds
- Thailand
Coffee in Tonsai Beach

Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...
READ ME
- Sounds
- India
Tea in Mammallapuram

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

# Product Cards verticales

- Sounds
- Thailand
Coffee in Tonsai Beach

Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...
READ ME
- Sounds
- India
Tea in Mammallapuram

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

# Product Cards sans image

- Styles
Dégradé sur le texte

Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...
READ ME
- Components
Jouer aux cartes

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

# Picture Cards : juste des images

#AtTheDinner

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

#OnTheBeach

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

#HikingInTheMountains

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

#InTheTukTuk

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

Style

#MakingBubbles

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

 <!-- En-tête -->
<header>
    <h3 class="txt-gray-light"><b>#</b> Product Cards <span class="txt-black">horizontales</span></h3>
</header>

<!-- Liste  -->
<ul class="grid-layout grid-half-m has-gutter inner-y-space">
    
    <!-- Elément 1 -->
    <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/tonsai-beach-cafe1.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">Thailand</a></li>
                    </ul>
                </div>
                
                <!-- Titre -->
                <h4 class="product-card--title">Coffee in Tonsai Beach</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>
    
    <!-- Elément 2 -->
    <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>


<!-- En-tête -->
<header class="inner-top-space">
    <h3 class="txt-gray-light"><b>#</b> Product Cards <span class="txt-black">verticales</span></h3>
</header>

<!-- Liste  -->
<ul class="grid-layout grid-half-m grid-third-l grid-quarter-xl has-gutter inner-y-space">
    
    <!-- Elément 1 -->
    <li>
        <!-- La "Card" est dans un article -->
        <article class="product-card">
            
            <!-- Vignette -->
            
                <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/square-images/tonsai-beach-cafe1.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">Thailand</a></li>
                    </ul>
                </div>
                
                <!-- Titre -->
                <h4 class="product-card--title">Coffee in Tonsai Beach</h4>

                <!-- Exergue -->
                <p class="product-card--excerpt">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>
    
    <!-- Elément 2 -->
    <li>
        <!-- La "Card" est dans un article -->
        <article class="product-card">
            
            <!-- 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">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>

<!-- En-tête -->
<header class="inner-top-space">
    <h3 class="txt-gray-light"><b>#</b> Product Cards <span class="txt-black">sans image</span></h3>
</header>

<!-- Liste  -->
<ul class="grid-layout grid-half-m grid-third-l has-gutter inner-y-space">
    
    <!-- Elément 1 -->
    <li>
        <!-- La "Card" est dans un article -->
        <article class="product-card is-horizontal">

            <!-- En tête -->
            <header class="product-card--header">
                <div class="product-card--category">
                    <ul class="post-categories">
                        <li><a href="#" rel="category tag">Styles</a></li>
                    </ul>
                </div>
                
                <!-- Titre -->
                <h4 class="product-card--title">Dégradé sur le texte</h4>

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

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

        </article>
    </li>
    
    <!-- Elément 2 -->
    <li>
        <!-- La "Card" est dans un article -->
        <article class="product-card is-horizontal">
            
            <!-- En tête -->
            <header class="product-card--header">
                <div class="product-card--category">
                    <ul class="post-categories">
                        <li><a href="#" rel="category tag">Components</a></li>
                    </ul>
                </div>
                
                <!-- Titre -->
                <h4 class="product-card--title">Jouer aux cartes</h4>

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

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

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

<!-- Picture CARDS -->
<header class="inner-top-space">
    <h3 class="txt-gray-light"><b>#</b> Picture Cards : juste <span class="txt-black">des images</span></h3>
</header>

<div class="grid-layout has-gutter grid-1-3-5">
            
            <!-- Photo 1 -->
            <article class="picture-card">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-1.jpg" alt="Image de l'élément">
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">America</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#AtTheDinner</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

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

            </article>
            
            <!-- Photo 2 -->
            <article class="picture-card">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-2.jpg" alt="Image de l'élément">
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">Costa Rica</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#OnTheBeach</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

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

            </article>
            
            <!-- Photo 3 -->
            <article class="picture-card">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-3.jpg" alt="Image de l'élément">
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">America</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#HikingInTheMountains</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

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

            </article>
            
            <!-- Photo 4 -->
            <article class="picture-card">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-4.jpg" alt="Image de l'élément">
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">India</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#InTheTukTuk</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

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

            </article>
            
            <!-- Photo 5 -->
            <article class="picture-card">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-5.jpg" alt="Image de l'élément">
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Style</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#MakingBubbles</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

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

            </article>
            
          </div>

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) 
}

.product-card.white-bg {
    background-color: var(--white); 
}

/* HORIZONTALE */

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

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

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

/* Dans un contexte de grille -> la card prend toute la hauteur de sa cellule */
.grid-layout .product-card {
    height: 100%
}

/* Survol de toute la carte */
.product-card:hover {
    background-color: rgba(255,255,255,1);
    box-shadow: var(--shadow-default);
    transition: .25s;
}

/* Le HEADER */
.product-card--header {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    padding: 1rem;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*z-index: 20 */
}

/* Le TITRE */
.product-card--title {
    margin-top: .5rem;
    color: var(--gray-medium);
    z-index: 1; 
}

/* CATEGORIES (Wp) */
.product-card--category {
    margin-top: 0
}

.product-card--category a {
    color: var(--gray-light);
}

.product-card--category a:hover {
    color: var(--color-3);
}

.product-card--category li::after {
	display: inline-flex;
	content: ".";
	width: 1rem;
	text-align: center;
	font-weight: 700;
	font-size: 2rem;
	line-height: 0;
	position: relative;
	bottom: .75rem;
	margin-left: .5rem;
	color: var(--gray-xlight);
}

.product-card--category li:last-of-type::after {
    display: none
}

/* Le CONTENU */
.product-card--content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.product-card--excerpt {
    color: var(--gray-medium);  
}

/* "Pousser" le contenu vers le bas */
.product-card-bottom {
    @include flex-grid;
    align-items: center;
    justify-content: space-between;
}

/* L'IMAGE */

/* Un élément picture ou figure */
.product-card--picture {
    position: relative;
    height: 100%;
    overflow: hidden;
    transition: .25s;
}

/* Effet de "Zoom" */
.product-card:hover .product-card--picture img {
    transform: scale(1.015);
    transition: .25s;
}

/* "Calque" au-dessus de l'image */
.product-card--picture::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--radial-black-gradient);
    z-index: 10
}

/* L'élément img */
.product-card--picture img {
    object-fit: cover;
    transition: .25s;
}

/* Si la carte est horizontale */
.is-horizontal .product-card--picture img {
    height: 100%; 
}

/* LIENS */

/* Pas de bordure sous les liens  */

.product-card--main-link{
    font-family: var(--headings-font)
}

.product-card a::after {
    display: none;
}

/* BOUTON */
.product-card .btn:not(.btn-outline-white) {
    background-color: transparent;
    background-color: rgba(255,255,255,0);
    color: var(--black)!important;
    border: 1px solid var(--black);
}

.product-card .btn:hover {
    background-color: var(--color-3);
    color: var(--white)!important;
    border-color: transparent!important;
}

/* La carte IMAGE */


/* == MEDIA QUERIES == */

/* 1 : pour les SMARTPHONES en dessous de 600px */

@media screen and (max-width: $mq-small) {

}

/* 2 : pour les TABLETTES (MEDIUM) à partir de 601px */
@media screen and (min-width: $mq-medium) {
 
    .product-card--link.half-m .product-cards-title {
        position: static;
    }
    
    .product-card-link.half-m .product-cards-title a {
        top: auto;
        bottom: 0;
        width: 48%;
    }
    
    .h-card-half-m {
        @include half-grid;
    }
    
    .h-card-third-m {
        @include third-grid;
    }
    
}

/* pour les LARGE SCREENS à partir de 1025px; */
@media screen and (min-width: $mq-large) {

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

/* XLARGE SCREENS à partir de 1280px */
@media screen and (min-width: $mq-xlarge) {

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

/* XXLARGE SCREENS à partir de 1441px */
@media screen and (min-width: $mq-xxlarge) {

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

Notes

Où ça se trouve ?

Les “product-cards” sont dans le fichier /components/_product-cards.scss
Les “picture-cards” sont dans le fichier /components/_picture-cards.scss