Layout layoutsplitlanding

Split Screen

A layout divided into two equal halves, perfect for landing pages.

Left Content

Hero text and main value proposition.

Right Content

Visual graphic, product mockups, or form.

Usage

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

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

<SplitScreenLayout>Content</SplitScreenLayout>
--- import { SplitScreen } from 'astro-component-kit'; --- <SplitScreenLayout>Content</SplitScreenLayout>

Manual Installation

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

astro 
---
---
<div class="split-layout">
  <div class="split-side left"><slot name="left" /></div>
  <div class="split-side right"><slot name="right" /></div>
</div>
<style>
  .split-layout { display: flex; min-height: 80vh; flex-wrap: wrap; }
  .split-side { flex: 1; min-width: 300px; display: flex; align-items: center; padding: 4rem; }
  .left { background: rgba(0,0,0,0.1); }
</style>
--- --- <div class="split-layout"> <div class="split-side left"><slot name="left" /></div> <div class="split-side right"><slot name="right" /></div> </div> <style> .split-layout { display: flex; min-height: 80vh; flex-wrap: wrap; } .split-side { flex: 1; min-width: 300px; display: flex; align-items: center; padding: 4rem; } .left { background: rgba(0,0,0,0.1); } </style>

Quick Info

Category
Layout
Filename
SplitScreen.astro
Dependencies
None — pure Astro + CSS
Tags
layoutsplitlanding