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

Family

hero

Tier

enhanced

Kind

section

Extends

hero/base

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.