ai image generator prompt placeholder ai image generator prompt output placeholder gradient ai image generation interface image prompt and output layout
Image Generator Base
Fetch pattern JSON:
curl https://webspire.de/patterns/image-generator/base.json base.html
<section
class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
style="
--ws-image-generator-bg: oklch(0.985 0.002 75);
--ws-image-generator-text: oklch(0.205 0.015 75);
--ws-image-generator-text-soft: oklch(0.556 0.01 75);
--ws-image-generator-border: oklch(0.885 0.008 75);
--ws-image-generator-accent: oklch(0.588 0.16 250);
--ws-image-generator-action-bg: oklch(0.588 0.16 250);
--ws-image-generator-action-text: oklch(0.985 0.002 75);
background: var(--ws-image-generator-bg);
color: var(--ws-image-generator-text);
border-color: var(--ws-image-generator-border);
"
>
<!-- Prompt input -->
<div class="p-6">
<label for="img-gen-prompt" class="sr-only">Describe your image</label>
<div class="flex items-center gap-3">
<input
id="img-gen-prompt"
type="text"
placeholder="Describe your image..."
class="flex-1 rounded-xl border px-4 py-3 text-sm outline-none transition focus:ring-2"
style="border-color: var(--ws-image-generator-border); background: var(--ws-image-generator-bg); color: var(--ws-image-generator-text)"
/>
<button
type="button"
class="shrink-0 rounded-xl px-5 py-3 text-sm font-medium transition hover:opacity-90"
style="background: var(--ws-image-generator-action-bg); color: var(--ws-image-generator-action-text)"
>
Generate
</button>
</div>
</div>
<!-- Image output area -->
<div class="px-6 pb-6">
<div
class="flex aspect-[4/3] flex-col items-center justify-center rounded-xl"
style="background: linear-gradient(135deg, oklch(0.75 0.1 250), oklch(0.65 0.15 300), oklch(0.7 0.12 200))"
role="img"
aria-label="Generated image placeholder"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
<p class="mt-3 text-sm font-medium text-white/60">Ready to generate</p>
</div>
</div>
<!-- Status bar -->
<div
class="flex items-center justify-between border-t px-6 py-3"
style="border-color: var(--ws-image-generator-border)"
>
<p class="text-xs" style="color: var(--ws-image-generator-text-soft)">Status: Ready</p>
<p class="text-xs" style="color: var(--ws-image-generator-text-soft)">1024 × 768</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aiimagegeneratorpromptplaceholder
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Main content area |
Base variant for the Image Generator family. Text prompt input with Generate button, a large gradient placeholder area with image icon in center, and a status bar showing resolution.