hero diagonal pattern texture card social-proof landing-page hero diagonal stripe texture card landing pattern-bg hero with diagonal stripe pattern background textured hero section with card layout
Hero Diagonal Pattern Background
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/diagonal-pattern-bg.json diagonal-pattern-bg.html
<section class="ws-hero ws-hero-diagonal relative overflow-hidden bg-[var(--ws-hero-bg)]" style="background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);"> <!-- ws-ok: decorative diagonal texture overlay -->
<div class="relative mx-auto flex max-w-7xl items-center justify-center px-6 py-24 lg:py-32">
<!-- Content card -->
<div class="relative z-10 w-full max-w-4xl rounded-3xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-preview-bg)] p-10 shadow-lg lg:p-14">
<!-- Eyebrow -->
<p class="mb-5 inline-flex rounded-full bg-[var(--ws-hero-badge-bg)] px-3 py-1 text-xs font-semibold uppercase tracking-widest text-[var(--ws-hero-accent)]">New in 2026</p>
<!-- Heading -->
<h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">
The design system<br class="hidden sm:block" /> your team will<br class="hidden sm:block" /> actually use.
</h1>
<!-- Description -->
<p class="mt-5 max-w-2xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">
Copy-paste patterns built for speed. Tailwind-only, SSR-safe, and token-aligned from day one.
</p>
<!-- CTA buttons -->
<div class="mt-8 flex flex-wrap gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">Get started free</a>
<a href="#" class="rounded-xl border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition hover:opacity-80">Browse patterns</a>
</div>
<!-- Social proof row -->
<div class="mt-10 flex items-center gap-4">
<!-- Avatar stack -->
<div class="flex -space-x-3">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--ws-hero-preview-bg)] text-xs font-bold text-white" style="background-color: #7c3aed;">AJ</span> <!-- ws-ok: individual avatar color -->
<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--ws-hero-preview-bg)] text-xs font-bold text-white" style="background-color: #0ea5e9;">MK</span> <!-- ws-ok: individual avatar color -->
<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--ws-hero-preview-bg)] text-xs font-bold text-white" style="background-color: #10b981;">PL</span> <!-- ws-ok: individual avatar color -->
<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--ws-hero-preview-bg)] text-xs font-bold text-white" style="background-color: #f59e0b;">SN</span> <!-- ws-ok: individual avatar color -->
<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-[var(--ws-hero-preview-bg)] text-xs font-bold text-white" style="background-color: #ef4444;">RD</span> <!-- ws-ok: individual avatar color -->
</div>
<p class="text-sm font-medium text-[var(--ws-hero-text-soft)]">
Trusted by <span class="font-semibold text-[var(--ws-hero-text)]">8,000+</span> developers
</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
herodiagonalpatterntexturecardsocial-prooflanding-page
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Pre-heading badge label. |
| headline | Yes | Main value proposition. |
| body | Yes | Supporting description text. |
| actions | Yes | Primary and secondary CTA buttons. |
| social-proof | No | Avatar stack and trusted-by count. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| cardMaxWidth | string | max-w-4xl | Maximum width of the content card. |
Texture-forward hero using a pure CSS diagonal stripe pattern. The surface card creates a clean reading zone against the repeating background. Ideal when you want visual depth without photography.