| 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. |
FunctionCopy link to clipboard
a!cardTemplateBarTextJustified( id, primaryText, secondaryText, icon, iconColor, iconAltText, tooltip, showWhen )
Displays a bar card template with an icon, primary text, and secondary text justified on either side of the card. For use in the Card Choice Field cardTemplate parameter.
ParametersCopy link to clipboard
| 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. |
Usage considerationsCopy link to clipboard
Text truncationCopy link to clipboard
- Spacing and truncation look different in the bars template. To ensure that all your text has enough space to show properly, keep your secondary text short when using this template.
ExamplesCopy link to clipboard
Use the interactive editor below to test out your code:
Feature compatibilityCopy link to clipboard
The table below lists this component's compatibility with various features in Appian.
| 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. |
| Process Autoscaling | Compatible |