Tiles 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!cardTemplateTile( id, primaryText, secondaryText, icon, iconColor, iconAltText, tooltip, showWhen )

Displays a tile card template with a stacked icon, primary text, and secondary text. 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.

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.

The following patterns include usage of the Tiles Template.

Cards as Choices Pattern (Card Choices, Rich Text): Use this pattern to display sets of choices that are quick and easy to navigate.

Feedback

Was this page helpful?