diff --git a/frappe/public/scss/page-builder.scss b/frappe/public/scss/page-builder.scss index a028e34158..6c87f80de2 100644 --- a/frappe/public/scss/page-builder.scss +++ b/frappe/public/scss/page-builder.scss @@ -282,3 +282,40 @@ .split-section-content { margin-top: 2rem; } + +.image-grid { + display: flex; + flex-wrap: wrap; + width: 100%; + + // Offset for padding + margin-right: -2px; + margin-left: -2px; + + .grid-image { + overflow: hidden; + height: 15rem; + border: 2px solid #fff; + border-radius: $border-radius; + + &.wide { + max-width: 75%; + width: 75%; + + img { + width: 100%; + object-fit: cover; + } + } + + &.narrow { + max-width: 25%; + width: 25%; + + img { + height: 100%; + object-fit: cover; + } + } + } +} \ No newline at end of file diff --git a/frappe/website/web_template/section_with_image_grid/__init__.py b/frappe/website/web_template/section_with_image_grid/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html new file mode 100644 index 0000000000..f60c0e0756 --- /dev/null +++ b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html @@ -0,0 +1,18 @@ +
{{ subtitle }}
+ +