BaseCard · Design system

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

Use BaseCard for any "picture plus text" tile: a property in a list, an agency, a news article. It renders two cells, .card-img (the #card-image slot) and .card-body (the #card-description slot), inside a rounded, shadowed, overflow: hidden box. Pick the layout with type:

"" (default): horizontal row. From 576px up the card is 240px tall and the image column is at most 300px wide; below 576px the height is auto. It stays a row on phones.
"vertical": image on top (200px tall), body below. Use for carousels and grids, and for phones.
"mini": compact row, max 370×100px, image at most 120×110px. Sidebars, "recently seen" lists.
"news": column from 576px up (270px tall, 150px image); a 320×100px row on phones.

Need only the image cell, a custom cell order, or extra cells? Compose CardRootPrimitive + CardImagePrimitive + CardDescriptionPrimitive instead.

Usage

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

const openListing = () => console.log("open listing 4821");
</script>

<template>
  <BaseCard type="vertical" root-component="article" class="listing-card" @click="openListing">
    <template #card-image>
      <img
        src="/img/trilocale-milano.jpg"
        alt="Trilocale in vendita a Milano, zona Navigli"
        width="640"
        height="360"
        style="width: 100%; height: 100%; object-fit: cover"
      />
    </template>
    <template #card-description>
      <p class="price">€ 385.000</p>
      <h3>Trilocale in Via Vigevano, Milano</h3>
      <p>85 m² · 3 locali · 2° piano</p>
    </template>
  </BaseCard>
</template>

<style scoped>
.listing-card { background: #fff; cursor: pointer; }
</style>

Do / Don't

Do set a background on the card (class): the card itself has none, only a shadow.
Do make the image fill its cell (width/height: 100%; object-fit: cover); the cell sizes itself, the image doesn't.
Do use root-component="article" when the card is a self-contained item in a list.
Don't nest interactive cards: click is emitted from the whole root, so stop propagation on inner buttons/links that must not trigger it.
Don't expect the default type to stack on phones; use type="vertical" (or a primitive composition) for a stacked mobile layout.
card-img-classes / card-body-classes add classes to the two cells (padding, background, alignment).

Styling hooks

CSS custom properties, declared on .uikit-card (the root) unless noted. Override them with a selector stronger than one class, e.g. .uikit-card.listing-card { --card-height: 300px; }, or the result depends on stylesheet order.

Root: --card-width, --card-height, --card-max-width (930px), --card-max-height, --card-border-radius-top-left / -top-right / -bottom-left / -bottom-right (20px each).
On .card-img: --card-img-width, --card-img-height (defaults to --card-height), --card-img-max-width, --card-img-max-height; in vertical also --card-vertical-img-height (200px). Target them as .uikit-card.listing-card .card-img { … }.
On .card-body: --card-body-width (100%). Body padding is 10px 15px.
Classes on the root: uikit-card plus mini, vertical or news-card.

API

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

Props

Name	Type	Default
`type`	`CardTypes`	`""`
`rootComponent`	`CardRootTypes`	`"div"`
`cardImgClasses`	`ClassTypeProp`	`""`
`cardBodyClasses`	`ClassTypeProp`	`""`

Events

Name	Payload
`click`	`[MouseEvent]`

v-model

None.

Slots

Name	Slot props
`card-image`
`card-description`

Exposed (template ref)

None.

#Usage

#Do / Don't

#Styling hooks

#API