Component Library 2.13.1 (configured with Dummy App)
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<section class="panel" data-content-cols="3" data-tablet-content-cols="2" data-panel-style="multi-pattern" data-bgc="primary-light">
  <div class="container">    
    <div class="panel__header">
      <h2 class="panel__title">Press Releases</h2>
    </div>
    <div class="panel__patterns">
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-1">Press Release Title 1</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Swimming pool" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/swimming/800/600" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-2">Press Release Title 2</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Gym fitness" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/fitness/800/600" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-3">Press Release Title 3</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Tennis court" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/tennis/800/600" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-4">Press Release Title 4</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Community event" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/community/800/600" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-5">Press Release Title 5</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Swimming pool" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/swimming/800/600" />
            </div>
          </div>
        </div>
      </div>
      <div class="panel__cell">
        <div class="media-card article-preview" data-media-alignment="top" data-layout-style="full-bleed" data-media-type="image">
          <div class="media-card__content">
            <div class="text-card" data-layout-style="nested" data-leading="fluid" data-title-link="true">  
              <h3 class="text-card__title text-card__title--m"><a data-turbo-frame="_top" href="/gll_component_library/articles/example-6">Press Release Title 6</a></h3>
              <div class="text-card__body">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
              <div class="text-card__meta">June, 16, 2026</div>
            </div>
          </div>
          <div class="media-card__media">
            <div class="img-container" data-fit="cover">
              <img alt="Gym fitness" loading="lazy" width="800" height="600" src="https://picsum.photos/seed/fitness/800/600" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav class="pagination" role="navigation" aria-label="pager">
      <form>
        <span class="pagination__first disabled"><a class="disabled" aria_label="First page" href="#"><span class="material-symbols-outlined"></span></a></span>
        <span class="pagination__prev disabled"><a rel="prev" class="disabled" aria_label="Previous page" href="#"><span class="material-symbols-outlined"></span></a></span>
        <div class='paginator-select' role="button" tabindex="0" aria-haspopup="true" aria-expanded="false" aria-label="Page 1 of 5, select page" data-controller="paginator" data-action="click->paginator#handleInteraction keydown->paginator#handleKeydown focusout->paginator#handleFocusOut mouseenter->paginator#handleMouseEnter mouseleave->paginator#handleMouseLeave">
          <div class="paginator-items">
            <div class="paginator-item selected">
              <a class="selected" href="/?_display=%257B%257D&lookbook%5Bdisplay%5D%5Bmax_width%5D=100%25&page=1">1</a>
            </div>
            <div class="paginator-item">
              <a class="" href="/?_display=%257B%257D&lookbook%5Bdisplay%5D%5Bmax_width%5D=100%25&page=2">2</a>
            </div>
            <div class="paginator-item">
              <a class="" href="/?_display=%257B%257D&lookbook%5Bdisplay%5D%5Bmax_width%5D=100%25&page=3">3</a>
            </div>
            <div class="paginator-item">
              <a class="" href="/?_display=%257B%257D&lookbook%5Bdisplay%5D%5Bmax_width%5D=100%25&page=4">4</a>
            </div>
            <div class="paginator-item">
              <a class="" href="/?_display=%257B%257D&lookbook%5Bdisplay%5D%5Bmax_width%5D=100%25&page=5">5</a>
            </div>
          </div>
        </div>
        <span class="pagination__next"><a rel="next" class="" aria_label="Next page" href="/?_display=%257B%257D&page=2"><span class="material-symbols-outlined"></span></a></span>
        <span class="pagination__last"><a class="" aria_label="Last page" href="/?_display=%257B%257D&page=5"><span class="material-symbols-outlined"></span></a></span>
      </form>
    </nav>
  </div>
</section>
1
2
3
4
5
6
7
8
9
panel = MockData.new(
  title:, body:, listing_type: "articles",
  entries_per_page: 10, layout_background_colour: "primary-light",
  type: :article_listing_panel, contentful_id: nil, content_type_id: nil
)
articles = GllComponentLibrary::ArticleListingPanelsController::PaginatedResult.new(
  entries: build_articles(card_count), current_page:, total_pages:
)
render GllComponentLibrary::Panels::ArticleListingComponent.new(panel:, articles:, lazy_load: false)

No notes provided.

Param Description Input

—

—

—

—

—