Tarjeta

Contenedor de información con título, contenido y acciones inferiores. Puede ser clicable en su totalidad (con semántica de teclado de button integrada) y admite marcador de posición de carga y disposición rápida con sx.

Uso básico

Uso básico

Lluvia sobre hojas de plátano

Tras la ventana se presiente la lluvia nocturna; las hojas de plátano la anuncian con su sonido.

<script setup lang="ts">
</script>

<template>
  <LhCard title="Lluvia sobre hojas de plátano">
    Tras la ventana se presiente la lluvia nocturna; las hojas de plátano la anuncian con su sonido.
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Lluvia sobre hojas de plátano">
    Tras la ventana se presiente la lluvia nocturna; las hojas de plátano la anuncian con su sonido.
  </LhCard>
</template>

shadow controla cuándo se muestra la sombra: always (predeterminado) / hover (al pasar el puntero) / never.

Momento de la sombra

Sombra al pasar el puntero

La sombra aparece al pasar el puntero.

Sin sombra

Sin sombra en ningún caso.

<script setup lang="ts">
</script>

<template>
  <LhCard shadow="hover" title="Sombra al pasar el puntero">La sombra aparece al pasar el puntero.</LhCard>
  <LhCard shadow="never" title="Sin sombra">Sin sombra en ningún caso.</LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard shadow="hover" title="Sombra al pasar el puntero">La sombra aparece al pasar el puntero.</LhCard>
  <LhCard shadow="never" title="Sin sombra">Sin sombra en ningún caso.</LhCard>
</template>

Slot de cabecera y extra

Cabecera personalizada

Cabecera personalizadaAcciones

Con el slot header puedes tomar el control total de la zona del título.

<script setup lang="ts">
</script>

<template>
  <LhCard>
    <template #header><span>Cabecera personalizada</span></template>
    <template #extra>Acciones</template>
    …
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard>
    <template #header><span>Cabecera personalizada</span></template>
    <template #extra>Acciones</template>
    …
  </LhCard>
</template>

Portada y pie

Portada y pie

Zona de portada

Contenido del cuerpo……

<script setup lang="ts">
</script>

<template>
  <!-- Portada y pie -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Favorito</LhButton>
    </template>
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <!-- Portada y pie -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Favorito</LhButton>
    </template>
  </LhCard>
</template>

Tarjeta entera clicable

Con clickable, la tarjeta entera asume la semántica de button: puede recibir el foco con Tab (anillo de foco :focus-visible) y Enter / Espacio dispara click.

Tarjeta clicable

Haz clic en mí

La tarjeta entera es clicable. Prueba a enfocarla con Tab y pulsar Enter.

<script setup lang="ts">
function onCardClick() {
  console.log('card clicked')
}
</script>

<template>
  <!-- Tarjeta clicable -->
  <LhCard clickable title="Haz clic en mí" @click="onCardClick">…</LhCard>
</template>

<script>
export default {
  methods: {
    onCardClick() {
      console.log('card clicked')
    },
  },
}
</script>

<template>
  <!-- Tarjeta clicable -->
  <LhCard clickable title="Haz clic en mí" @click="onCardClick">…</LhCard>
</template>

Estado de carga

Estado de carga

Cargando

<script setup lang="ts">
</script>

<template>
  <LhCard title="Cargando" loading />
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Cargando" loading />
</template>

Card API

Props

Prop	Descripción	Tipo	Predeterminado
title	Título de la tarjeta (también puede usarse el slot header)	string	—
shadow	Momento en que se muestra la sombra	"always" | "hover" | "never"	'always'
clickable	La tarjeta entera es clicable (asume la semántica de teclado de button)	boolean	false
loading	Estado de carga: el contenido se sustituye por un marcador de posición esquelético	boolean	false
themeVars	Variables de tema a nivel de componente (las claves reciben automáticamente el prefijo --lh-)	{ [x: string]: string; }	—
bgPattern	URL del patrón de fondo (p. ej. var(--lh-pattern-willow)); sin restricción de la lista blanca global	string	—
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros
click	Se dispara al hacer clic en la tarjeta clicable (con ratón o con Enter/Espacio)	(e: Event) => void

Variables de tema

Las siguientes variables CSS definen sus valores predeterminados en .lh-card y pueden sobrescribirse de forma global o a nivel de componente con themeVars:

Variable	Descripción	Predeterminado
--lh-card-border-radius	Redondeo de las esquinas	border-radius-base + 2px
--lh-card-bg	Color de fondo	--lh-bg-color
--lh-card-border-color	Color del borde	--lh-border-color-light
--lh-card-header-padding / --lh-card-body-padding / --lh-card-footer-padding	Relleno interior de las tres zonas	14px 20px / 18px 20px / 12px 20px
--lh-card-shadow / --lh-card-shadow-hover	Sombra en reposo / al pasar el puntero	Sombra suave doble de tono tinta cálida
--lh-card-loading-bg / --lh-card-loading-highlight	Color base del marcador de carga / resalte del brillo	--lh-border-color-light / mezcla aclarada hacia el tono papel

Slots

Slot	Descripción
header	Zona del título personalizada
extra	Contenido adicional a la derecha de la zona del título
cover	Portada
default	Contenido principal
footer	Pie

Accesibilidad

• Tarjeta clicable: role="button" + tabindex="0" + activación con Enter/Espacio (patrón button de APG)
• Estado de carga: el contenedor lleva aria-busy="true"; los gráficos del marcador de posición quedan ocultos para el lector de pantalla
• El anillo de foco por teclado usa :focus-visible; no se muestra al hacer clic con el ratón

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/card/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhCardProps

export interface LhCardProps {
  /** Título de la tarjeta (también puede usarse el slot header) */
  title?: string
  /** Momento en que se muestra la sombra */
  shadow?: LhCardShadow
  /** La tarjeta entera es clicable (asume la semántica de teclado de button) */
  clickable?: boolean
  /** Estado de carga: el contenido se sustituye por un marcador de posición esquelético */
  loading?: boolean
  /** Variables de tema a nivel de componente (las claves reciben automáticamente el prefijo --lh-) */
  themeVars?: Record<string, string>
  /** URL del patrón de fondo (p. ej. var(--lh-pattern-willow)); sin restricción de la lista blanca global */
  bgPattern?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhCardShadow _{(de @lh-ui/share/core/card)}

/** Momento en que se muestra la sombra de la tarjeta */
export type LhCardShadow = 'always' | 'hover' | 'never'