Card

import { Component } from '@angular/core';
import { WrCard, WrCardFooter, WrCardHeader } from 'ngwr/card';

@Component({ imports: [WrCard, WrCardFooter, WrCardHeader] })
export class MyComponent {}

Manage account preferences and notification rules.

<wr-card>
  <wr-card-header>
    <h3>Settings</h3>
  </wr-card-header>
  <p>Body content.</p>
  <wr-card-footer>
    <button wr-btn type="button" color="primary">Save</button>
  </wr-card-footer>
</wr-card>

Just a surface around content.

<wr-card>
  <p>Just a surface around content.</p>
</wr-card>

Hoverable

No border

Compact

Loading overlay

<wr-card hoverable>Click me</wr-card>

<wr-card [bordered]="false">No border</wr-card>

<wr-card compact>Tighter paddings</wr-card>

<wr-card [loading]="reloading()">
  <p>Spinner overlay while data loads.</p>
</wr-card>

Name	Description	Type	Default
`bordered`	1px border around the surface.	`boolean`	`true`
`hoverable`	Lift and shadow on hover, pointer cursor.	`boolean`	`false`
`loading`	Spinner over a dimmed body. Sets `aria-busy`.	`boolean`	`false`
`compact`	Half the padding.	`boolean`	`false`
`<wr-card-header>`	Header slot (`.wr-card__header`).	`component`	`—`
`<wr-card-footer>`	Footer slot (`.wr-card__footer`).	`component`	`—`

Variable	Default	Declared on
`--wr-card-bg`	`var(--wr-color-surface)`	`.wr-card`
`--wr-card-border`	`var(--wr-border-base)`	`.wr-card`
`--wr-card-color`	`var(--wr-color-on-surface)`	`.wr-card`
`--wr-card-font-family`	`var(--wr-font-family-base)`	`.wr-card`
`--wr-card-gap`	`var(--wr-space-sm)`	`.wr-card`
`--wr-card-header-font-weight`	`var(--wr-font-weight-medium)`	`.wr-card`
`--wr-card-padding-x`	`var(--wr-space-xl)`	`.wr-card` +1 variant override
`--wr-card-padding-y`	`var(--wr-space-lg)`	`.wr-card` +1 variant override
`--wr-card-radius`	`var(--wr-border-radius-base)`	`.wr-card`
`--wr-card-shadow`	`var(--wr-shadow-xs)`	`.wr-card`
`--wr-card-shadow-hover`	`var(--wr-shadow-overlay)`	`.wr-card`

Installation

Basic usage

Settings

Without header / footer

Variants

API

CSS variables

See also