Free cookie consent management tool by TermsFeed

Inline Stats Pattern

On This Page

Tip:  Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Use this pattern to display data values with icons in a compact, horizontal layout. This pattern uses side by side layouts with rich text display components to create inline statistics. This page explains how you can use this pattern in your interface, and walks through the design structure in detail.

inline stats pattern

Design structure

The pattern uses nested side by side layouts to display statistics with icons. Each stat includes an icon and a value with descriptive text using rich text display components.

Pattern expression

When you drag and drop the inline stats pattern onto your interface, an 80-line expression will be added to the section where you dragged it.

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
74
75
76
77
78
79
80

{
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextIcon(
                      icon: "clipboard-o"
                    )
                  }
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: "5",
                      style: "STRONG"
                    ),
                    a!richTextItem(
                      text: " Open Requests"
                    )
                  }
                ),
                width: "MINIMIZE"
              )
            },
            alignVertical: "MIDDLE",
            spacing: "DENSE"
          )
        },
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextIcon(
                      icon: "spinner"
                    )
                  }
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: "3",
                      style: "STRONG"
                    ),
                    a!richTextItem(
                      text: " In Progress Requests"
                    )
                  }
                )
              )
            },
            alignVertical: "MIDDLE",
            spacing: "DENSE"
          )
        }
      )
    },
    alignVertical: "MIDDLE",
    spacing: "SPARSE"
  )
}

Feedback