Card componentAvailable since EcoComposer 1.0

Card examples
Default SCSS values
SCSS implementation
HTML implementation

Simple cards

Cat image for demo purposes — Discover her peaceful world in our guide to feline serenity.

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