Card componentAvailable since EcoComposer 1.0
Simple cards



Flippable cards
Cats use their whiskers to navigate tight spaces and detect nearby objects with ease.The Flippable Cat Card
A cat’s meow is their way of communicating with humans, not other cats.Another Feline Adventure
Most cats hate water, but some breeds enjoy swimming and splashing around.The Last but not Least
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>