CardHeader¶

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page.

When assigning a rule to a property of CardHeader, the rule will be passed an instance of the following proxy class as an argument:

CardHeaderProxy

CardHeader Properties¶

Property	Type	Required	Default
ActionButton	CardActionButton	No
CounterText	`string`	No
DetailImage	Image	No
DetailImageIsCircular	`boolean`	No	`false`
ExtendedHeaders	complex	No
Icons	Image	No
KPIView	KPIView	No
Styles	`object`	No
Subtitle	`string`	No
Title	`string`	No
TitleOnMedia	`boolean`	No	`false`
_Name	`string`	No
_Type	`const`	No

ActionButton¶

Supports one specific action and/or multiple actions that directly impact the card.

type: CardActionButton

CounterText¶

To show the count of displayed items in upcoming card body segment.

type: string

DetailImage¶

Image to be displayed in the card. DetailImage is displayed over Icons if both are defined.

type: Image

DetailImageIsCircular¶

If the value is true, the DetailImage is displayed in a circular shape.

type: boolean
default: false

ExtendedHeaders¶

Contains additional elements that provide more information. These elements can be labels, status, rating controls, tags, text.

type: complex

ExtendedHeaders Value¶

Any following options needs to be fulfilled.

Option 1¶

Array of extended header.

Array type:

All items must be of the type:

ExtendedHeader

Option 2¶

Expects return of ExtendedHeader in array format.

Rule

Icons¶

Array of images to be rendered in Icons Stack. Each icon/image size is set to be 16px by 16px. Count of visible images is limited to the count of active labels in the main stack.

type: Image[]

All array items must be of the type: Image

KPIView¶

type: KPIView

Styles¶

Style to be applied on the card.

type: object with following properties.

Property	Type	Required
Title	string	No
Subtitle	string	No
DetailImage	string	No
Icons	string	No
CounterText	string	No
Header	string	No

Title¶

The string value is a style class name for Title.

Text style class

Subtitle¶

The string value is a style class name for Subtitle.

Text style class

DetailImage¶

The string value is a style class name for DetailImage.

Image style class

Icons¶

The string value is a style class name for Icons.

Image style class

CounterText¶

The string value is a style class name for CounterText.

Text style class

Supported in iOS only. The string value is a style class name for Header. It will apply background color to both Header and ExtendedHeaders.

Background style class

Subtitle¶

Subtitle text to be displayed on the card header.

type: string

Title¶

Title text to be displayed on the card header.

type: string

TitleOnMedia¶

If the value is true, the title is displayed on card media instead of card header.

type: boolean
default: false

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Card.Type.Header"