From c89141b36f8ed76b0fe6f0a4c4dffbc29dc8eb0f Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Fri, 23 Jan 2026 08:41:47 -0800 Subject: [PATCH] Split can now be nested with class --- CHANGELOG.md | 2 ++ assets/sass/protocol/components/_split.scss | 8 ++++- components/split/readme.md | 15 ++++++---- components/split/split--nested.html | 33 +++++++++++++++++++++ components/split/split.config.yml | 16 +++++++++- 5 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 components/split/split--nested.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 399dc0ca..15470933 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,6 +51,8 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust ### Split +* Split can now be nested inside content containers with the `mzp-l-split-nested` class +* (breaking) Removed `overflow-x: hidden` from component (#1089) * (breaking) Removed `mzp-l-split-pop-top`, `mzp-l-split-pop-bottom`, and `mzp-l-split-pop` layout classes from Split component * (breaking) Removed `mzp-l-split-media-overflow` and `mzp-l-split-media-constrain-height` layout classes from Split component diff --git a/assets/sass/protocol/components/_split.scss b/assets/sass/protocol/components/_split.scss index 0412dbfa..cdac8644 100644 --- a/assets/sass/protocol/components/_split.scss +++ b/assets/sass/protocol/components/_split.scss @@ -8,7 +8,6 @@ // Basic vertical alignment .mzp-c-split { - overflow-x: hidden; position: relative; padding: var(--theme-spacing-between-block) 0; @@ -37,6 +36,13 @@ .mzp-t-content-xl & { max-width: $content-xl; } + + // Allow split to be nested inside another container (e.g. mzp-l-content) + .mzp-l-split-nested & { + max-width: none; + padding-left: 0; + padding-right: 0; + } } .mzp-c-split-body { diff --git a/components/split/readme.md b/components/split/readme.md index 74296bb8..a2834537 100644 --- a/components/split/readme.md +++ b/components/split/readme.md @@ -49,10 +49,13 @@ variations. - `mzp-l-split-center-on-sm-md` - content is centered on small to medium screens. - `mzp-l-split-hide-media-on-sm-md` - media is hidden on small to medium screens. -### No-nos: +### Nesting inside a container -**Note:** This component is intended to be a full-width section of a page, with -an outer container that spans the width of the viewport and generous spacing -above and below. Split has an inner container to define its content width, so -don't place Split inside another `mzp-l-content` [container](content-container). -The nested spacing will get weird. +By default, Split is intended to be a full-width section of a page, with an +outer container that spans the width of the viewport. Split has its own inner +container to define its content width. + +If you need to nest Split inside another container (e.g. `mzp-l-content`), add +the `mzp-l-split-nested` class to the outermost element (`mzp-c-split`). This +removes the inner container's max-width and padding so it fills the parent +container without doubling up on spacing. diff --git a/components/split/split--nested.html b/components/split/split--nested.html new file mode 100644 index 00000000..ec541800 --- /dev/null +++ b/components/split/split--nested.html @@ -0,0 +1,33 @@ +{# @split--nested +# +# parameters: +# block_class - string +# background_class - string +# body_class - string +# content - string, markup +# image - path +#} +
+
+ {%- if background_class -%}
{%- endif -%} +
+
+ {% if content %} + {{ content | safe }} + {% else %} +

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.

+

{% render '@button', { link: '#', label: 'Call to action' } %}

+ {% endif %} +
+
+ {% if image -%} + + {% else -%} + + {%- endif -%} +
+
+ {%- if background_class -%}
{%- endif -%} +
+
diff --git a/components/split/split.config.yml b/components/split/split.config.yml index 9366916b..1f0d2138 100644 --- a/components/split/split.config.yml +++ b/components/split/split.config.yml @@ -73,7 +73,7 @@ variants: image: '/img/image-portrait.jpg' - name: Media Alignment notes: | - Align the media in different positions, horizontally and vertically (it’s + Align the media in different positions, horizontally and vertically (it's aligned left by default in LTR languages, and vertically centered). Apply these classes to the media container (`mzp-c-split-media`): @@ -89,3 +89,17 @@ variants: context: media_class: mzp-l-split-h-end mzp-l-split-v-end image: '/img/image-1-1-sm.jpg' + - name: Nested + notes: | + If you need to nest Split inside another container (e.g. `mzp-l-content`), + add the `mzp-l-split-nested` class to the outermost element (`mzp-c-split`). + This removes the inner container's max-width and horizontal padding so it + fills the parent container without doubling up on spacing. + - name: No Space + notes: | + Add the class `mzp-t-split-nospace` to the outer container (`mzp-c-split`) + to remove the vertical spacing above and below. This is useful when stacking + multiple Splits together or when placing a Split at the very top of a page + as a hero section. + context: + block_class: mzp-t-split-nospace