Billboard Layout

Billboard

Function: a!billboardLayout()

Displays a background color, image, or video with optional overlay content.

Parameters

Name Keyword Types Description

Background Media

backgroundMedia

Any Type

Determines the background content. Takes priority over background color. Configure using a!documentImage, a!userImage, a!webImage, or a!webVideo.

Background Color

backgroundColor

Text

Determines the background color. When background media is also specified, the background color shows while media is loading or when background image is transparent. Must be a valid hex code. Default is #f0f0f0.

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.

Height

height

Text

Determines the layout height. Valid values: "SHORT", "MEDIUM" (default), "TALL", "AUTO". Auto renders as MEDIUM when no background media is set.

Margin Below

marginBelow

Text

Determines how much space is added below the layout. Valid values: "NONE", "STANDARD" (default).

Overlay Configurations

overlay

Any Type

Determines the overlay. Configure using a!columnOverlay, a!barOverlay, or a!fullOverlay.

Accessibility Text

accessibilityText

Text

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

Notes

  • A billboard layout may have either a bar, column, full, or no overlay.
  • When overlay content does not fit within the layout, it scrolls vertically.
  • When a video is used as the background, it plays automatically and does not have audio.
  • For billboards with short, medium, or tall height set, background media is displayed as large as possible to fill the available width. When the background media's aspect ratio is different from the layout's aspect ratio, the background will be cut off at the top and bottom. If it is important that the background media be fully visible, use auto height. See the UXDG for guidance on this setting.
  • When the overlay style is none, the standard text color changes based on the selected background color. For light background colors, standard text is dark gray. For dark background colors, standard text is switched to white. This is true even when background media is set.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

=a!billboardLayout(
  backgroundColor: "#619ed6",
  overlay: a!barOverlay(
    position: "BOTTOM",
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: "Finance Summary",
                    size: "LARGE"
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Total Spending",
                        value: a!richTextItem(
                          text: "$31,000.00",
                          size: "MEDIUM"
                        )
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Remaining Budget",
                        value: a!richTextItem(
                          text: a!richTextItem(
                            text: "79%",
                            size: "MEDIUM"
                          ),
                          color: "POSITIVE"
                        )
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        label: "Open Requests",
                        value: a!richTextItem(
                          text: "36",
                          size: "MEDIUM"
                        )
                      )
                    }
                  )
                },
                alignVertical: "TOP"
              )
            }
          )
        },
        alignVertical: "MIDDLE"
      )
    },
    style: "DARK"
  ),
  height: "SHORT"
)

Displays the following:

See the UX Design Guide: Billboard Layout for guidance on when to use each overlay style.

The following patterns include usage of the Billboard Layout.

  • 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.
Open in Github

On This Page

FEEDBACK