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	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.

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?