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:
This is the default layout.
The media is constrained to the width of its container.
Text is vertically and horizontally centered.
By default the body is 50% of the available space.
The body can be 33%
The body can be 66%
A reversed block will have the media on the left.
The body is vertically centered and horizontally left aligned by default.
The text can be aligned to the bottom.
Horizontal alignment can also be set. This is aligned to the other side of the body container.
Vertical alignment can be combined with horizontal alignment. For example, this is vertically aligned to the top and horizontally centered.
By default the media will be constrained by the width and height of the container.
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.
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 is vertically centered by default.
The media can also be aligned to the bottom.
If `mzp-l-media constrain-width` or `mzp-l-split-media-overflow` are not set, the media can also be horizontally aligned.
Or horizontally aligned to the other side of the body container.
Here is mzp-l-split-v-end and mzp-l-split-h-end.
Both the body and media will be inside the block container with no padding between them and the edges.
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.
Popping the media makes it more likely to overflow when `mzp-l-split-media-overflow` or `mzp-l-split-media-constrain-height` are set.
With a flush background. Nice.
Butts against the sections above and below, useful for pages with alternating colored bands.
Background colors can alternate.
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.
You can centre the content on mobile only with `mzp-l-split-center-on-sm-md`.
Hide media only on mobile with `mzp-l-split-hide-media-on-sm-md`.