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.

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.

Spacer
Spacer

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.

Spacer

mzp-l-split-v-end

The media can also be aligned to the bottom.

Spacer

v-start

Or top.

Spacer

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.

Spacer

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`.

Don't want the media?

Hide media only on mobile with `mzp-l-split-hide-media-on-sm-md`.