# new CardComponent(type, title, body, subtitle, color, separator, borders, inlineContent, inlineContentPosition) → {void}
CardComponent is a standalone Angular component built on Ionic's IonCard primitives.
It exposes several @Input() properties to control appearance and content:
type, title, body, subtitle, color, separator, borders, inlineContent, and inlineContentPosition.
The component integrates with the application's media service to react to dark-mode changes
and toggles the dark-palette CSS class on the host element accordingly.
Reusable, presentational card UI component for use across the application.
Parameters:
| Name | Type | Description |
|---|---|---|
type |
'clear'
|
'shadow'
|
Visual rendering style for the card; 'clear' (default) or 'shadow'. |
title |
string
|
Primary title text displayed in the card header. |
body |
'small'
|
'default'
|
'blank'
|
Body size preset controlling padding/typography; defaults to 'default'. |
subtitle |
string
|
Optional subtitle rendered under the title. |
color |
Color
|
Ionic color token applied to the card header/title. |
separator |
boolean
|
When true, renders a divider between header and body. |
borders |
boolean
|
Controls whether borders are rendered; defaults to true. |
inlineContent |
string
|
SafeHtml
|
Inline HTML/SafeHtml to render inside the body. |
inlineContentPosition |
'top'
|
'bottom'
|
Where to render |
void
Example
<ngx-decaf-card
[type]="'shadow'"
[title]="'Account overview'"
[subtitle]="'Summary for the current user'"
[color]="'primary'"
[separator]="true"
[borders]="true"
[inlineContent]="safeHtmlValue"
inlineContentPosition="top"
>
<!-- card content here -->
</ngx-decaf-card>Members
'small'
|
'default'
|
'blank'
# body
Adjusts padding and typographic scale inside the card body. 'small' reduces spacing, 'blank' hides the body area.
Body size preset for the card.
- Default Value:
- 'default'
'small'
|
'default'
|
'blank'
# body
Adjusts padding and typographic scale inside the card body. 'small' reduces spacing, 'blank' hides the body area.
Body size preset for the card.
- Default Value:
- 'default'
boolean
# borders
Set to false to remove borders for inline or transparent card designs. Marked override to explicitly shadow the base directive's value.
Controls whether the card renders borders.
- Default Value:
- true
boolean
# borders
Set to false to remove borders for inline or transparent card designs. Marked override to explicitly shadow the base directive's value.
Controls whether the card renders borders.
- Default Value:
- true
Color
# color
When provided, the color token (for example 'primary' or 'tertiary') is applied to title/header elements where supported.
Ionic color token applied to the card.
- Default Value:
- ''
Color
# color
When provided, the color token (for example 'primary' or 'tertiary') is applied to title/header elements where supported.
Ionic color token applied to the card.
- Default Value:
- ''
string
# componentName
Read-only-ish string identifying the concrete component class for instrumentation, styling helpers and debug logs.
Internal component identifier used by the base NgxComponentDirective.
string
# protected componentName
Read-only-ish string identifying the concrete component class for instrumentation, styling helpers and debug logs.
Internal component identifier used by the base NgxComponentDirective.
string
|
SafeHtml
# inlineContent
Useful for short snippets of rich content provided by the consumer. When passing raw HTML prefer SafeHtml to avoid sanitization issues.
Inline HTML or SafeHtml content to render inside the card body.
string
|
SafeHtml
# inlineContent
Useful for short snippets of rich content provided by the consumer. When passing raw HTML prefer SafeHtml to avoid sanitization issues.
Inline HTML or SafeHtml content to render inside the card body.
'top'
|
'bottom'
# inlineContentPosition
Pass 'top' to render inline content above the body or 'bottom' to render it below. Defaults to 'bottom'.
Position where inlineContent is rendered within the body.
'top'
|
'bottom'
# inlineContentPosition
Pass 'top' to render inline content above the body or 'bottom' to render it below. Defaults to 'bottom'.
Position where inlineContent is rendered within the body.
string
# margins
Rendered prominently at the top of the card; consumers should pass a short, human-friendly string.
Primary title text for the card header.
- Default Value:
- ''
string
# margins
Rendered prominently at the top of the card; consumers should pass a short, human-friendly string.
Primary title text for the card header.
- Default Value:
- ''
boolean
# separator
When true, a divider line (or equivalent styling) is rendered to separate the header from the body.
Toggle to render a visual separator between header and content.
- Default Value:
- false
boolean
# separator
When true, a divider line (or equivalent styling) is rendered to separate the header from the body.
Toggle to render a visual separator between header and content.
- Default Value:
- false
string
# subtitle
Use for short secondary text such as an explanation or contextual note.
Optional subtitle shown below the title in the header area.
- Default Value:
- ''
string
# subtitle
Use for short secondary text such as an explanation or contextual note.
Optional subtitle shown below the title in the header area.
- Default Value:
- ''
string
# title
Rendered prominently at the top of the card; consumers should pass a short, human-friendly string.
Primary title text for the card header.
- Default Value:
- ''
string
# title
Rendered prominently at the top of the card; consumers should pass a short, human-friendly string.
Primary title text for the card header.
- Default Value:
- ''
'clear'
|
'shadow'
# type
Controls the card's surface treatment. Use 'clear' for a flat look or 'shadow' to add elevation.
Visual rendering style for the card.
- Default Value:
- 'clear'
'clear'
|
'shadow'
# type
Controls the card's surface treatment. Use 'clear' for a flat look or 'shadow' to add elevation.
Visual rendering style for the card.
- Default Value:
- 'clear'
Methods
# ngOnInit() → {void}
ngOnInit sets the component as initialized and subscribes to the application's media service dark-mode observable. On each emission it updates the local isDarkMode flag and calls the media service helper to toggle the dark-palette CSS class on the component host element. The subscription uses the provided mediaService observable and performs side effects only.
Angular lifecycle hook: component initialization.
void