Hero Sections

Full width and standard width hero sections, with and without background images.

new

Full Width + Background image

Eos tenetur corrupti, minima doloribus quam eveniet libero.

Code Example Shortcut: z-hero-fullscreen

<z-container-fluid class="theme-cta card hero-section m-0">
  <z-container>
    <img src="../../docs/images/website/gradient.jpg" class="bg-img" alt="" /> <!-- optional-->
    <z-row>
      <z-col class="card center">
        <span class="label center-me">new</span>
        <h2 class="h1 headline">Full Width + Background image</h2>
        <p class="lead">Eos tenetur corrupti, minima doloribus quam eveniet libero.</p>
        <p>
          <a href="" class="btn btn-md center-me">Lorem Ipsum</a>
        </p>
      </z-col>
    </z-row>
  </z-container>
</z-container-fluid>

new

Standard Width Version

Eos tenetur corrupti, minima doloribus quam eveniet libero.

Code Example Shortcut: z-hero-standard

<z-container class="center-flex">
  <z-row>
    <z-col class="theme-cta hero-section card center">
      <img src="../../docs/images/website/gradient.jpg" class="bg-img" alt="" /> <!-- optional-->
      <span class="label center-me">new</span>
      <h2 class="h1 headline">Standard Width Version</h2>
      <p class="lead">Eos tenetur corrupti, minima doloribus quam eveniet libero.</p>
      <p>
        <button>Get Started</button>
      </p>
    </z-col>
  </z-row>
</z-container>

The Zen Test

Every component, section, and utility we ship will pass alignment, style, 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.