Card Layout

Card

Function: a!cardLayout()

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: "SHORT", "MEDIUM", "TALL", "AUTO" (default).

Style

style

Text

Determines the card background color. Valid values: Any valid hex color or "NONE" (default), "STANDARD", "ACCENT", "SUCCESS", "INFO", "WARN", "ERROR".

Show Border

showBorder

Boolean

Determines whether the layout has an outer border. Default: true.

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), "STANDARD".

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

= a!cardLayout(
  style: "STANDARD",
  height: "AUTO",
  marginbelow: "STANDARD",
  contents: a!richTextDisplayField(
    value: {
      a!richTextIcon(
        icon: "calendar",
        color: "ACCENT",
        size: "LARGE"
      ),
      char(10),
      a!richTextItem(
        text: {
          "Time"
        },
        size: "LARGE"
      ),
      char(10),
      a!richTextItem(
        text: {"Timesheets, PTO"},
        style: "EMPHASIS"
      )
    },
    align: "CENTER"
  )
)

Displays the following:

The following patterns include usage of the Card Layout.

  • 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): The cards as list items pattern is good for creating visually rich interfaces using a combination of cards and billboards to show lists of like items.

  • Icon Navigation Pattern (Conditional Display, Formatting): The icon navigation pattern displays a vertical navigation pane where users can click on an icon to view its associated interface.

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

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

Open in Github

On This Page

FEEDBACK