Standard card
For tools, articles and teasers.
Plain text linkSeed Factory · UI
Layout and component gallery
Responsive building blocks for new websites, styled with the central design tokens.
Icon gallery
Lucide SVGs rendered directly in HTML. Search, choose size and color, then copy Astro code.
No matching icons found.
housesearchmenusettingsmailphonecalendarmap-pinshield-checkzapglobecalculatordownloadcheckcircle-checkinfoarrow-rightchevron-downexternal-linkfile-textuserusersheartstarlockunlockeyeeye-offplusminusxtrash-2pencilcopyshare-2uploadclockbellfiltersliders-horizontalsmartphonemonitorcredit-cardshopping-cartchart-no-axes-combinedcircle-helploader-circlesunmoonlanguagesimagefile-downGrids and columns
Full width
Two columns · 1
Two columns · 2
Three columns · 1
Three columns · 2
Three columns · 3
Four columns · 1
Four columns · 2
Four columns · 3
Four columns · 4
Mobile Edge Cards – Quote and preview
Tap the exposed right card edge to switch.
01 · Configure
Configure your quote
02 · Preview
Website package
PackageStandard
Quantity1
Express–
Total (demo)
<MobileEdgeCards lang={lang} />Card variations
Featured card
For especially important content or actions.
Primary actionStandard card
For tools, articles and teasers.
Interactive UI components
Multi-step form
Request in three steps
Local demo only – no data is sent.
- 1Package
- 2Contact
- 3Review
<MultiStepForm lang={lang} />Bottom sheet / dialog
<BottomSheetDemo lang={lang} />Sticky mobile CTA
Fixed at the bottom on mobile
<StickyMobileCTA lang={lang} />Toast notifications
<ToastDemo lang={lang} />Text and media
Media placeholder
Buttons and links
Forms
Notices and FAQ
Frequently asked questions
Can I reuse these elements?
Yes. This gallery is a reference for the existing CSS and Astro patterns.
Landing page building blocks
Copy HTML code for your own components.
Hero with call to action
Your offer at a glance
One clear message. One simple next step.
A concise benefit, clearly stated and optimized for mobile.
<section class="seed-hero-demo">
<p class="seed-hero-demo__eyebrow">Your offer at a glance</p>
<h1>One clear message. One simple next step.</h1>
<p>A concise benefit, clearly stated and optimized for mobile.</p>
<div class="seed-hero-demo__actions">
<a class="button" href="/">Get started</a>
<a class="button secondary" href="/">Learn more</a>
</div>
</section>How it works
Send inquiry
A short, clear description of this step.
Receive offer
A short, clear description of this step.
Make a decision
A short, clear description of this step.
<div class="seed-steps-demo">
<article class="seed-step-demo">
<span class="seed-step-demo__number" aria-hidden="true">1</span>
<h3>Send inquiry</h3>
<p>A short, clear description of this step.</p>
</article>
<article class="seed-step-demo">
<span class="seed-step-demo__number" aria-hidden="true">2</span>
<h3>Receive offer</h3>
<p>A short, clear description of this step.</p>
</article>
<article class="seed-step-demo">
<span class="seed-step-demo__number" aria-hidden="true">3</span>
<h3>Make a decision</h3>
<p>A short, clear description of this step.</p>
</article>
</div>Trust elements
Sample copy – not real customer reviews or performance claims.
“A verified customer quote can go here once permission is obtained.”
<figure class="seed-quote-demo">
<blockquote>
<p>“A verified customer quote can go here once permission is obtained.”</p>
</blockquote>
<figcaption>Name / company</figcaption>
</figure>Result card
Your result
42 pointsDemo value – no actual calculation.<div class="seed-result-demo" role="status">
<p>Your result</p>
<strong>42 points</strong>
<small>Demo value – no actual calculation.</small>
</div>CTA section
<aside class="seed-cta-demo">
<h2>Ready for the next step?</h2>
<p>One short sentence explains what happens after clicking.</p>
<a class="button" href="/">Get started</a>
</aside>Code examples
Copy HTML code for your own components.
<article class="card">
<h3>My card</h3>
<p>A reusable card.</p>
</article>