Tarjeta

Contenedor que agrega información. Estructura en tres bloques — título, contenido y área de acciones —, con esqueleto de carga opcional y sombra al pasar el cursor.

Tarjeta

<template>
  <div class="demo-row" style="align-items: flex-start">
    <LhCard title="Viaje por las montañas y los arroyos" style="width: 240px">
      <p class="demo-note">Fan Kuan, dinastía Song del Norte. Textura de gotas de lluvia para las rocas, de gran majestuosidad.</p>
      <template #actions>
        <LhButton size="small">Apreciar</LhButton>
        <LhButton size="small" type="primary">Favorito</LhButton>
      </template>
    </LhCard>
    <LhCard title="Estado de carga" loading style="width: 240px">
      <p class="demo-note">El área de contenido se rellena con un esqueleto.</p>
    </LhCard>
    <LhCard title="Tarjeta clickeable" clickable shadow="hover" style="width: 240px">
      <p class="demo-note">Con shadow=hover la tarjeta se eleva al pasar el cursor; clickable asume la semántica de button.</p>
    </LhCard>
    <LhCard style="width: 240px">
      <template #header>
        <span style="font-weight: 600">Título del slot header</span>
      </template>
      <p class="demo-note">El prop title y el slot header son mutuamente excluyentes.</p>
    </LhCard>
  </div>
</template>

Props

Prop	Descripción	Tipo	Predeterminado
title	Título (también admite el slot header)	string	''
shadow	Cuándo se muestra la sombra	'always' \| 'hover' \| 'never'	'always'
clickable	Toda la tarjeta es clickeable (asume la semántica de teclado de button)	boolean	false
loading	Estado de carga: el contenido se reemplaza por un esqueleto	boolean	false
themeVars / bgPattern / sx	Anulaciones de tema	—	—

Slots

Slot	Descripción
header	Área del título (alternativa al prop title)
default	Área de contenido
actions	Área de acciones (parte inferior)