Card

Uso

Card es un contenedor de presentación, no un botón. Proyecta un encabezado con neu-card-header, el contenido sin marcador en el cuerpo y las acciones con neu-card-footer. padding afecta solo al cuerpo. flat elimina la sombra; bordered añade un borde de acento. hoverable cambia la elevación visual, pero no añade un evento de clic ni interacción con teclado.

Ejemplos

Prueba el ejemplo y abre Código para ver la implementación completa. Reiniciar restablece el estado inicial del ejemplo.

Revisa el pedido antes de confirmarlo.

Superficie discreta

Una tarjeta con solo cuerpo, sin Header ni Footer. Flat elimina la sombra, no el borde estructural.

Pendiente de confirmación.

Prueba y configura

Cambia las opciones y revisa la vista previa. El template generado permanece junto a los controles; Código contiene el ejemplo ejecutable completo.

Vista previa

Agrupa un título, contenido relacionado y acciones en una superficie.

Template generado: refleja las opciones anteriores. Abre Código para ver los imports y el estado completos.

<neu-card
  padding="md"
>
  <h3 neu-card-header>Resumen del proyecto</h3>
  <p>Contenido relacionado</p>
  <div neu-card-footer>Actualizado hoy</div>
</neu-card>

Datos y contenido

La aplicación proporciona los Inputs y controla la interacción del entorno. Este componente no tiene modelos ni Outputs. La proyección de contenido y los templates de iconos se documentan por separado cuando existen.

Accesibilidad y teclado

Utiliza un encabezado real en el contenido proyectado cuando la tarjeta presenta una sección. Coloca las acciones en botones o enlaces; no utilices el efecto hover como interacción. La tarjeta no recibe foco con Tab. Los ejemplos emplean botones con semántica nativa para confirmar y guardar.

Tecla	Acción
`—`	Sin interacción de teclado propia; los botones y enlaces proyectados conservan su comportamiento de teclado.

API

Todos los Inputs públicos se extraen del paquete Core fijado. Los tipos con nombre enlazan con sus definiciones. Solo se enumeran las zonas de proyección y los templates públicos reales.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`bordered`	`boolean`	`false`	`[bordered]`	Utiliza el color primario de acento para el borde.
`flat`	`boolean`	`false`	`[flat]`	Elimina la sombra; conserva el borde estructural.
`hoverable`	`boolean`	`false`	`[hoverable]`	Añade elevación visual al pasar el cursor; no añade interacción.
`padding`	`NeuCardPadding`	`'md'`	`[padding]`	Espaciado solo del cuerpo: none, sm, md o lg.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`[neu-card-header]` Header de Card Ver ejemplo	Proyección de contenido Utiliza un título o controles de cabecera.	`<ng-content select="[neu-card-header]" />` Contexto utilizado: `—`
`*` Cuerpo de Card Ver ejemplo	Proyección de contenido El contenido relacionado aparece en el cuerpo con espaciado.	`<ng-content />` Contexto utilizado: `—`
`[neu-card-footer]` Footer de Card Ver ejemplo	Proyección de contenido Coloca acciones relacionadas o texto complementario en el pie.	`<ng-content select="[neu-card-footer]" />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Proyección Header

[neu-card-header]

El Header permite componer otros componentes, no solo una cadena.

Proyección del cuerpo

*

Datos de entrega

El contenido sin marcador se proyecta en el cuerpo. Ajusta su espaciado con el Input padding.

Preparado

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuCardPaddingTypeScript

Estilos y tokens

El espaciado del cuerpo depende de padding; Header y Footer conservan su propio espaciado. Los tokens de superficie, borde, radio y sombra de Core definen la tarjeta. Mantén el contenido proyectado adaptable y no uses hoverable como sustituto de una acción visible.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Bordes de controles al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.16)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-radius-lg`	Radio de esquina	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`12px`
`--neu-shadow-lg`	Elevación de la superficie o capa	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

Uso