Sections splitbrowser mockupstatsresponsive

Hero Split

Split-screen hero with content side and browser mockup visual side.

Open Source · MIT

Ship Faster with Premium Components

Stop building from scratch. Use production-ready, accessible, and responsive components.

200+ Components
10K+ Downloads
5K+ Stars

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { HeroSplit } from 'astro-component-kit';
---

<HeroSplit />
--- import { HeroSplit } from 'astro-component-kit'; --- <HeroSplit />

Manual Installation

If you are not using the npm package, create a new file src/components/lib/HeroSplit.astro and paste the following code:

astro 
---
// HeroSplit.astro
---
<section class="hero-split">
  <div class="hero-split__content">
    <span class="hero-split__badge">Open Source · MIT</span>
    <h1 class="hero-split__title">Ship Faster with Premium Components</h1>
    <p class="hero-split__subtitle">Stop building from scratch.</p>
    <div class="hero-split__actions">
      <button class="hero-split__btn hero-split__btn--primary">Start Building</button>
      <button class="hero-split__btn hero-split__btn--ghost">Documentation</button>
    </div>
    <div class="hero-split__stats">
      <div class="hero-split__stat">
        <span class="hero-split__stat-num">200+</span>
        <span class="hero-split__stat-label">Components</span>
      </div>
    </div>
  </div>
  <div class="hero-split__visual" aria-hidden="true">
    <!-- Browser mockup -->
  </div>
</section>

<style>
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    min-height: 85vh;
    padding: var(--sp-12) var(--sp-8);
  }
  /* ... rest of styles ... */
</style>
--- // HeroSplit.astro --- <section class="hero-split"> <div class="hero-split__content"> <span class="hero-split__badge">Open Source · MIT</span> <h1 class="hero-split__title">Ship Faster with Premium Components</h1> <p class="hero-split__subtitle">Stop building from scratch.</p> <div class="hero-split__actions"> <button class="hero-split__btn hero-split__btn--primary">Start Building</button> <button class="hero-split__btn hero-split__btn--ghost">Documentation</button> </div> <div class="hero-split__stats"> <div class="hero-split__stat"> <span class="hero-split__stat-num">200+</span> <span class="hero-split__stat-label">Components</span> </div> </div> </div> <div class="hero-split__visual" aria-hidden="true"> <!-- Browser mockup --> </div> </section> <style> .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; min-height: 85vh; padding: var(--sp-12) var(--sp-8); } /* ... rest of styles ... */ </style>

Quick Info

Category
Sections
Filename
HeroSplit.astro
Dependencies
None — pure Astro + CSS
Tags
splitbrowser mockupstatsresponsive