LifeUI
1.53.2Frame Card
Componente de tarjeta con marco que proporciona una estructura visual distintiva con borde y fondo para organizar contenido
Información del Usuario
Este es un ejemplo básico de FrameCard con encabezado y contenido.
Con Icono
El FrameCardHeader incluye estilos automáticos para iconos SVG. Los iconos se ajustan automáticamente al tamaño correcto.
Estado Completado
El FrameCardHeader incluye estilos para iconos SVG que se ajustan automáticamente.
Ejemplos
Tarjeta de Meeting
Reunion con Marketing
Este es un ejemplo de contenido que incluye múltiples elementos y estilos.
10 am - 11:00 am
MarketingTecnologia
Props
FrameCard
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
className | string | - | Clases CSS adicionales para el contenedor principal. |
children | ReactNode | - | Contenido del FrameCard (FrameCardHeader y FrameCardContent). |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |
FrameCardHeader
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
className | string | - | Clases CSS adicionales para el encabezado. |
children | ReactNode | - | Contenido del encabezado (normalmente FrameCardTitle e iconos). |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |
FrameCardTitle
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
className | string | - | Clases CSS adicionales para el título. |
children | ReactNode | - | Texto del título. |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |
FrameCardContent
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
className | string | - | Clases CSS adicionales para el contenido. |
children | ReactNode | - | Contenido principal de la tarjeta. |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |