Skip to main content
cngx-src documentation

CngxCardTimestamp

ComponentOnPushNo encapsulationv0.1.0

projects/common/card/card-timestamp.component.ts

Import#

import { CngxCardTimestamp } from '@cngx/common/card'

Description#

Displays a formatted date/timestamp, typically in a card footer.

Uses Intl.DateTimeFormat with the injected LOCALE_ID.

<cngx-card>
  <footer cngxCardFooter>
    <cngx-card-timestamp [date]="evaluationDate()" prefix="Evaluierung am:" />
  </footer>
</cngx-card>

Metadata#

Index#

Inputs#

date#Date | string
input()Required

Date to display. Accepts Date objects or ISO strings.

format#Intl.DateTimeFormatOptions | undefined
input()

Intl.DateTimeFormatOptions for the date.

prefix#string | undefined
input()

Optional prefix text before the date (e.g. "Evaluierung am:").

Default visuals for CngxCardTimestamp. The host carries .cngx-card-timestamp - a lightweight inline-flex container that renders an optional label slot before a muted timestamp string.

Slots

  • .cngx-card-timestamp__prefix - optional label before the date

Inheritance

Leaf tokens - the timestamp surface owns its own color, size, and gap without delegating to a foundation cascade. Inline font-size sits at 0.75rem so the timestamp reads as secondary metadata.

Dark mode

Three hooks lift the muted text from a dark gray to a soft light gray so the timestamp retains its secondary-information weight against a dark surface:

  • prefers-color-scheme: dark
  • [data-color-scheme="dark"] / .dark class
  • [data-color-scheme="light"] / .light class (explicit pin)

Index#

Layout

--cngx-card-timestamp-gap#<length>
Default value 4px

Gap between the prefix slot and the date.

Typography

--cngx-card-timestamp-size#*
Default value 0.75rem

Font-size of the timestamp text.

--cngx-card-timestamp-color#<color>
Default value oklch(0.36 0.02 290)

Text color - muted by default.

--cngx-card-timestamp-prefix-weight#<number>
Default value 400

Font-weight of the prefix slot.