GET STARTED

Import

Every section is standalone. Import only the sections present in the template.

import { NeuralCard, NeuralCardHeader, NeuralCardBody,
  NeuralCardFooter } from '@neural-ng/core/card';

@Component({
  imports: [NeuralCard, NeuralCardHeader, NeuralCardBody, NeuralCardFooter],
})

Basic composition

Project a real heading and connect the article name with ariaLabelledby when the card needs one.

Optional sections

Header and footer are never required. A body-only region stays compact and semantic.

Semantic roles

The root is always an article element. Add a role only when the information architecture requires it.

Rich projected content

Card does not invent media, title or action inputs. Images, badges, menus and application layouts remain ordinary projected composition.

Responsive Card grids

Card owns its surface, not surrounding layout. CSS Grid or Tailwind remains the correct owner of collection geometry.

Additive class ownership

cardClass, typed slots and local section classes compose without disabling the theme layer.

<neural-card cardClass="max-w-lg" [classes]="{ body: 'leading-7' }">
  <neural-card-header headerClass="items-center">...</neural-card-header>
  <neural-card-body bodyClass="text-sm">...</neural-card-body>
  <neural-card-footer footerClass="justify-end">...</neural-card-footer>
</neural-card>

Unstyled and typed slots

Native structure, ARIA and structural hooks remain while every NeuralNg visual class is removed.

Component boundaries

Native structure

The root renders article; header and footer render their corresponding native elements. Body is a neutral div so consumer content determines its outline.

Real headings

Project an h2 or the heading level required by the surrounding document. Card intentionally has no title input that could flatten the page outline.

Named landmarks

Ordinary cards need no role or name. Use role="region" only for important content and provide either ariaLabel or preferably ariaLabelledby.

Interaction belongs inside

Card has no click output, tabindex or keyboard model. Use real Neural Buttons and links inside it. Do not simulate a clickable card with a generic click handler.

Presentation role

presentation deliberately removes root semantics. Use it only when the surface is purely visual and its projected descendants retain all required meaning.

NeuralCard inputs

Section inputs

Typed class slots

Public types

Root tokens

Header tokens

Body tokens

Footer tokens