Card componentAvailable since EcoComposer 1.0

Simple cards

Cat image for demo purposesLuna, the Dreamer
Discover her peaceful world in our guide to feline serenity.
Cat image for demo purposesTigrou, the Explorer
Join him on his adventures through uncharted territories.
Cat image for demo purposesMimi, the Curious
Follow her endless quest for discovery and wonder.

Flippable cards

The default values are :

border-radius : 1rem * theming.$font-size * theming.$font-size, card--box-shadow : 'card--box-shadow', card--background-color : 'card--background-color', card--background-image : 'card--background-image', card--hover--box-shadow : null, card--link--color : 'card--link--color', card--link-hover--color : 'card--link-hover--color', card--margin : 3rem * theming.$font-size * theming.$font-size, card--paragraph-color : 'card--paragraph-color', center--figure-link : true, // Do we center the figure > link (> img)? center--figure-image-not-in-a-link : false, // Do we center the figure > img? flippable : false, font-family : theming.$font-family, font-size : 2rem * theming.$font-size, image--front--clickable : false, image--margin-bottom : 1.5rem * theming.$font-size * theming.$font-size, inner-padding : 1.5rem * theming.$font-size * theming.$font-size, link : true, min-width : 30rem * theming.$font-size * theming.$font-size, print : false, suffix : '', themes : ( light : ( default--card--background-color : #c8d0cf, default--card--background-image : initial, default--card--box-shadow : 0 0 1rem * theming.$font-size * theming.$font-size #444, default--card--link--color : #00b, default--card--link-hover--color : #00434e, default--card--paragraph-color : #333 ), dark : ( default--card--background-color : #4d5b59, default--card--background-image : initial, default--card--box-shadow : 0 0 1rem * theming.$font-size * theming.$font-size #ddd, default--card--link--color : #fff, default--card--link-hover--color : #ccf, default--card--paragraph-color : #fff ) )

We can implement it that way :

@include card.init; @include card.create; @include card.create( ( 'flippable' : true, 'suffix' : '-2', 'themes' : $themes ) );

We can implement it that way :

<!-- FOR A BASIC CARD --> <div class="card card-container"> <figure class="card card--image-block"> <a href=# aria-labelledby=my-link-id> <img src=/images/cat-180x180.jpeg alt="" class="card card--image" width=180 height=180 loading=lazy> </a> <a id=my-link-id href=# class="card card--link">First card</a> <figcaption class="card card--paragraph">Our first description</figcaption> </figure> </div> <!-- FOR A FLIPPABLE CARD, -flip is a configurable suffix --> <div class="card-flip card-container"> <div class="card-flip card-container--body"> <div class="card-flip card-container--body--front"> <figure class="card card--image-block"> <img src=/images/cat-180x180.jpeg alt="" class="card card--image" width=180 height=180 loading=lazy> <figcaption class="card card--paragraph">Our first description</figcaption> </figure> </div> <div class="card-flip card-container--body--back"> Too long description of the super optimized cat of the card component. </div> </div> </div>
^