Split Layout Hero Section

A split layout hero section built with pure HTML and CSS that separates content into two distinct areas typically text on one side and supporting visuals or actions on the other creating balance and clarity without relying on JavaScript or external libraries.

Usage

This component is ideal for pages where message and support content should coexist, such as product introductions with screenshots, service descriptions with illustrations, feature explanations paired with actions, or marketing pages that benefit from visual text symmetry.

Implementation

The split layout is achieved using CSS grid or flexbox with responsive breakpoints, allowing the two sections to stack gracefully on smaller screens while maintaining a side-by-side structure on larger viewports.

HTML

<section class="ss-hero split">
  <div>
    <h1>Launch Faster</h1>
    <p>Reusable UI components for developers.</p>
  </div>

  <div class="hero-media">
    <img 
      src="#" 
      alt="UI preview"
    >
  </div>
</section>

<section class="ss-hero split">
  <div>
    <h1>Launch Faster</h1>
    <p>Reusable UI components for developers.</p>
  </div>

  <div class="hero-media">
    <img 
      src="#" 
      alt="UI preview"
    >
  </div>
</section>

CSS

.ss-hero.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  padding:96px 64px;
  align-items:center;
  background:#f8fafc;
}

.ss-hero h1{
  font-size:48px;
  line-height:1.2;
  margin-bottom:16px;
  color:#0f172a;
}

.ss-hero p{
  font-size:18px;
  color:#475569;
  max-width:520px;
}

.hero-media{
  border-radius:20px;
  overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:900px){
  .ss-hero.split{
    grid-template-columns:1fr;
    padding:72px 24px;
    text-align:center;
  }

  .ss-hero p{
    margin-inline:auto;
  }
}

.ss-hero.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  padding:96px 64px;
  align-items:center;
  background:#f8fafc;
}

.ss-hero h1{
  font-size:48px;
  line-height:1.2;
  margin-bottom:16px;
  color:#0f172a;
}

.ss-hero p{
  font-size:18px;
  color:#475569;
  max-width:520px;
}

.hero-media{
  border-radius:20px;
  overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:900px){
  .ss-hero.split{
    grid-template-columns:1fr;
    padding:72px 24px;
    text-align:center;
  }

  .ss-hero p{
    margin-inline:auto;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Divides hero content into two balanced sections
• Supports text, media, or action elements
• Adapts smoothly to different screen sizes
• Designed for clarity and visual balance

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.