Layout layoutlandingmedia

Split Media Section

Landing page section with text on one side and a large media placeholder on the other.

Component preview not available for: landing-section-split

Ensure the filename matches LandingSectionSplit.astro

Usage

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

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

<LandingSectionSplit>Content</LandingSectionSplit>
--- import { SplitMediaSection } from 'astro-component-kit'; --- <LandingSectionSplit>Content</LandingSectionSplit>

Manual Installation

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

astro 
---
---
<section class="split-sec">
  <div class="txt"><h2>Build faster</h2><p>Scale with pre-built logic and stunning modular designs.</p></div>
  <div class="media"></div>
</section>
<style>
  .split-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 4rem 1.5rem; }
  .media { height: 400px; background: rgba(15, 23, 42, 0.5); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
  h2 { font-size: 2.5rem; color: #fff; margin-bottom: 1rem; }
  p { font-size: 1.1rem; color: #94a3b8; line-height: 1.6; }
  @media (max-width: 768px) { .split-sec { grid-template-columns: 1fr; } }
</style>
--- --- <section class="split-sec"> <div class="txt"><h2>Build faster</h2><p>Scale with pre-built logic and stunning modular designs.</p></div> <div class="media"></div> </section> <style> .split-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 4rem 1.5rem; } .media { height: 400px; background: rgba(15, 23, 42, 0.5); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } h2 { font-size: 2.5rem; color: #fff; margin-bottom: 1rem; } p { font-size: 1.1rem; color: #94a3b8; line-height: 1.6; } @media (max-width: 768px) { .split-sec { grid-template-columns: 1fr; } } </style>

Quick Info

Category
Layout
Filename
SplitMediaSection.astro
Dependencies
None — pure Astro + CSS
Tags
layoutlandingmedia