Card componentAvailable since EcoComposer 1.0

Simple elements list

First card

Our first description

Second card

Our second description

Third card

Our third description

Flippable cat card ⥀

Too long description of the super optimized cat of the card component.Fourth cat

Another one ⥀

Too long description of the super optimized cat of the card component.Fifth cat

Last one ⥀

Too long description of the super optimized cat of the card component.Sixth cat

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>
^