CardRootPrimitive

Card shell (rounded, shadowed root with the BaseCard layouts) to compose with CardImagePrimitive and CardDescriptionPrimitive.

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

The root of the card primitives. It renders the same .uikit-card box as BaseCard (same type layouts and --card-* custom properties, see BaseCard) but takes free content in its default slot. Use it when BaseCard's fixed "image cell + body cell" doesn't fit: an image-only tile, a skeleton that must match a real card's geometry, a third cell, or a body that comes first.

The parts:

• CardRootPrimitive: the box. type sets the layout ("", "mini", "vertical", "news") and is passed down to the image cell; as picks div or article; emits click. It also loads the card stylesheet for its parts.
• CardImagePrimitive: the .card-img cell, sized by the card type.
• CardDescriptionPrimitive: the .card-body cell (100% wide, 10px 15px padding).

Prefer BaseCard when the plain image + body layout is enough.

#Usage

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

<template>
  <CardRootPrimitive as="article" class="agency-card">
    <CardImagePrimitive class="agency-card__img">
      <img src="/img/agenzia-roma.jpg" alt="Vetrina dell'agenzia Casa Roma Centro" />
    </CardImagePrimitive>
    <CardDescriptionPrimitive>
      <h3>Casa Roma Centro</h3>
      <p>Via del Corso 112, Roma · 48 immobili in vendita</p>
    </CardDescriptionPrimitive>
  </CardRootPrimitive>
</template>

<style scoped>
.agency-card { background: #fff; }
.agency-card__img { position: relative; flex-shrink: 0; }
.agency-card__img img { width: 100%; height: 100%; object-fit: cover; }
</style>

#Do / Don't

• Do place CardImagePrimitive / CardDescriptionPrimitive directly inside CardRootPrimitive: the image cell reads the card type from it, and the card stylesheet is loaded by the root only.
• Do set a background on the root; the card has only a shadow.
• Do reuse these primitives for a loading skeleton of a card (cells filled with BaseShimmerLoader), so the skeleton gets the exact same geometry.
• Don't change type expecting the image cell to follow at runtime: it's handed down once when the card is created.
• The root is a flex row (column for vertical); stack it on phones with your own flex-direction or use type="vertical".

#Styling hooks

Same as BaseCard: --card-width, --card-height, --card-max-width, --card-max-height, --card-border-radius-* on the root; --card-img-width, --card-img-height, --card-img-max-width, --card-img-max-height on .card-img; --card-body-width on .card-body. Override with a selector stronger than one class, e.g. .uikit-card.agency-card.

#API

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

Props

Name	Type	Default	Required	Description
type	CardTypes	""
as	CardRootTypes	"div"

Events

Name	Payload
click	[MouseEvent]

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.