Card

Usage

Card is a presentation container, not a button. Project a heading with neu-card-header, unmarked content into the body, and actions with neu-card-footer. padding affects the body only. flat removes the shadow; bordered adds an accent border. hoverable changes visual elevation but does not add a click event or keyboard interaction.

Examples

Try the example and open Code to see its full implementation. Reset restores the initial demonstration state.

Review the order before confirming it.

Quiet surface

A body-only card without header or footer. Flat removes the shadow, not the structural border.

Awaiting confirmation.

Try and configure

Change the options and inspect the live preview. The generated template stays next to the controls; Code contains the complete executable source.

Live preview

Keep a title, related content and actions in one surface.

Generated template: reflects the configuration above. Open Code for the complete imports and state.

<neu-card
  padding="md"
>
  <h3 neu-card-header>Project summary</h3>
  <p>Related content</p>
  <div neu-card-footer>Updated today</div>
</neu-card>

Data and content

The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.

Accessibility and keyboard

Use a real heading in the projected content when the card introduces a section. Put actions in buttons or links; do not rely on the hover effect as an interaction. The card itself is not a tab stop. The examples use native button semantics for confirmation and saving.

Key	Action
`—`	No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.

API

All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`bordered`	`boolean`	`false`	`[bordered]`	Uses the primary accent color for the border.
`flat`	`boolean`	`false`	`[flat]`	Removes the shadow; retains the structural border.
`hoverable`	`boolean`	`false`	`[hoverable]`	Adds visual elevation on hover; no interaction is added.
`padding`	`NeuCardPadding`	`'md'`	`[padding]`	Body padding only: none, sm, md or lg.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`[neu-card-header]` Card header View example	Content projection Use a heading or header controls.	`<ng-content select="[neu-card-header]" />` Context used: `—`
`*` Card body View example	Content projection Related content appears in the padded body.	`<ng-content />` Context used: `—`
`[neu-card-footer]` Card footer View example	Content projection Place related actions or supporting text in the footer.	`<ng-content select="[neu-card-footer]" />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Header projection

[neu-card-header]

The header can compose other components, not just a string.

Body projection

*

Delivery details

Unmarked content is projected into the body. Apply body padding with the padding input.

Ready

Public Types

Open a type to inspect its definition and interface fields.

NeuCardPaddingTypeScript

Styles and tokens

Body spacing follows padding; header and footer keep their own spacing. Core surface, border, radius and shadow tokens define the card. Keep projected content responsive and do not use hoverable as a substitute for a visible action.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Control borders on hover	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.16)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-radius-lg`	Corner radius	Shared by other Core consumers; scope the override.	`12px`
`--neu-shadow-lg`	Surface or overlay elevation	Shared by other Core consumers; scope the override.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`

Related components

Explore related components for composing the surrounding interface.