Page Kit
x
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<section class="c-definition-list-block rpf-decorative-section rpf-decorative-section__block-start-wave rpf-decorative-section__block-end-wave" style="--c-definition-list-block-background: rpf-white">
  <div class="c-definition-list-block__container">
    <div class="c-definition-list-block__content">
      <div class="c-definition-list-block__preamble">
        <div class="ui-subtitle">
          <div class="ui-subtitle__container">
            <h2 class="ui-subtitle__title">Archived Documents</h2>
            <p class="ui-subtitle__text">A description of the archived documents</p>
          </div>
        </div>
      </div>
      <dl class="c-definition-list__container">
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-definition-list-item__container">
          <div class="c-definition-list-item__content">
            <dt>Item</dt>
            <dd>
              <p>This is a definition</p>
            </dd>
            <h4>Related Links:</h4>
            <ul>
              <li><a class="c-link-with-picture" href="https://google.com">
                  Google</a>
              </li>
              <li><a class="c-link-with-picture" href="https://yahoo.com">
                  Yahoo</a>
              </li>
            </ul>
          </div>
        </div>
      </dl>
    </div>
  </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
c(
  'site/definition_list_block',
  title:,
  background_colour:,
  decoration_block_start: 'Wave',
  decoration_block_end: 'Wave',
  description:
) do |component|
  number_of_items.times do
    list_item(component)
  end
end

No notes provided.

Param Description Input

The title of the component

The description of the component

The number of items to display
2
6

The background colour