Image/Text Site Sections

Examples of site sections with text and image pairings in various styles.

A featured headline

This site section contains a hero image with two color blocked supporting sections. These stack 2/up on tablet/mobile (configurable).

Another section

Supporting content could go here. Your imagination is the only limit.

Code Example Shortcut: z-image-text-1

<z-container>
  <z-row class="gap-0">
    <z-col class="card p-0 w-full m-0 mh-400">
      <img src="../../docs/images/misc/slider/5.jpg" alt="" class="flex-grow-1 square overflow-hidden bg-img">
    </z-col>
    <z-container class="mobile:two-up gap-0">
      <z-row class="mt-0 mb-0 pb-0 pt-0 h-250">
        <z-col class="card bg-cta">
          <div class="center-vertical ">
            <h2 class="h5">An amazing headline</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
          </div>
        </z-col>
      </z-row>
      <z-row class="mt-0 mb-0 pb-0 pt-0">
        <z-col class="card bg-primary">
          <div class="center-vertical ">
            <h2 class="h5">Another headline</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem odio rerum.</p>
          </div>
        </z-col>
      </z-row>
    </z-container>
  </z-row>
</z-container>

Bento box layouts are all the rage right now, so why not lead with one of our own?

The main cel features a hero image, while the sidebar allows for two supporting columns, stacked.

Code Example Shortcut: z-image-text-2

<z-container>
  <z-row>
    <z-col class="card p-0 w-full m-0 mh-400">
      <img src="../../docs/images/misc/slider/2.jpg" alt="" class="flex-grow-1 br-xxl overflow-hidden bg-img">
    </z-col>
    <z-container class="mobile:two-up gap-4">
      <z-row class="mt-0 mb-0 pb-0 pt-0">
        <z-col class="card theme-light br-xxl">
          <i class="zenicon-build-circle text-lg"></i>
          <div class="card-bottom">
            <p>Bento box layouts are all the rage right now, so why not lead with one of our own?</p>
          </div>
        </z-col>
      </z-row>
      <z-row class="mt-0 mb-0 pb-0 pt-0">
        <z-col class="card theme-light br-xxl">
          <i class="zenicon-verified text-lg"></i>
          <div class="card-bottom">
            <p>The main cell features a hero image, while the sidebar allows for two supporting columns, stacked.</p>
          </div>
        </z-col>
      </z-row>
    </z-container>
  </z-row>
</z-container>

Text/Image Block

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Code Example Shortcut: z-image-text-3

<z-container>
  <z-row class="gap-0">
    <z-col class="card theme-light square br-left narrow-lg h-300 justify-content-center align-items-center">
      <h2 class="headline">Text/Image Block</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </z-col>
    <z-col class="card theme-light square h-300">
      <img src="../images/misc/slider/3.jpg" class="bg-img square br-right" alt="">
    </z-col>
  </z-row>
</z-container>

Text With a 16/9 Image

Eos tenetur corrupti, minima doloribus quam eveniet libero.

Code Example Shortcut: z-image-text-4

<z-container class="page-section">
  <z-row>
    <z-col>
      <img src="../../docs/images/placeholder/fernando-jorge.jpg" alt="">
    </z-col>
    <z-col class="flex">
      <div class="center-vertical">
        <h2 class="h3 headline">Text With a 16/9 Image</h2>
        <p>Eos tenetur corrupti, minima doloribus quam eveniet libero.</p>
      </div>
    </z-col>
  </z-row>
</z-container>

Image/Text in a Themed Card

Eos tenetur corrupti, minima doloribus quam eveniet libero.

Code Example Shortcut: z-image-text-5

<z-container class="page-section">
  <z-row class="theme-light p-0 gap-0">
    <z-col class="flex">
      <div class="center-vertical narrow-left-sm">
        <h2 class="h3 headline">Image/Text in a Themed Card</h2>
        <p>Eos tenetur corrupti, minima doloribus quam eveniet libero.</p>
      </div>
    </z-col>
    <z-col>
      <img src="../../docs/images/misc/slider/1.jpg" alt="">
    </z-col>
  </z-row>
</z-container>

Split Image/Text with a Border

Image reformats to 16/9 aspect ratio when transitioning to mobile.

Code Example Shortcut: z-image-text-6

<z-container class="page-section">
  <z-row class="p-0 border-3 square">
    <z-col class="p-0 d-flex">
      <img src="../../docs/images/misc/1024-square.jpg" class="mobile:thin square" alt="">
    </z-col>
    <z-col class="flex">
      <div class="center-vertical narrow-sm">
        <h2 class="h3 headline">Split Image/Text with a Border</h2>
        <p>Image reformats to 16/9 aspect ratio when transitioning to mobile.</p>
      </div>
    </z-col>
  </z-row>
</z-container>

Text With a Square Image

Image reformats to 16/9 aspect ratio when transitioning to mobile.

Code Example Shortcut: z-image-text-7

<z-container class="page-section">
  <z-row class="p-0 mobile:reverse">
    <z-col class="flex">
      <div class="center-vertical narrow-sm">
        <h2 class="h3 headline">Text With a Square Image</h2>
        <p>Image reformats to 16/9 aspect ratio when transitioning to mobile.</p>
      </div>
    </z-col>
    <z-col class="p-0">
      <img src="../../docs/images/misc/1024-square-2.jpg" class="mobile:thin" alt="">
    </z-col>
  </z-row>
</z-container>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.