features media screenshot split-layout bullet-list features media screenshot split bullet-list two-column feature section with screenshot left split layout feature block with media
Feature Media Left
Fetch pattern JSON:
curl https://webspire.de/patterns/features/media-left.json media-left.html
<section class="ws-features bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
<!-- Media Block (left) -->
<div class="order-2 lg:order-1">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] shadow-lg">
<div class="aspect-[4/3] p-6">
<div class="h-full rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-4">
<div class="mb-3 flex gap-2">
<div class="h-2.5 w-2.5 rounded-full bg-red-400"></div>
<div class="h-2.5 w-2.5 rounded-full bg-yellow-400"></div>
<div class="h-2.5 w-2.5 rounded-full bg-green-400"></div>
</div>
<div class="space-y-2">
<div class="h-4 w-3/4 rounded bg-[var(--ws-features-border)]"></div>
<div class="h-3 w-full rounded bg-[var(--ws-features-border)] opacity-60"></div>
<div class="h-3 w-5/6 rounded bg-[var(--ws-features-border)] opacity-60"></div>
<div class="h-3 w-4/6 rounded bg-[var(--ws-features-border)] opacity-40"></div>
<div class="mt-4 h-3 w-full rounded bg-[var(--ws-features-border)] opacity-60"></div>
<div class="h-3 w-3/4 rounded bg-[var(--ws-features-border)] opacity-40"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Text Block (right) -->
<div class="order-1 lg:order-2">
<p class="mb-3 text-sm font-semibold uppercase tracking-widest text-[var(--ws-features-icon-color)]">Write</p>
<h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">
Powerful docs, simple for everyone
</h2>
<p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">
Build rich documents with blocks, embeds, and databases. Everything stays in sync — no imports, no exports.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3">
<div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
<svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
<path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<p class="font-medium text-[var(--ws-features-text)]">Block-based editor</p>
<p class="text-sm text-[var(--ws-features-text-muted)]">Compose content from reusable blocks — text, images, code, and more.</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
<svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
<path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<p class="font-medium text-[var(--ws-features-text)]">Real-time collaboration</p>
<p class="text-sm text-[var(--ws-features-text-muted)]">Multiple people, one document. Changes sync instantly without conflicts.</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
<svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
<path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<p class="font-medium text-[var(--ws-features-text)]">Local-first by default</p>
<p class="text-sm text-[var(--ws-features-text-muted)]">Your data stays on your device. Cloud sync is opt-in, never forced.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresmediascreenshotsplit-layoutbullet-list
Slots
| Name | Required | Description |
|---|---|---|
| media | Yes | Medienblock links — Screenshot, App-Mockup oder schematische Vorschau. |
| label | No | Kurzes Label über der Überschrift (z. B. Kategorie oder Feature-Name). |
| heading | Yes | Hauptüberschrift der Feature-Sektion. |
| description | Yes | Einleitender Absatz unter der Überschrift. |
| feature-list | Yes | Liste mit Icon, Titel und Kurzbeschreibung pro Feature-Punkt. |
Split-Layout Feature-Sektion: Medienblock (Screenshot, Mockup oder schematische Vorschau) links, Label + Überschrift + Beschreibung + Feature-Liste rechts. Responsiv — auf Mobile stapeln sich die Blöcke vertikal, Text zuerst.