Layout layoutsplitlanding

Split Screen

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

Component preview not available for: split-screen-layout

Ensure the filename matches SplitScreenLayout.astro

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