Bars Template

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.

Function

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.

Parameters

Name	Keyword	Types	Description
Id	`id`	Any Type	Value that identifies the card.
Primary Text	`primaryText`	Text	Optional text to display on the first line inside the card.
Secondary Text	`secondaryText`	Text	Optional text to display beneath the primary text inside the card.
Icon	`icon`	Text	Icon to display inside the card.
Icon Color	`iconColor`	Text	Determines the icon color. Valid values: Any hex color or `"ACCENT"` (default), `"STANDARD"`, `"SECONDARY"`, `"POSITIVE"`, `"NEGATIVE"`.
Icon Alternative Text	`iconAltText`	Text	Equivalent alternate text for use by screen readers.
Tooltip	`tooltip`	Text	Text to display on mouseover (web) or tap (mobile).
Visibility	`showWhen`	Boolean	Determines whether the card is displayed in the set of card choices. When set to false, the card is hidden. Default: true.

Usage considerations

Text truncation

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.

Examples

Use the interactive editor below to test out your code:

Feature compatibility

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
Process Reports	Incompatible	You cannot use this function to configure a process report.
Process Events	Incompatible	You cannot use this function to configure a process event node, such as a start event or timer event.

Feedback

Was this page helpful?