Card API
Full surface of the oge-card container, its attribute slot directives and the config provider.
Properties Slots Types
OgeCard
oge-cardProperties 9
| Name | Type | Default | Description |
|---|---|---|---|
header | string | undefined | — | Header title. Named after the PrimeNG input rather than title — a static title attribute would double as a native tooltip. |
subheader | string | undefined | — | Line rendered under header in the muted color. |
stylingMode | 'outlined' | 'raised' | 'filled' | 'flat' | 'outlined' | Chrome preset: outlined (border), raised (rests on the --oge-shadow-card token), filled (tinted surface) or flat (no chrome — for a card nested in another surface). Falls back to provideOgeCardConfig({ stylingMode }). |
orientation | 'vertical' | 'horizontal' | 'vertical' | horizontal turns the card into a two-column grid with the [ogeCardMedia] element spanning the inline-start column, sized by --oge-card-media-size. Falls back to provideOgeCardConfig({ orientation }). |
size | 'sm' | 'md' | 'lg' | 'md' | Density preset — scales the section padding and type ramp together (--oge-card-pad is the per-card escape hatch). Falls back to provideOgeCardConfig({ size }). |
severity | 'accent' | 'success' | 'warning' | 'danger' | undefined | undefined | Colored status rail on the inline-start edge — the toast’s rail idiom on a static surface. undefined renders no rail. |
interactive | boolean | false | Purely visual affordance for the documented clickable-card pattern: a hover/focus-within lift and a keyboard focus ring on the surface. Adds no role, tabindex or wrapper — pair it with one primary <a> in the content. |
loading | boolean | false | Replaces the content and action row with a shimmer skeleton and marks the card aria-busy. Header, media and footer stay, so the card keeps its footprint while the data arrives. |
Accessibility contract
| Name | Type | Default | Description |
|---|---|---|---|
(no role, no clickable input) | — | — | There is no WAI-ARIA card pattern, so the card renders no role and no tabindex, and ships no clickable-card API — wrapping the card in a link or button is the nested-interactive trap. Add role="article" / role="region" on the host yourself, and make a card clickable with one primary <a> in the content plus a CSS-stretched hit area. |
Types 6
| Name | Type | Description |
|---|---|---|
OgeCardStylingMode | 'outlined' | 'raised' | 'filled' | 'flat' | Chrome preset union — the layout family’s stylingMode vocabulary plus Material’s raised. |
OgeCardOrientation | 'vertical' | 'horizontal' | Section flow union. |
OgeCardSize | 'sm' | 'md' | 'lg' | Density preset union. |
OgeCardSeverity | 'accent' | 'success' | 'warning' | 'danger' | Status rail union for the severity input. |
OgeCardActionsAlign | 'start' | 'center' | 'end' | 'stretched' | Justification of the [ogeCardActions] row. |
OgeCardConfig / OgeCardConfigInput | { stylingMode?; orientation?; size? } | The config shape and its partial input for provideOgeCardConfig(). |
Slot directives
Properties 6
| Name | Type | Description |
|---|---|---|
[ogeCardMedia] | OgeCardMedia | Marks the full-bleed media element — an <img>, <video> or a wrapper. Sized by consumer CSS (aspect-ratio, block-size); there is deliberately no size input. |
[ogeCardAvatar] | OgeCardAvatar | The round image before the header titles — the counterpart of Material’s mat-card-avatar. |
[ogeCardHeaderActions] | OgeCardHeaderActions | Controls at the inline end of the header row. Real controls in the Tab sequence — the card never wraps them in anything interactive. |
[ogeCardActions] | OgeCardActions | The action row under the content. Its align input takes 'start' | 'center' | 'end' | 'stretched' (default 'start') — the Kendo superset of Material’s two values. |
[ogeCardFooter] | OgeCardFooter | A divided strip on the header surface after the actions — metadata rather than commands. |
[ogeCardSeparator] | OgeCardSeparator | A full-bleed hairline between content sections — put it on an <hr> inside the default projection. |
Card configuration
Properties 2
| Name | Type | Description |
|---|---|---|
provideOgeCardConfig(config) | (config: OgeCardConfigInput) => Provider | Application- or component-scoped defaults for stylingMode, orientation and size. There is deliberately no messages block: the card renders no user-facing strings and no interactive chrome of its own. |
OGE_CARD_CONFIG | InjectionToken<OgeCardConfig> | The token behind provideOgeCardConfig(), with OGE_DEFAULT_CARD_CONFIG as its factory default. |