Card
Overview of the *Card Component
The Card component consists of Card Items, containers that can hold any other UI component. The number of Card Items can be changed by adding or cloning them.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The Card component has the following common properties:
| Property Name | Property Description |
|---|---|
| Button | If set to True, a button tag will be rendered and the card will become tappable. |
| Routing | Route Name - define the list of routes names from the Routing panel. Route Params field is to add values for Route Params described in the Routing panel. Router Direction - when using a router, it specifies the transition direction when navigating to another page using Href. Navigation with Routing has higher priority than Href. |
| Link Features (options for the component used as a link) | Download- instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name. Href - this property contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Rel - specifies the relationship of the target object to the link object. Target - specify where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top. Type of the Button: Submit, Reset, Button. |
Styles Properties
Under the Styles tab, cards can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Card Color | Select the color of the card from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
| Text Color | Select the card text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
Card ltem
To add a Card Item, click the + button on the Card.
The Card Item component has the following property:
| Property Name | Property Description |
|---|---|
| Type | Click to select card content type: Card content or Card header. |
If you define the card's Type property as Card Header, the component will have the additional properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Translucent | If set to true, the card header will be translucent. For iOS mode only. |
Styles Properties
Under the Styles tab, card headers can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Card Item Color | Set the CSS color of the card item by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
| Text Color | Set the CSS color of the card header text by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
Card ltem Title
To add a Card Item Title, click the + button on the Card Item or use the Text component from the PALETTE.
The Card Item Title component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Type | Click to select the card title type: Card Title or Card Subtitle. |
| Title Text | Content title text. Visible if Title has no child elements. |
| Title Text I18n | If set to True then use the Title Text property for internationalization. |
Styles Properties
Under the Styles tab, card headers can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Card Title Color | Set the CSS color of the card title by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker. |
Please visit Ionic documentation to read more about Card.
Updated about 5 hours ago