@myissue/vue-website-page-builder 3.4.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +14 -14
- package/dist/vue-website-page-builder.umd.cjs +14 -14
- package/package.json +1 -1
- package/src/PageBuilder/PageBuilder.vue +1 -1
- package/src/PageBuilder/Preview.vue +2 -2
- package/src/css/style.css +16 -20
- package/src/tests/componentsArray.test.json +4 -4
- package/src/utils/html-elements/component.ts +10 -10
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ watchEffect(() => {
|
|
|
28
28
|
const doc = iframe.contentWindow.document
|
|
29
29
|
doc.open()
|
|
30
30
|
doc.write(
|
|
31
|
-
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
|
|
31
|
+
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="page-builder-wrapper" class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
|
|
32
32
|
)
|
|
33
33
|
doc.close()
|
|
34
34
|
|
|
@@ -46,7 +46,7 @@ watchEffect(() => {
|
|
|
46
46
|
<div
|
|
47
47
|
class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
|
|
48
48
|
>
|
|
49
|
-
<div id="page-builder-
|
|
49
|
+
<div id="page-builder-wrapper">
|
|
50
50
|
<div class="" v-html="htmlPage"></div>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
package/src/css/style.css
CHANGED
|
@@ -478,10 +478,6 @@
|
|
|
478
478
|
|
|
479
479
|
.pbx-myPrimaryInput,
|
|
480
480
|
.pbx-myPrimarySelect {
|
|
481
|
-
appearance: none;
|
|
482
|
-
-webkit-appearance: none;
|
|
483
|
-
-moz-appearance: none;
|
|
484
|
-
|
|
485
481
|
background-repeat: no-repeat;
|
|
486
482
|
background-size: 1rem;
|
|
487
483
|
padding-right: 1rem;
|
|
@@ -504,22 +500,22 @@
|
|
|
504
500
|
border: 1px #dee6f0 solid;
|
|
505
501
|
}
|
|
506
502
|
|
|
507
|
-
#
|
|
508
|
-
#
|
|
509
|
-
#
|
|
510
|
-
#
|
|
511
|
-
#
|
|
512
|
-
#
|
|
513
|
-
#
|
|
514
|
-
#
|
|
515
|
-
#
|
|
516
|
-
#
|
|
517
|
-
#
|
|
518
|
-
#
|
|
519
|
-
#
|
|
520
|
-
#
|
|
521
|
-
#
|
|
522
|
-
#
|
|
503
|
+
#page-builder-wrapper blockquote,
|
|
504
|
+
#page-builder-wrapper dl,
|
|
505
|
+
#page-builder-wrapper dd,
|
|
506
|
+
#page-builder-wrapper pre,
|
|
507
|
+
#page-builder-wrapper hr,
|
|
508
|
+
#page-builder-wrapper figure,
|
|
509
|
+
#page-builder-wrapper p,
|
|
510
|
+
#page-builder-wrapper h1,
|
|
511
|
+
#page-builder-wrapper h2,
|
|
512
|
+
#page-builder-wrapper h3,
|
|
513
|
+
#page-builder-wrapper h4,
|
|
514
|
+
#page-builder-wrapper h5,
|
|
515
|
+
#page-builder-wrapper h6,
|
|
516
|
+
#page-builder-wrapper ul,
|
|
517
|
+
#page-builder-wrapper ol,
|
|
518
|
+
#page-builder-wrapper li {
|
|
523
519
|
margin: 0;
|
|
524
520
|
}
|
|
525
521
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"title": "Text"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
|
-
"html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"
|
|
13
|
+
"html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-bg-black\"><div class=\"pbx-mx-auto pbx-max-w-7xl pbx-m\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
|
|
14
14
|
"id": "0bb012a0-631a-497f-9b7f-832313b64a2b",
|
|
15
15
|
"title": "Three Vertical Images"
|
|
16
16
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"title": "Text"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
"html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"
|
|
28
|
+
"html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-mx-auto pbx-max-w-7xl\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\"> </div> </div> </div> </div>\n</section>",
|
|
29
29
|
"id": "d3b5a3e4-29a3-4b03-88b6-1f77d319af74",
|
|
30
30
|
"title": "Two Vertical Images"
|
|
31
31
|
},
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"title": "Text"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
"html_code": "<section data-component-title=\"YouTube Video\">\n <div class=\"pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-
|
|
43
|
+
"html_code": "<section data-component-title=\"YouTube Video\">\n <div class=\"pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-pt-6 pbx-pb-6\">\n <div id=\"youtube-video\" class=\"pbx-w-full pbx-aspect-video pbx-p-4\">\n\n <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n </iframe>\n </div>\n </div>\n </div>\n </section>",
|
|
44
44
|
"id": "33a26684-eb95-43c9-adb4-d7bce0ca60f7",
|
|
45
45
|
"title": "YouTube Video"
|
|
46
46
|
},
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"title": "Text"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"
|
|
58
|
+
"html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-rounded-tr-full pbx-bg-yellow-100 pbx-rounded-bl-full\">\n<div class=\"pbx-mx-auto pbx-max-w-7xl\">\n<div class=\"pbx-grid pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-myPrimaryGap\">\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1616837874254-8d5aaa63e273?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxOXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1MDR8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1608042314453-ae338d80c427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyfHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1621939745912-aad97fd3a34d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1MXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1NDN8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1617038220319-276d3cfab638?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1fHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1594924571793-f6517415f594?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw0Nnx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1Mjd8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-top\" src=\"https://images.unsplash.com/photo-1683099869102-bcf8791eb0e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjV8fGpld2VybHl8ZW58MHx8fHwxNzUxMDIxNTc4fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</sectio>",
|
|
59
59
|
"id": "7bcda060-8ed5-482f-bcf4-aa6bd7fdb193",
|
|
60
60
|
"title": "Six Square Images Grid"
|
|
61
61
|
}
|
|
@@ -22,61 +22,61 @@ const component: Components[] = [
|
|
|
22
22
|
data: [
|
|
23
23
|
{
|
|
24
24
|
title: 'Single Image',
|
|
25
|
-
html_code: `<section>\n<div class="
|
|
25
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div></div></div>\n</section>`,
|
|
26
26
|
cover_image: null,
|
|
27
27
|
category: 'Image',
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
title: 'Two Vertical Images',
|
|
31
|
-
html_code: `<section>\n<div class="
|
|
31
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
32
32
|
cover_image: null,
|
|
33
33
|
category: 'Image',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
title: 'Two Square Images',
|
|
37
|
-
html_code: `<section>\n<div class="
|
|
37
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
38
38
|
cover_image: null,
|
|
39
39
|
category: 'Image',
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
title: 'Three Square Images',
|
|
43
|
-
html_code: `<section>\n<div class="
|
|
43
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
44
44
|
cover_image: null,
|
|
45
45
|
category: 'Image',
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
title: 'Four Square Images',
|
|
49
|
-
html_code: `<section>\n<div class="
|
|
49
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"> <div class="mx-auto max-w-7xl"> <div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> </div> </div> </div>\n</section>`,
|
|
50
50
|
cover_image: null,
|
|
51
51
|
category: 'Image',
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
title: 'Six Square Images Grid',
|
|
55
|
-
html_code: `<section>\n<div class="
|
|
55
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
56
56
|
cover_image: null,
|
|
57
57
|
category: 'Image',
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
title: 'Two Square Images With Text',
|
|
61
|
-
html_code: `<section>\n<div class="
|
|
61
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p>Start customizing by editing this default text directly in the editor.</p></div></div> \n</div></div></div>\n</section>`,
|
|
62
62
|
cover_image: null,
|
|
63
63
|
category: 'Image & Text',
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
title: 'Three Vertical Images',
|
|
67
|
-
html_code: `<section>\n<div class="
|
|
67
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
68
68
|
cover_image: null,
|
|
69
69
|
category: 'Image',
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
title: 'Four Square Images With Text',
|
|
73
|
-
html_code: `<section>\n<div class="
|
|
73
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
74
74
|
cover_image: null,
|
|
75
75
|
category: 'Image & Text',
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
title: 'Three Square Images With Text',
|
|
79
|
-
html_code: `<section>\n<div class="
|
|
79
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
80
80
|
cover_image: null,
|
|
81
81
|
category: 'Image & Text',
|
|
82
82
|
},
|