फ़ीचर्ड
हीरो सेक्शनSplit Image Hero
Copy on the left, picture on the right, stacked in reading order on mobile.
#hero#split#image
6 फ्रेमवर्कशुरुआती
Loading…
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
<!--
The eyebrow is a <p>, not a heading. It reads as a label above the title, but
promoting it to <h2> would put a heading *before* the <h1> and break the
document outline for anyone navigating by headings.
-->
<section class="hero-centered">
<p class="hero-centered__kicker">
<span class="hero-centered__dot" aria-hidden="true"></span>
New - v2.0 is out
</p>
<h1 class="hero-centered__title">Ship your product, not your infrastructure</h1>
<p class="hero-centered__copy">
Everything you need to launch, measure and scale - in one place, with no
servers to babysit.
</p>
<div class="hero-centered__actions">
<a class="hero-centered__cta" href="#">Start free trial</a>
<a class="hero-centered__cta hero-centered__cta--secondary" href="#">Book a demo</a>
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
ctaLabel | string | 'Start free trial' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
ctaHref | string | '#' | कॉल-टू-एक्शन लिंक का डेस्टिनेशन। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The eyebrow is a `<p>`, not an `<h2>`, and that is deliberate: promoting it would put a heading *before* the `<h1>` and break the outline for anyone navigating by headings. The title uses `clamp()` in the CSS tab and a `sm:` step in the Tailwind tabs - either way it has to survive a 390px phone and a 1440px desktop with the same markup. The buttons go full width and stack below `sm`, because two 140px buttons side by side on a phone is two bad tap targets instead of one good one.