@myissue/vue-website-page-builder 3.3.64 → 3.3.65
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/README.md +147 -126
- package/dist/logo/mybuilder_new_lowercase.svg +17558 -0
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +7326 -6943
- package/dist/vue-website-page-builder.umd.cjs +54 -51
- package/package.json +2 -2
- package/src/Components/DemoUnsplash.vue +1 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +2 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +18 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +6 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +2 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +5 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +7 -8
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +2 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +4 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/Padding.vue +4 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue +115 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +2 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +14 -7
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +56 -64
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +10 -7
- package/src/PageBuilder/PageBuilder.vue +89 -63
- package/src/PageBuilder/Preview.vue +25 -9
- package/src/composables/extractCleanHTMLFromPageBuilder.ts +4 -3
- package/src/css/app.css +10 -70
- package/src/services/LocalStorageManager.ts +1 -162
- package/src/services/PageBuilderService.ts +584 -265
- package/src/stores/page-builder-state.ts +8 -0
- package/src/tests/PageBuilderTest.vue +20 -19
- package/src/tests/componentsArray.test.json +3 -3
- package/src/types/index.ts +10 -2
- package/src/utils/html-elements/component.ts +10 -10
|
@@ -36,6 +36,7 @@ interface PageBuilderState {
|
|
|
36
36
|
parentElement: HTMLElement | null
|
|
37
37
|
restoredElement: string | null
|
|
38
38
|
currentClasses: string[]
|
|
39
|
+
currentStyles: Record<string, string>
|
|
39
40
|
fontVerticalPadding: string | null
|
|
40
41
|
fontHorizontalPadding: string | null
|
|
41
42
|
fontVerticalMargin: string | null
|
|
@@ -97,6 +98,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
|
|
|
97
98
|
parentElement: null,
|
|
98
99
|
restoredElement: null,
|
|
99
100
|
currentClasses: [],
|
|
101
|
+
currentStyles: {},
|
|
100
102
|
fontVerticalPadding: null,
|
|
101
103
|
fontHorizontalPadding: null,
|
|
102
104
|
fontVerticalMargin: null,
|
|
@@ -208,6 +210,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
|
|
|
208
210
|
getCurrentClasses(state: PageBuilderState): string[] {
|
|
209
211
|
return state.currentClasses
|
|
210
212
|
},
|
|
213
|
+
getCurrentStyles(state: PageBuilderState): Record<string, string> {
|
|
214
|
+
return state.currentStyles
|
|
215
|
+
},
|
|
211
216
|
getFontStyle(state: PageBuilderState): string | null {
|
|
212
217
|
return state.fontStyle
|
|
213
218
|
},
|
|
@@ -365,6 +370,9 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
|
|
|
365
370
|
setCurrentClasses(payload: string[] | ArrayLike<string>): void {
|
|
366
371
|
this.currentClasses = Array.from(payload)
|
|
367
372
|
},
|
|
373
|
+
setCurrentStyles(payload: Record<string, string>): void {
|
|
374
|
+
this.currentStyles = payload
|
|
375
|
+
},
|
|
368
376
|
setFontVerticalPadding(payload: string | null): void {
|
|
369
377
|
this.fontVerticalPadding = payload
|
|
370
378
|
},
|
|
@@ -5,7 +5,6 @@ import DemoMediaLibraryComponentTest from '../tests/TestComponents/DemoMediaLibr
|
|
|
5
5
|
import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderComponentsTest.vue'
|
|
6
6
|
import { onMounted } from 'vue'
|
|
7
7
|
import componentsArray from '../tests/componentsArray.test.json'
|
|
8
|
-
|
|
9
8
|
import { getPageBuilder } from '../composables/builderInstance'
|
|
10
9
|
const pageBuilderService = getPageBuilder()
|
|
11
10
|
|
|
@@ -52,6 +51,17 @@ const features = [
|
|
|
52
51
|
},
|
|
53
52
|
]
|
|
54
53
|
|
|
54
|
+
const publishPageBuilder = function () {}
|
|
55
|
+
|
|
56
|
+
// Convert componentsArray to HTML string
|
|
57
|
+
const htmlString =
|
|
58
|
+
'<div id="pagebuilder" class="bg-yellow-200 border-radius-full pb-6" style="">' +
|
|
59
|
+
componentsArray.map((c) => c.html_code).join('\n') +
|
|
60
|
+
'</div>'
|
|
61
|
+
|
|
62
|
+
// Parse as HTML (not JSON)
|
|
63
|
+
const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(htmlString)
|
|
64
|
+
|
|
55
65
|
const configPageBuilder = {
|
|
56
66
|
userForPageBuilder: {
|
|
57
67
|
name: 'Jane Doe',
|
|
@@ -62,7 +72,7 @@ const configPageBuilder = {
|
|
|
62
72
|
formName: 'collection',
|
|
63
73
|
},
|
|
64
74
|
pageBuilderLogo: {
|
|
65
|
-
src: '/logo/
|
|
75
|
+
src: '/logo/mybuilder_new_lowercase.svg',
|
|
66
76
|
},
|
|
67
77
|
resourceData: {
|
|
68
78
|
title: 'Demo Article',
|
|
@@ -76,25 +86,12 @@ const configPageBuilder = {
|
|
|
76
86
|
settings: {
|
|
77
87
|
brandColor: '#DB93B0',
|
|
78
88
|
},
|
|
79
|
-
|
|
80
|
-
// classes:
|
|
81
|
-
// 'pbx-font-didot pbx-italic pbx-px-20 pbx-rounded-full pbx-rounded-tr-full pbx-border-8 pbx-border-green-800 pbx-border-solid pbx-text-neutral-300 pbx-bg-stone-700',
|
|
82
|
-
// style: {
|
|
83
|
-
// backgroundColor: 'red',
|
|
84
|
-
// border: '6px solid yellow',
|
|
85
|
-
// },
|
|
86
|
-
// },
|
|
89
|
+
pageSettings,
|
|
87
90
|
} as const
|
|
88
91
|
|
|
89
92
|
onMounted(async () => {
|
|
90
|
-
const result = await pageBuilderService.startBuilder(configPageBuilder,
|
|
91
|
-
console.log('Page Builder
|
|
92
|
-
//
|
|
93
|
-
//
|
|
94
|
-
//
|
|
95
|
-
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
|
|
96
|
-
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
|
|
97
|
-
// await pageBuilderService.mountComponentsToDOM(rawHTML)
|
|
93
|
+
const result = await pageBuilderService.startBuilder(configPageBuilder, components)
|
|
94
|
+
console.log('Page Builder inspect the result for message, status, or error::', result)
|
|
98
95
|
})
|
|
99
96
|
</script>
|
|
100
97
|
|
|
@@ -130,7 +127,11 @@ onMounted(async () => {
|
|
|
130
127
|
</div>
|
|
131
128
|
<div class="pbx-m-4">
|
|
132
129
|
<!-- :CustomBuilderComponents="DemoBuilderComponentsTest" -->
|
|
133
|
-
<PageBuilder
|
|
130
|
+
<PageBuilder
|
|
131
|
+
:CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
|
|
132
|
+
:showPublishButton="true"
|
|
133
|
+
@handlePublishPageBuilder="publishPageBuilder"
|
|
134
|
+
></PageBuilder>
|
|
134
135
|
</div>
|
|
135
136
|
</div>
|
|
136
137
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"title": "Text"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
|
-
"html_code": "<section data-componentid=\"0bb012a0-631a-497f-9b7f-832313b64a2b\" data-component-title=\"3 Vertical Images\">\n<div class=\"pbx-w-full 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]
|
|
13
|
+
"html_code": "<section data-componentid=\"0bb012a0-631a-497f-9b7f-832313b64a2b\" data-component-title=\"3 Vertical Images\">\n<div class=\"pbx-w-full 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": "3 Vertical Images"
|
|
16
16
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"title": "Text"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
"html_code": "<section data-componentid=\"d3b5a3e4-29a3-4b03-88b6-1f77d319af74\" data-component-title=\"2 Vertical Images\">\n<div class=\"pbx-w-full 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]
|
|
28
|
+
"html_code": "<section data-componentid=\"d3b5a3e4-29a3-4b03-88b6-1f77d319af74\" data-component-title=\"2 Vertical Images\">\n<div class=\"pbx-w-full 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": "2 Vertical Images"
|
|
31
31
|
},
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"title": "Text"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"html_code": "<section data-componentid=\"7bcda060-8ed5-482f-bcf4-aa6bd7fdb193\" title=\"6 Square Images Grid\" data-component-title=\"6 Square Images Grid\">\n<div class=\"pbx-w-full 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
|
|
58
|
+
"html_code": "<section data-componentid=\"7bcda060-8ed5-482f-bcf4-aa6bd7fdb193\" title=\"6 Square Images Grid\" data-component-title=\"6 Square Images Grid\">\n<div class=\"pbx-w-full 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</section>",
|
|
59
59
|
"id": "7bcda060-8ed5-482f-bcf4-aa6bd7fdb193",
|
|
60
60
|
"title": "6 Square Images Grid"
|
|
61
61
|
}
|
package/src/types/index.ts
CHANGED
|
@@ -29,7 +29,16 @@ export interface BuilderResourceComponent {
|
|
|
29
29
|
// For the full resource object passed to your package
|
|
30
30
|
export type BuilderResourceData = BuilderResourceComponent[]
|
|
31
31
|
|
|
32
|
-
export type StartBuilderResult =
|
|
32
|
+
export type StartBuilderResult =
|
|
33
|
+
| { error: true; reason: string }
|
|
34
|
+
| {
|
|
35
|
+
message: string
|
|
36
|
+
validation?:
|
|
37
|
+
| { error: true; warning: string; status: string }
|
|
38
|
+
| { error: true; reason: string }
|
|
39
|
+
passedComponentsArray?: BuilderResourceData
|
|
40
|
+
}
|
|
41
|
+
|
|
33
42
|
// Store interfaces for better type safety
|
|
34
43
|
export interface PageBuilderStateStore {
|
|
35
44
|
getTextAreaVueModel: string | null
|
|
@@ -204,7 +213,6 @@ export interface PageBuilderUser {
|
|
|
204
213
|
export interface PageSettings {
|
|
205
214
|
classes: string
|
|
206
215
|
style?: Record<string, string>
|
|
207
|
-
imageUrlPrefix?: string
|
|
208
216
|
}
|
|
209
217
|
|
|
210
218
|
// Page Builder Configuration interface
|
|
@@ -21,52 +21,52 @@ const component: Components[] = [
|
|
|
21
21
|
data: [
|
|
22
22
|
{
|
|
23
23
|
title: 'Single Image',
|
|
24
|
-
html_code: `<section>\n<div class="w-full 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
|
|
24
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
25
25
|
cover_image: null,
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
title: '2 Vertical Images',
|
|
29
|
-
html_code: `<section>\n<div class="w-full 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]
|
|
29
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
30
30
|
cover_image: null,
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
title: '2 Square Images',
|
|
34
|
-
html_code: `<section>\n<div class="w-full 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
|
|
34
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
35
35
|
cover_image: null,
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
title: '3 Square Images',
|
|
39
|
-
html_code: `<section>\n<div class="w-full 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
|
|
39
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
40
40
|
cover_image: null,
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
title: '6 Square Images Grid',
|
|
44
|
-
html_code: `<section>\n<div class="w-full 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
|
|
44
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
45
45
|
cover_image: null,
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
title: 'Two Square Images With Text',
|
|
49
|
-
html_code: `<section>\n<div class="w-full 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
|
|
49
|
+
html_code: `<section>\n<div class="w-full 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><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>`,
|
|
50
50
|
cover_image: null,
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
title: '3 Vertical Images',
|
|
54
|
-
html_code: `<section>\n<div class="w-full 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]
|
|
54
|
+
html_code: `<section>\n<div class="w-full 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>`,
|
|
55
55
|
cover_image: null,
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
title: '4 Square Images With Text',
|
|
59
|
-
html_code: `<section>\n<div class="w-full 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
|
|
59
|
+
html_code: `<section>\n<div class="w-full 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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
60
60
|
cover_image: null,
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
title: '3 Square Images With Text',
|
|
64
|
-
html_code: `<section>\n<div class="w-full 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
|
|
64
|
+
html_code: `<section>\n<div class="w-full 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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
65
65
|
cover_image: null,
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
title: '2 Square Images With Text',
|
|
69
|
-
html_code: `<section>\n<div class="w-full 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-square
|
|
69
|
+
html_code: `<section>\n<div class="w-full 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-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
70
70
|
cover_image: null,
|
|
71
71
|
},
|
|
72
72
|
],
|