SiActionCardComponent documentation¶

selector

button[si-action-card]

An action card component that extends the base card component with option to either select the whole card or trigger an action.

Usage: as selectable card: <button si-card selectable type="button" [(selected)]="isSelected">...</button>

or as an action card: <button si-card type="button" (click)="doSomeAction()">...</button>

Name	Type	Default	Description
heading ¶	`TranslatableString`		Card header text.
imgAlt ¶	`TranslatableString`		Alt text for a provided image.
imgDir ¶	(`undefined` \| `"horizontal"` \| `"vertical"`)	`'vertical'`	Defines if an image is placed on top or start (left) of the card.
imgObjectFit ¶	(`undefined` \| `"fill"` \| `"none"` \| `"contain"` \| `"cover"` \| `"scale-down"`)	`'scale-down'`	Sets the image object-fit CSS property.
imgObjectPosition ¶	`string`		Sets the image object-position CSS property.
imgSrc ¶	`string`		Image source for the card.
selectable ¶	`boolean`	`false`	Makes whole card selectable.
selected ¶	`boolean`	`false`	Indicates if the card is selected. Ignored when `selectable` is not set to `true` .
subHeading ¶	`TranslatableString`		Card secondary header text.

Name	Type	Description
selectedChange ¶	`boolean`	Indicates if the card is selected. Ignored when `selectable` is not set to `true` .

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

Except where otherwise noted, content on this site is licensed under MIT License.