Content Split Block

A split block features two panels of content, usually stacked on smaller screens.

Examples

Standard Split Block

Showing a split block with media and text layers.

Source

HTML

<content-split-block slot="content">
  <content-spacing-wrapper slot="column1" left-offset="4" right-offset="4|4|4|20" top-offset="4" bottom-offset="0|4" max-width="100|80" horizontal-alignment="left|center">
    <content-image alt="Test Alt Text" src="https://www.esteelauder.com/media/export/cms/special-offers/022521-promo-elements/se005_anr_reviews_2.mp4"></content-image>
  </content-spacing-wrapper>
  <content-spacing-wrapper slot="column2" left-offset="4" right-offset="4|4|4|20" top-offset="2|4" bottom-offset="4" max-width="100|80" horizontal-alignment="left|center">
    <content-text-block text-align="center">
      <content-line style-class="text-style--eyebrow">EYEBROW</content-line>
      <content-line style-class="text-style--header">HEADER</content-line>
      <content-line style-class="text-style--subheader">Subtitle</content-line>
      <content-line>
        <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
      </content-line>
      <content-button style-class="button button--dark" href="#">Test Button</content-button>
    </content-text-block>
  </content-spacing-wrapper>
</content-split-block>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.text-style--eyebrow {
  font-size: .75rem;
}

.text-style--header {
  font-size: 2.5rem;
}

.text-style--subheader {
  font-size: 1.75rem;
}

Reverse Split Block + Background

This example demonstrates using the reverse option to switch the column order in larger screens.

Source

HTML

<content-split-block background="red|blue|green" slot="content" reverse="true">
  <content-spacing-wrapper slot="column1" left-offset="4" right-offset="4|4|4|20" top-offset="4" bottom-offset="0|4" max-width="100|80" horizontal-alignment="left|center">
    <content-image alt="Test Alt Text" src="https://www.esteelauder.com/media/export/cms/special-offers/022521-promo-elements/se005_anr_reviews_2.mp4"></content-image>
  </content-spacing-wrapper>
  <content-spacing-wrapper slot="column2" left-offset="4" right-offset="4|4|4|20" top-offset="2|4" bottom-offset="4" max-width="100|80" horizontal-alignment="left|center">
    <content-text-block text-align="center">
      <content-line style-class="text-style--eyebrow">EYEBROW</content-line>
      <content-line style-class="text-style--header">HEADER</content-line>
      <content-line style-class="text-style--subheader">Subtitle</content-line>
      <content-line>
        <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
      </content-line>
      <content-button style-class="button button--dark" href="#">Test Button</content-button>
    </content-text-block>
  </content-spacing-wrapper>
</content-split-block>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.text-style--eyebrow {
  font-size: .75rem;
}

.text-style--header {
  font-size: 2.5rem;
}

.text-style--subheader {
  font-size: 1.75rem;
}