Card

The layout options for DSFR are much more extensive than the ones in other design systems. Here we have only the common denominator, vertical card.

Properties:

• Title
• Content
• Actions

Shoelace

https://shoelace.style/components/card

<sl-card class="card-overview">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
  />

  <strong>Mittens</strong><br />
  This kitten is as cute as he is playful. Bring him home today!<br />
  <small>6 weeks old</small>

  <div slot="footer">
    <sl-button variant="primary" pill>More Info</sl-button>
    <sl-rating></sl-rating>
  </div>
</sl-card>

<style>
  .card-overview {
    max-width: 300px;
  }

  .card-overview small {
    color: var(--sl-color-neutral-500);
  }

  .card-overview [slot='footer'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

vue-dsfr

Carte - Card

<template>
  <DsfrCard
    :style="`max-width: ${horizontal ? 600 : 400}px`"
    :alt-img="altImg"
    :detail="detail"
    :description="description"
    :buttons="buttons"
    :img-src="imgSrc"
    :link="link"
    :size="size"
    :title="title"
    :horizontal="horizontal"
    :no-arrow="noArrow"
    :download="download"
    :title-tag="titleTag"
  />
</template>

Vuetify

Cards

<v-card class="mx-auto" width="400" prepend-icon="mdi-home" >

    <template v-slot:title> This is a title </template>

    <v-card-text> This is content </v-card-text> <

/v-card>