Layout Visualization
In this demo background colours have been applied to the different parts of the component to show how they work together.
Looking to configure something specific? Skip to that section:
Default
This is the default layout.
The media is constrained to the width of its container.
Text is vertically and horizontally centered.
Layout options
default
By default the body is 50% of the available space.
mzp-l-split-body-narrow
The body can be 33%
mzp-l-split-body-wide
The body can be 66%
mzp-l-split-reversed
A reversed block will have the media on the left.
mzp-t-content-md
A block with a medium content width.
mzp-t-content-lg
A block with a large content width.
mzp-t-content-xl
A block with an extra-large content width.
Body positioning
default
The body is vertically centered and horizontally left aligned by default.
mzp-l-split-v-end
The text can be aligned to the bottom.
mzp-l-split-v-top
Or top.
mzp-l-split-h-end
Horizontal alignment can also be set. This is aligned to the other side of the body container.
mzp-l-split-h-center
Vertical alignment can be combined with horizontal alignment. For example, this is vertically aligned to the top and horizontally centered.
Media sizing
Media constrained by width and height
By default the media will be constrained by the width and height of the container.
mzp-l-split-media-constrain-height
The media and instead be constrained by the height of the media container, to the maximum of the media height.
In some cases this means the media will overflow the container if it is a wide media next to tall text.
mzp-l-split-media-overflow
Or the media can be it's natural height, pushing the container larger.
With wide media this means the media will overflow the container.
Media positioning
default
Media is vertically centered by default.
mzp-l-split-v-end
The media can also be aligned to the bottom.
v-start
Or top.
mzp-l-split-h-center
If `mzp-l-media constrain-width` or `mzp-l-split-media-overflow` are not set, the media can also be horizontally aligned.
Horizontally centered.
mzp-l-split-h-end
Or horizontally aligned to the other side of the body container.
Vertical and horizontal aligment can be combined
Here is mzp-l-split-v-end and mzp-l-split-h-end.
Media Pop
default
Both the body and media will be inside the block container with no padding between them and the edges.
mzp-l-split-pop
Adding a "pop" will make the media pop out of the container. It can be set on both the top and bottom with mzp-l-split-pop or just the top or bottom.
mzp-l-split-pop-top
Popping the media makes it more likely to overflow when `mzp-l-split-media-overflow` or `mzp-l-split-media-constrain-height` are set.
Background colours
Dark theme
Spooky.
Dark Alt theme
With a flush background. Nice.
Light alt theme
With mzp-l-split-pop
Dark theme, flush background
Butts against the sections above and below, useful for pages with alternating colored bands.
Dark alt theme, flush background, reversed
Background colors can alternate.
Mobile layout & source order
Mobile defaults
By default on mobile everything is left aligned and the media is given a max width.
The media will appear above or below the text based on its order in the source code.
Centered, media second in source
You can centre the content on mobile only with `mzp-l-split-center-on-sm-md`.