Card componentAvailable since EcoComposer 1.0

Simple cards

Luna, the Dreamer

Discover her peaceful world in our guide to feline serenity.

Tigrou, the Explorer

Join him on his adventures through uncharted territories.

Mimi, the Curious

Follow her endless quest for discovery and wonder.

Flippable cards

Unveil a surprise every time you flip it! ⥀

Cats use their whiskers to navigate tight spaces and detect nearby objects with ease.The Flippable Cat Card

A journey filled with fluffy companions awaits ⥀

A cat’s meow is their way of communicating with humans, not other cats.Another Feline Adventure

This card holds the key to a purr-fect story. ⥀

Most cats hate water, but some breeds enjoy swimming and splashing around.The Last but not Least

The defaults 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> </figure> <p class="card card--paragraph">Our first description</p> </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> </figure> <p class="card card--paragraph">Our first description</p> </div> <div class="card-flip card-container--body--back"> Too long description of the super optimized cat of the card component. </div> </div> </div>
^