Two-Column Feature & Screenshot Hero Template

Clearly communicate your product's value with this balanced, feature-driven hero section layout.

This popular design for tech startups and SaaS companies pairs compelling marketing copy with a visual of your product in action.

Screenshot of a two-column hero section with marketing text on the left and a product screenshot on the right.

Get Source Code Preview

About the Two-Column Feature Hero

This hero template is a staple for software, tech, and startup websites. It immediately answers two key questions for visitors: "What does this product do?" (via the text) and "What does it look like?" (via the screenshot). This approach effectively builds interest and encourages visitors to sign up or learn more.

Features

Classic SaaS Layout: A time-tested design that clearly separates the value proposition from the visual proof.
Action-Oriented Content: The text column is designed for a strong headline, a descriptive paragraph, and a clear call-to-action button.
Fully Responsive: The two-column layout seamlessly transitions into a single-column stack on mobile devices for optimal readability.
Simple Theming: All core styling elements like colors and fonts are controlled by CSS custom properties for quick customization.

Code Breakdown

This component consists of a CSS style block and an HTML section. Place the CSS in the head of your document (or in an external style sheet) and the HTML in the body where needed.

The entire layout is orchestrated by Flexbox. A parent .two-col-hero-container div is a flex container. By default (mobile-first), its flex-direction is column, which stacks the content and screenshot vertically. For wider screens, a media query changes the flex-direction to row. The two child divs, .two-col-hero-content and .two-col-hero-image-wrapper, are each given a flex-basis of 50% so they each take up half of the container's width, creating the split layout.

Code

<style>
    :root {
        --tcf-padding: 3rem 1.5rem;
        --tcf-max-width: 1100px;
        --tcf-gap: 2rem;
        --tcf-bg-color: #ffffff;
        --tcf-text-color: #212529;
        --tcf-headline-color: #000000;
        --tcf-cta-bg: #007bff;
        --tcf-cta-hover-bg: #0069d9;
        --tcf-cta-text-color: #ffffff;
    }
    .two-col-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        width: 100%;
        background-color: var(--tcf-bg-color);
        color: var(--tcf-text-color);
        padding: var(--tcf-padding);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .two-col-hero * {
         box-sizing: border-box;
    }
    .two-col-hero-container {
        width: 100%;
        max-width: var(--tcf-max-width);
        display: flex;
        flex-direction: column;
        gap: var(--tcf-gap);
    }
    .two-col-hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .two-col-hero-title {
        margin: 0 0 1rem 0;
        font-size: clamp(2.25rem, 6vw, 3.5rem);
        color: var(--tcf-headline-color);
        font-weight: 700;
        line-height: 1.2;
    }
    .two-col-hero-description {
        margin: 0 0 2rem 0;
        font-size: 1.1rem;
        line-height: 1.7;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .two-col-hero-cta {
        display: inline-block;
        background-color: var(--tcf-cta-bg);
        color: var(--tcf-cta-text-color);
        padding: 1rem 2rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        align-self: center;
    }
    .two-col-hero-cta:hover {
        background-color: var(--tcf-cta-hover-bg);
    }
    .two-col-hero-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .two-col-hero-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    @media (min-width: 768px) {
        .two-col-hero-container {
            flex-direction: row;
            align-items: center;
        }
        .two-col-hero-content {
            flex-basis: 50%;
            text-align: left;
            padding-right: var(--tcf-gap);
        }
        .two-col-hero-description, .two-col-hero-cta {
            margin-left: 0;
            margin-right: 0;
        }
        .two-col-hero-cta {
            align-self: flex-start;
        }
        .two-col-hero-image-wrapper {
            flex-basis: 50%;
        }
    }
</style>

<section class="two-col-hero">
    <div class="two-col-hero-container">
    
        <div class="two-col-hero-content">
            <h1 class="two-col-hero-title">Automate Your Workflow Instantly</h1>
            <p class="two-col-hero-description">
                With Nexus AI, you can connect your apps, streamline your tasks, and eliminate hours of manual work. Focus on what truly matters for your business.
            </p>
            <a href="#" role="button" class="two-col-hero-cta">Start Free Trial</a>
        </div>
        
        <div class="two-col-hero-image-wrapper">
            
            <img src="https://placehold.co/500x380/E8F5E9/4CAF50?text=App+Screenshot" alt="A screenshot of the Nexus AI application dashboard showing a clean and intuitive user interface." class="two-col-hero-image">
        </div>

</div>
</section>

View Output