SAIL Design System guidance available for Card Layout
Reduce clutter and bring balance to your interface designs with cards. Learn how to use cards to organize content in a way that is easier for users to understand and navigate. |
a!cardTemplateBarTextStacked( id, primaryText, secondaryText, icon, iconColor, iconAltText, tooltip, showWhen )
Displays a bar card template with an icon and stacked primary text and secondary text. For use in the Card Choice Field cardTemplate parameter.
Name | Keyword | Types | Description |
---|---|---|---|
Id |
|
Any Type |
Value that identifies the card. |
Primary Text |
|
Text |
Optional text to display on the first line inside the card. |
Secondary Text |
|
Text |
Optional text to display beneath the primary text inside the card. |
Icon |
|
Text |
Icon to display inside the card. |
Icon Color |
|
Text |
Determines the icon color. Valid values: Any hex color or |
Icon Alternative Text |
|
Text |
Equivalent alternate text for use by screen readers. |
Tooltip |
|
Text |
Text to display on mouseover (web) or tap (mobile). |
Visibility |
|
Boolean |
Determines whether the card is displayed in the set of card choices. When set to false, the card is hidden. Default: true. |
Use the interactive editor below to test out your code:
Feature | Compatibility | Note |
---|---|---|
Portals | Compatible | |
Offline Mobile | Compatible | |
Sync-Time Custom Record Fields | Incompatible | |
Real-Time Custom Record Fields | Incompatible | Custom record fields that evaluate in real time must be configured using one or more Custom Field functions. |
Process Reports | Incompatible | Cannot be used to configure a process report. |
Process Events | Incompatible | Cannot be used to configure a process event node, such as a start event or timer event. |
Bars (Text Stacked) Template