Componente

Card

Contenedor de superficie con proyección de contenido estructurado: header, body y footer. 4 modos de padding, variantes hoverable, flat y bordered.

import { NeuCardComponent } from '@neural-ui/core/card';

Tarjeta con header y cuerpo.

Eleva sombra en hover.

Borde de acento primario.

Sin sombra ni borde.

Relleno compacto.

Footer con acciones.

import { NeuCardComponent } from '@neural-ui/core/card';

@Component({
  imports: [NeuCardComponent],
  template: `
    <!-- Básica / Basic -->
    <neu-card>
      <p>Card content</p>
    </neu-card>

    <!-- Con header y footer / With header and footer -->
    <neu-card>
      <div neu-card-header><h3>Title</h3></div>
      <p>Card body</p>
      <div neu-card-footer>
        <button neu-button variant="ghost" size="sm">Cancel</button>
        <button neu-button size="sm">Confirm</button>
      </div>
    </neu-card>

    <!-- Hoverable / Hoverable -->
    <neu-card [hoverable]="true"><p>Raises the shadow on hover</p></neu-card>

    <!-- Flat (sin sombra) / Flat (no shadow) -->
    <neu-card [flat]="true"><p>Flat card</p></neu-card>

    <!-- Bordered / Bordered -->
    <neu-card [bordered]="true"><p>Accent border</p></neu-card>

    <!-- Padding personalizado / Custom padding -->
    <neu-card padding="sm"><p>Small padding</p></neu-card>
    <neu-card padding="lg"><p>Large padding</p></neu-card>
  `
})
export class MyComponent {}