CardImagePrimitive

The image cell (.card-img) of a CardRootPrimitive composition, sized by the card type.

import CardImagePrimitive from "@wikicasa-dev/components/UIKit/Card/CardImagePrimitive";

The .card-img cell of a card built with CardRootPrimitive. Its size comes from the card's type and the --card-img-* custom properties (at most 300px wide from 576px up in the default layout, 200px tall in vertical, 120×110px in mini). See CardRootPrimitive for the full composition.

#Usage

<script setup lang="ts">
import CardRootPrimitive from "@wikicasa-dev/components/UIKit/Card/CardRootPrimitive";
import CardImagePrimitive from "@wikicasa-dev/components/UIKit/Card/CardImagePrimitive";
</script>

<template>
  <CardRootPrimitive type="mini">
    <CardImagePrimitive>
      <img src="/img/bilocale-torino.jpg" alt="Bilocale a Torino" style="width: 100%; height: 100%; object-fit: cover" />
    </CardImagePrimitive>
  </CardRootPrimitive>
</template>

#Do / Don't

• Do use it only inside CardRootPrimitive (it gets the card type and styles from there).
• Do make the content fill the cell (width/height: 100%; object-fit: cover).
• Add position: relative to the cell (via class) when you overlay badges or buttons on the image.

#Styling hooks

--card-img-width, --card-img-height, --card-img-max-width, --card-img-max-height (and --card-vertical-img-height in vertical), set on .card-img. Target them as .uikit-card.my-card .card-img { … }.

#API

Generated from the component's types. Do not edit by hand.

Props

None.

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.