CONTENTBETA

Card

A semantic content container with independently composable header, body and footer sections, native landmarks and complete visual ownership.

Native sectionsComposableHeadless ready

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.

WORKSPACE

Agent workspace

Build, observe and ship autonomous workflows from one focused workspace.

Optional sections

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

78%

Monthly capacity

Semantic roles

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

Default article

No explicit role

Named region

Important landmark

Related group

Grouped content

Presentation

Semantics intentionally removed

Rich projected content

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

ACTIVE

Research agent

Rich projected content remains fully application-owned.

Responsive Card grids

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

Agents

Runs

1,284

Success

98.7%

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.

Consumer surface

Every pixel in this Card is supplied through typed consumer classes.

Component boundaries

Card

Owns semantic surface and section composition.

Application

Owns headings, media, layout and content.

Interactive components

Buttons and links own activation and focus.

ACCESSIBILITY

Structure before decoration

Card preserves native document semantics and never turns a whole surface into an ambiguous control.

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.

PUBLIC API

Card contract

Canonical symbols are NeuralCard, NeuralCardHeader, NeuralCardBody and NeuralCardFooter. Card intentionally emits no events.

NeuralCard inputs

Input	Type	Default	Purpose
role	article \| region \| group \| presentation \| null	null	Optional explicit role on the native article.
ariaLabel	string \| null	null	Direct accessible name.
ariaLabelledby	string \| null	null	Heading ID reference for the accessible name.
unstyled	boolean	false	Removes NeuralNg visual classes.
cardClass	string	''	Additive class on the native article.
classes	NeuralCardClasses	{}	Typed additive section slots.

Section inputs

headerClassstring · ''

Additive native header class.

bodyClassstring · ''

Additive body wrapper class.

footerClassstring · ''

Additive native footer class.

Typed class slots

rootheaderbodyfooter

Public types

NeuralCardRole

article | region | group | presentation

NeuralCardClasses

{ root?, header?, body?, footer? }

DESIGN TOKENS

Card tokens

Neutral responds to runtime surface and mode. Glass, Mist and Futuristic override the same contract without changing markup.

Root tokens

--neural-card-width

Component inline size.

--neural-card-color

Component foreground color.

--neural-card-background

Component background surface.

--neural-card-border

Component border shorthand.

--neural-card-radius

Component corner radius.

--neural-card-shadow

Component box shadow.

--neural-card-backdrop-filter

Component backdrop filter effect.

--neural-card-font-family

Component font family.

Header tokens

--neural-card-header-align

Header cross-axis alignment.

--neural-card-header-justify

Header main-axis alignment.

--neural-card-header-gap

Spacing between header items.

--neural-card-header-padding

Header internal spacing.

--neural-card-header-border

Header border shorthand.

Body tokens

--neural-card-body-padding

Body internal spacing.

--neural-card-body-color

Body foreground color.

Primary

Surface

Card

Import

Basic composition

Agent workspace

Optional sections

Semantic roles

Rich projected content

Research agent

Responsive Card grids

Additive class ownership

Unstyled and typed slots

Consumer surface

Component boundaries

Card

Application

Interactive components

Structure before decoration

Native structure

Real headings

Named landmarks

Interaction belongs inside

Presentation role

Card contract

NeuralCard inputs

Section inputs

Typed class slots

Public types

Card tokens

Root tokens

Header tokens

Body tokens

Footer tokens