-
Notifications
You must be signed in to change notification settings - Fork 1
/
content-blocks.html
629 lines (567 loc) · 27.7 KB
/
content-blocks.html
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Content Blocks | REC+ Designer Hub by ReallyEasyCart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<header class="page-header">
<h1>Content Blocks</h1>
<h2><a href="/">Return to REC+ Designer Hub</a></h2>
</header>
<div class="page-main page-main--with-sidebar-nav">
<nav class="page-sidebar-nav">
<ul>
<li>
<a href="#">Intro</a>
</li>
<li>
<a href="#types">Types</a>
<ul>
<li><a href="#type--text">text</a></li>
<li><a href="#type--html">html</a></li>
<li><a href="#type--image">image</a></li>
<li><a href="#type--background-image">background-image</a></li>
<li><a href="#type--map">map</a></li>
<li><a href="#type--youtube">youtube</a></li>
<li><a href="#type--page-url">page-url</a></li>
<li><a href="#type--small-text">small-text</a></li>
<li><a href="#type--link">link <span class="marker marker--new">New</span></a></li>
<li><a href="#type--feature">feature <span class="marker marker--new">New</span></a></li>
<li><a href="#type--model">model <span class="marker marker--new">New</span></a></li>
</ul>
</li>
<li>
<a href="#options">Options</a>
<ul>
<li><a href="#option--name">name</a></li>
<li><a href="#option--type">type</a></li>
<li><a href="#option--unique">unique</a></li>
<li><a href="#option--template">template</a></li>
<li><a href="#option--repeatable">repeatable <span class="marker marker--new">New</span></a></li>
<li><a href="#option--listClass">listClass <span class="marker marker--new">New</span></a></li>
<li><a href="#option--asArray">asArray <span class="marker marker--new">New</span></a></li>
</ul>
</li>
<li>
<a href="#extras">Extras</a>
<ul>
<li><a href="#extra--isset">Isset checks</a></li>
<li><a href="#extra--enabled">Enabled checks <span class="marker marker--new">New</span></a></li>
</ul>
</li>
<li>
<a href="#recipes">Recipes</a>
<ul>
<li><a href="#recipe--simple-text-image">Text with image right</a></li>
<li><a href="#recipe--owl-carousel">Owl carousel</a></li>
<li><a href="#recipe--sub-nav">Sub nav</a></li>
<li><a href="#recipe--services">Services</a></li>
<li><a href="#recipe--team-members">Team members <span class="marker marker--new">Featured</span></a></a></li>
<li><a href="#recipe--quick-features">Quick features</a></li>
<li><a href="#recipe--feature-sections">Feature sections <span class="marker marker--new">Featured</span></a></a></li>
<li><a href="#recipe--article-style">Article style</a></li>
</ul>
</li>
</ul>
</nav>
<main class="documentation-style-headers">
<p>Content blocks allow you to put the CMS back into page layouts.
<br>When a developer adds a <code>rec_block()</code> function into a Twig layout file, this renders an editor for it into the edit page view for the developer or site admins to use.</p>
<p>e.g. Say you want to have an editable title & text area with an image to the side.
In the layout you might do something like:</p>
<pre><code class="language-twig">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
{{ rec_block("Title area", unique=true, type="html") }}
</div>
<div class="pure-u-1 pure-u-md-1-2">
{{ rec_block("Title side image", unique=true, type="image") }}
</div>
</div>
</code></pre>
<!-- Types -->
<h1 id="types">Types of content blocks available:</h1>
<p>Content blocks can render in many different types, here's a run down of what we have available.</p>
<h2 id="type--text">text</h2>
<p>Textarea inputs for medium length text entry.</p>
<p>The text type is the <strong>default</strong> for content blocks if you don't pass another type.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="text") }}
</code></pre>
<h2 id="type--html">html</h2>
<p>Allows entry of HTML by use of a wysiwyg editor.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="html") }}
</code></pre>
<h2 id="type--image">image</h2>
<p>Image uploader with advanced options available for alt text, link & an optional small screen version of the image for mobile to allow switching the image for small screens (e.g. if the large image contains small text you may want an image without the text or different sized text to show instead).</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="image") }}
</code></pre>
This will return an image tag by default:
<pre><code class="language-html">
<img src="/uploaded/path/here">
</code></pre>
but can also return a link and picture tag if you're using advanced options, here's a full example with all options:
<pre><code class="language-html">
<a href="/some/link">
<picture>
<source srcset="/uploaded/path/here" media="(max-width: 48em)">
<img src="/uploaded/path/here" alt="image alt text">
</picture>
</a>
</code></pre>
<p><span class="marker marker--new">New</span> See the recipes below for an example combining the image block type with the <code>repeatable=true</code> option to create an image carousel.</p>
<h2 id="type--background-image">background-image</h2>
<p>Image uploader but specifically for use with background images such as the background of a hero unit.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="background-image") }}
</code></pre>
This returns the image formatted for use in CSS:
<pre><code class="language-css">
url('/uploaded/path/here')
</code></pre>
<h2 id="type--map">map</h2>
<p>This is a input for adding an address and on the front end we'll pass that address to Google Maps to render an interactive map.</p>
<p>As it returns an <code>iframe</code> we can utilise the "iframe-container" class to make it responsive and set an aspect ratio. (Available default aspect ratios: 5-1, 4-1, 3-1, 2-1, 3-2, 4-3, 1-1, but you can add more with css by varying the <code>padding-bottom</code>. You can also add -sm, -md, -lg or -xl to each class have different sizes kick in at different breakpoints, e.g. "iframe-container iframe-container-2-1 iframe-container-4-1-md")</p>
<pre><code class="language-twig">
<div class="iframe-container iframe-container-3-1">
{{ rec_block("Name", type="map") }}
</div>
</code></pre>
Given "123 Fake Street, Worcester, WR12AB" in admin, this will return:
<pre><code class="language-html">
<div class="iframe-container iframe-container-3-1">
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/search?key=xxxxx&q=123+Fake+Street,+Worcester,+WR12AB"
allowfullscreen>
</iframe>
</div>
</code></pre>
<h2 id="type--youtube">youtube</h2>
<p>This is a url input for adding a YouTube link and on the front end we'll embed the player for you.</p>
<p>As it returns an <code>iframe</code> we can utilise the "iframe-container" class to make it responsive and set an aspect ratio. (Available default aspect ratios: 5-1, 4-1, 3-1, 2-1, 3-2, 4-3, 1-1, but you can add more with css by varying the <code>padding-bottom</code>. You can also add -sm, -md, -lg or -xl to each class have different sizes kick in at different breakpoints, e.g. "iframe-container iframe-container-2-1 iframe-container-4-1-md")</p>
<pre><code class="language-twig">
<div class="iframe-container iframe-container-3-1">
{{ rec_block("Name", type="youtube") }}
</div>
</code></pre>
Given a YouTube video link like https://www.youtube.com/watch?v=RE87rQkXdNw we'd return:
<pre><code class="language-html">
<div class="iframe-container iframe-container-3-1">
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/RE87rQkXdNw"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</code></pre>
<h2 id="type--page-url">page-url</h2>
<p>Offers a dropdown of pages in page manager to select a page as an alternative to entering a url.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="page-url") }}
</code></pre>
<h2 id="type--small-text">small-text</h2>
<p>Similar to the text field but offers a smaller single line text input.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="small-text") }}
</code></pre>
<h2 id="type--link">link</h2>
<p>A quick way to insert a link with a single line text and url input.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="link") }}
</code></pre>
which returns a link element for you:
<pre><code class="language-html">
<a href="/some/link">
Text entered
</a>
</code></pre>
<h2 id="type--feature">feature</h2>
<p>Feature blocks are something a bit special with fields for uploading an image, title, text, with advanced options for link and link text all together.</p>
<p>We noticed a common pattern for building sites using content blocks & modules involves some combination of an image, text, title and optional link. In fact all those fields are optional so you can use an combination together.</p>
<p>This becomes especially powerful when combined with the <code>repeatable=true</code> option to form simpler versions of modules for the site without any setup.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="feature") }}
</code></pre>
which if all fields are entered will return:
<pre><code class="language-html">
<section class="cb-feature">
<div class="cb-feature__image">
<img src="/uploaded/path/here">
</div>
<header class="cb-feature__title">
<h3>Title here</h3>
</header>
<p class="cb-feature__text">
<img src="/uploaded/path/here">
</p>
<footer class="cb-feature__link">
<a href="/link/path">Learn more</a>
</footer>
</a>
</code></pre>
<p><em>Each of those 4 elements inside the section are optional based on if the field is entered in admin. Also if a link_text is set but no link, the footer will change from a link to just the link text and it's class will adapt.</em></p>
<p>A sort of hidden feature of the elements inside this block type is that we auto define them for you as CSS grid-areas. This means you can quickly use CSS grid to lay them out with the names image, title, text, link and link_text if no link given. You'll see this in use in the recipes.</p>
<p><a href="https://ishadeed.com/article/grid-area/" target="_blank">Learn more about CSS Grid template areas here.</a></p>
<p><span class="marker marker--new">New</span> See the <a href="#recipes">recipes below</a> for many examples of the feature block type with repeatables.</p>
<h2 id="type--model">model</h2>
<p>Model blocks allow you to add 3D Models (with Augmented Reality) to a page.</p>
<pre><code class="language-twig">
{{ rec_block('3D Model', type="model") }}
</code></pre>
<p>When viewing the block in Page Manager/Content Block Manager it will then ask for a .glb or .gltf file (for the basic 3D Model and AR on Android) and a .usdz file (for AR support on iPhones/iOS 12+).</p>
<!-- Options -->
<h1 id="options">Options for content blocks:</h1>
<p>Option modifiers let you customise the content block. Options for making a block unique for each page it's on, or allowing them to store multiple values with repeatables. Here's a full list of what's available:</p>
<h2 id="option--name">name <span class="marker marker--type-string">string</span></h2>
<p>Name is the first & only required argument/option passed to <code>rec_block()</code>.</p>
<p>The name is how you'll reference this block in admin and if you want to re-use it</p>
<pre><code class="language-twig">
{{ rec_block("Name goes here") }}
</code></pre>
<h2 id="option--type">type <span class="marker marker--type-string">string</span></h2>
<p>The type defines how the block will be edited in the admin and rendered on the front end.</p>
<p>If you don't set a type it will default to text. A <a href="#types">full list of types is available above</a>.</p>
<pre><code class="language-twig">
{{ rec_block("Name", type="type goes here") }}
</code></pre>
<h2 id="option--unique">unique <span class="marker marker--type-boolean">boolean</span></h2>
<p>By default, a block is only unqiue based on it's name being unique. That means if a block with the same name is shown on multiple pages it will have the same content.</p>
<p>The <code>unique=true</code> option let's you have the same named block on multiple pages but it will make sure it's content is unique for each page.</p>
<pre><code class="language-twig">
{{ rec_block("Name", unique=true) }}
</code></pre>
<h2 id="option--template">template <span class="marker marker--type-boolean">boolean</span></h2>
<p>Using a test or editor type block and want to use system template tags or use twig functions inside? Passing <code>template=true</code> let's you do this.</p>
<pre><code class="language-twig">
{{ rec_block("Name", template=true) }}
</code></pre>
<h2 id="option--repeatable">repeatable <span class="marker marker--type-boolean">boolean</span></h2>
<p>Repeatables let you save multiple versions on any block type. Multiple images, a list of multiple text lines or multiple feature blocks.</p>
<p>Making a new navigation, an image carousel, or multiple of any other block type is as easy as adding <code>repeatable=true</code>.</p>
<p>Repeatables render add & remove buttons in admin as well as are drag and drop sortable. On the front end they render in <code><ul></code> elements with each item in a <code><li></code>.</p>
<pre><code class="language-twig">
{{ rec_block("Name", repeatable=true) }}
</code></pre>
<pre><code class="language-html">
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</code></pre>
<h2 id="option--listClass">listClass <span class="marker marker--type-string">string</span></h2>
<p>When using repeatables you can pass <code>listClass</code> as a string of space separated class names to add to the <code><ul></code> element.</p>
<p>You can use this to add classes to style with, or for javascript use like <code>owl-carousel</code>, <a href="#recipe--owl-carousel">see owl example below</a></p>
<pre><code class="language-twig">
{{ rec_block("Name", repeatable=true, listClass="your-class-name another-class") }}
</code></pre>
<h2 id="option--asArray">asArray <span class="marker marker--type-boolean">boolean</span></h2>
<p>Allows you to debug the data saved easier & allows for more custom data transformations, e.g. taking a block type and building custom html for it.</p>
<pre><code class="language-twig">
{{ rec_block("Name", asArray=true) }}
</code></pre>
<!-- Extras -->
<h1 id="extras">Extras:</h1>
<p>Here we'll have a few extra notes around content blocks that can be useful for more advanced designs and use cases.</p>
<h2 id="extra--isset">Isset checks</h2>
<p>You may run into cases where you need to check if a block has been filled out, maybe it's something optional for admins to enter? The isset check allows for this, it accepts a name & optionally the <code>unique=true</code> option.</p>
<p>This can also be useful to make sure you only wrap a block with a div for example if it's been filled out, e.g.</p>
<pre><code class="language-twig">
{% if rec_block_isset('xyz') %}
<div class="my-xyz-wrapper">
{{ rec_block('xyz', type="image") }}
</div>
{% endif %}
</code></pre>
<h2 id="extra--enabled">Enabled checks</h2>
<p>Similar to the above isset check, you can also check if it's enabled, this makes it easier for you & admins to turn content blocks on and off, e.g.</p>
<pre><code class="language-twig">
{% if rec_block_enabled('xyz') %}
<div class="my-xyz-wrapper">
{{ rec_block('xyz', type="image") }}
</div>
{% endif %}
</code></pre>
<!-- Recipes -->
<h1 id="recipes">Recipes to get started faster:</h1>
<p>These recipes are a bunch of pre-made examples to drop into any site and customise as freely.</p>
<p>In the following recipes with screenshots we have browser tested these in all modern browsers such as Google Chrome, Firefox, Safari, Opera, Edge, IE11 <em>& even support older versions as far back as IE9</em>.</p>
<p>Several utilise layouts with <a href="https://caniuse.com/#feat=css-grid">CSS Grid</a> & <a href="https://caniuse.com/#feat=flexbox">Flexbox</a> both with great modern browser support and simple fallbacks in place.</p>
<h2 id="recipe--simple-text-image">Text with image right</h2>
<p>A simple example showing 2 content blocks to make up some text with an image to the side.</p>
<p>You can see later in these recipes that the <strong>feature</strong> type may often be a better fit for designs like this, but this is a useful example to know</p>
<pre><code class="language-twig">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
{{ rec_block("Title area", unique=true, type="html") }}
</div>
<div class="pure-u-1 pure-u-md-1-2">
{{ rec_block("Title side image", unique=true, type="image") }}
</div>
</div>
</code></pre>
<h2 id="recipe--owl-carousel">Owl carousel</h2>
<p>A simple example showing 2 content blocks to make up some text with an image to the side.</p>
<p>You can see later in these recipes that the <strong>feature</strong> type may often be a better fit for designs like this, but this is a useful example to know</p>
<pre><code class="language-twig">
{{ rec_block('Image carousel', type="image", repeatable=true, listClass="plain-list owl-carousel owl-theme my-image-carousel") }}
<script>
jQuery('.my-image-carousel').owlCarousel({
loop: true,
margin: 10,
autoHeight: true,
responsive:{
0: { items: 1 },
500: { items: 2 },
1000: { items: 3 }
}
});
</script>
</code></pre>
<h2 id="recipe--sub-nav">Sub nav</h2>
<p>Create a quick sub nav for pages with the following content block.</p>
<pre><code class="language-twig">
{{ rec_block('Sub nav', type="link", repeatable=true, unique=true) }}
</code></pre>
With a few links added in admin for this it'll render as:
<pre><code class="language-html">
<ul>
<li>
<a href="/link/path">Text 1</a>
</li>
<li>
<a href="/another/link">Text 2</a>
</li>
</ul>
</code></pre>
<h2 id="recipe--services">Services</h2>
<p>Show off services a company offers.</p>
<img src="./images/content-block-services.png">
<pre><code class="language-twig">
{{ rec_block('Services', type="feature", repeatable=true, unique=true, listClass="plain-list services-list") }}
</code></pre>
CSS used for this:
<pre><code class="language-css">
.services-list {
text-align: center;
}
.services-list .cb-feature__image img {
max-height: 24px;
margin: 0 auto;
}
.services-list .cb-feature {
margin: 1em;
}
.services-list .cb-feature__text {
margin-top: 0;
/* cut at 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.services-list .cb-feature__title h3 {
margin: 1em;
}
/* split to columns at breakpoints */
@media screen and (min-width: 35.5em) {
/* we'll use flex to handle columns */
.services-list,
.services-list > li,
.services-list .cb-feature {
display: flex;
}
.no-flexbox .services-list > li {
display: inline-block;
vertical-align: top;
}
.services-list {
flex-wrap: wrap;
}
.services-list .cb-feature {
flex-direction: column;
flex: 1;
}
/* 2 col */
.services-list > li {
width: 50%;
}
}
@media screen and (min-width: 48em) {
/* 3 col */
.services-list > li {
width: 33.333%;
}
}
</code></pre>
<h2 id="recipe--team-members">Team members</h2>
<p>Repeatables and feature blocks offer a quick way to add team profiles onto a page.</p>
<p>Here I'm also using the link text witout a link set as the job title.</p>
<img src="./images/content-block-team.png">
<pre><code class="language-twig">
{{ rec_block('Team members', type="feature", repeatable=true, listClass="plain-list team-list") }}
</code></pre>
CSS used for this:
<pre><code class="language-css">
.team-list {
text-align: center;
display: flex;
flex-wrap: wrap;
}
.team-list li {
width: 50%;
padding: .5em;
}
.no-flexbox .team-list li {
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 48em) {
.team-list li {
width: 25%;
}
}
/* we can use css-grid to reorder the position name in the link text to under the name/title */
.team-list .cb-feature {
display: grid;
grid-template-areas:
"image"
"title"
"link_text"
"text";
}
.team-list .cb-feature__image img {
border-radius: 50%;
}
</code></pre>
<h2 id="recipe--quick-features">Quick features</h2>
<p>Bullet point features list with repeatable feature blocks.</p>
<img src="./images/content-block-features.png">
<pre><code class="language-twig">
{{ rec_block('Quick features', type="feature", repeatable=true, unique=true, listClass="plain-list quick-features-list") }}
</code></pre>
CSS used for this:
<pre><code class="language-css">
.quick-features-list {
display: flex;
flex-wrap: wrap;
}
.quick-features-list li {
width: 50%;
}
.no-flexbox .quick-features-list li {
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 48em) {
.quick-features-list li {
width: 25%;
}
}
.quick-features-list .cb-feature {
display: grid;
grid-template-areas:
"image title"
". link_text"
". text";
}
.quick-features-list .cb-feature__image {
max-width: 30px;
align-self: center;
padding-right: 10px;
}
.quick-features-list .cb-feature__title h3 {
margin: 0;
}
</code></pre>
<h2 id="recipe--feature-sections">Feature sections</h2>
<p>Build up larger sections of a page utilising feature blocks.</p>
<p>With CSS nth-child we can automatically alternate the image layout from left to right.</p>
<img src="./images/content-block-feature-sections.png">
<pre><code class="language-twig">
{{ rec_block('Feature sections', type="feature", repeatable=true, unique=true, listClass="plain-list feature-sections-list") }}
</code></pre>
CSS used for this:
<pre><code class="language-css">
@media screen and (min-width: 35.5em) {
.feature-sections-list .cb-feature {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto 1fr;
grid-column-gap: 1em;
grid-template-areas:
"image title"
"image text"
"image link";
}
.feature-sections-list li:nth-child(even) .cb-feature {
grid-template-areas:
"title image"
"text image"
"link image";
}
.feature-sections-list .cb-feature__title h3 {
margin-bottom: 0;
}
}
</code></pre>
<h2 id="recipe--article-style">Article style</h2>
<p>Show a few featured articles with this design.</p>
<img src="./images/content-block-articles.png">
<pre><code class="language-twig">
{{ rec_block('Article style', type="feature", repeatable=true, listClass="plain-list article-style-list") }}
</code></pre>
CSS used for this:
<pre><code class="language-css">
.article-style-list {
display: flex;
flex-wrap: wrap;
}
.article-style-list li {
padding: 1em;
}
.no-flexbox .article-style-list li {
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 48em) {
.article-style-list li {
width: 33.333%;
}
}
</code></pre>
</main>
</div>
<!-- code highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/nord.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/languages/twig.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ENDQCYX1FH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ENDQCYX1FH');
</script>
</body>
</html>