Card Layout Component

Function

a!cardLayout( contents, link, height, style, showBorder, showShadow, tooltip, showWhen, marginBelow, accessibilityText, padding, shape, marginAbove, decorativeBarPosition, decorativeBarColor )

Displays any arrangement of layouts and components within a card on an interface. Can be styled or linked.

Parameters

Name	Keyword	Types	Description
Contents	contents	Any Type	Components and layouts to display within the card.
Link	link	Any Type	Link to apply to the card. Create a link with a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!safeLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), or a!authorizationLink().
Height	height	Text	Determines the card height. Valid values: "EXTRA_SHORT", "SHORT", "SHORT_PLUS", "MEDIUM", "MEDIUM_PLUS", "TALL", "TALL_PLUS", "EXTRA_TALL", "AUTO"(default).
Style	style	Text	Determines the card background color. Valid values: Any valid hex color or "NONE" (default), "TRANSPARENT", "STANDARD", "ACCENT", "SUCCESS", "INFO", "WARN", "ERROR", "CHARCOAL_SCHEME", "NAVY_SCHEME", "PLUM_SCHEME".
Show Border	showBorder	Boolean	Determines whether the layout has an outer border. Default: true.
Show Shadow	showShadow	Boolean	Determines whether the layout has an outer shadow. Default: false.
Tooltip	tooltip	Text	Text to display on mouseover.
Visibility	showWhen	Boolean	Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.
Margin Below	marginBelow	Text	Determines how much space is added below the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".
Accessibility Text	accessibilityText	Text	Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.
Padding	padding	Text	Determines the space between the card edges and its contents. Valid values: "NONE", "EVEN_LESS", "LESS" (default), "STANDARD", "MORE", "EVEN_MORE".
Shape	shape	Text	Determines the card shape. Valid values: "SQUARED" (default), "SEMI_ROUNDED", "ROUNDED".
Margin Above	marginAbove	Text	Determines how much space is added above the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".
Decorative Bar Position	decorativeBarPosition	Text	Determines where the decorative bar displays. Valid values: "TOP", "BOTTOM", "START", "END", "NONE" (default).
Decorative Bar Color	decorativeBarColor	Text	Determines the decorative bar color. Valid values: Any valid hex color or "ACCENT" (default), "POSITIVE", "WARN", "NEGATIVE".

Usage considerations

Using the decorativeBarPosition and decorativeBarColor parameters

• The decorativeBarColor is ignored unless the decorativeBarPosition is set.
• To create a consistent and orderly UI, use the same decorativeBarPosition for all cards on an interface.

Using the style parameter with color schemes and header content layouts

• If you're using a predefined or custom color scheme for your interface, use the card layout's style parameter to select matching or complimentary card colors.
  • If you use a header content layout with a predefined color scheme for your background, make sure that your header content layout and cards are using the same predefined color scheme.
  • If you use a dark custom background color for your header content layout, make your cards a lighter color. For more information on backgrounds, check out our header content layout design guidance.
  • If you need your card to blend into the background of your interface, use the "TRANSPARENT" style. This style is great for cards that will appear on multiple different interfaces and be reused throughout an application.

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.

Related Patterns

The following patterns include usage of the Card Layout Component.

• Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.

• Call to Action Pattern (Formatting): Use the call to action pattern as a landing page when your users have a single action to take.

• Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

• Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

• Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

• Document List (Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

• Dual Picklist Pattern (Choice Components, Cards, Checkboxes, Buttons): Use this pattern to view side-by-side lists and move items from one list to the other. The dual picklist is great for moving items from one state to another, like from active to inactive.

• Event Timelines (Timeline, Events): Use the event timeline pattern to display a dated list of events and actions in chronological order. This pattern uses a combination of cards, rich text, and user images to show an easy to navigate list of dated events.

• Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

• KPI Patterns (Formatting): The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

• Leaderboard (Looping): Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

• Milestone Patterns (Looping): There are three options for milestone patterns which all display some form of a progress indicator to guide users through a series of steps.

• Navigation Patterns (Conditional Display, Formatting, Navigation): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

• Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

• Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

• Year-Over-Year Sales Growth (Records, Reports, Formatting): This pattern illustrates how to calculate year-over-year sales growth and display it in a KPI.

Feedback