Component

Card

Surface container with structured content projection: header, body and footer. 4 padding modes, hoverable, flat and bordered variants.

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

Card with header and body.

Elevates shadow on hover.

Primary accent border.

No shadow or border.

Compact padding.

Footer with actions.

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 {}