फ़ुटर
Simple Footer
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
#footer#simple#links
6 फ्रेमवर्कशुरुआती
Loading…
A four-column sitemap with a brand blurb - the full footer for a marketing site.
<!--
Four columns of links plus a brand blurb. Each column is a real <h2> over a
<ul>, not a styled <div> over a stack of <a>s - the headings are how a screen
reader user skims a sitemap instead of hearing thirty links in a row with no
idea where one group ends.
The whole grid lives in one <nav aria-label="Footer">: it is one navigation
region with four groups, not four separate navigations.
-->
<footer class="footcols">
<div class="footcols__inner">
<div class="footcols__brand-block">
<a class="footcols__brand" href="/">Adysre</a>
<p class="footcols__blurb">The operating system for modern teams. Plan, build and ship without the busywork.</p>
</div>
<nav class="footcols__nav" aria-label="Footer">
<div class="footcols__grid">
<div class="footcols__col">
<h2 class="footcols__heading">Product</h2>
<ul class="footcols__list">
<li><a class="footcols__link" href="/features">Features</a></li>
<li><a class="footcols__link" href="/integrations">Integrations</a></li>
<li><a class="footcols__link" href="/pricing">Pricing</a></li>
<li><a class="footcols__link" href="/changelog">Changelog</a></li>
</ul>
</div>
<div class="footcols__col">
<h2 class="footcols__heading">Company</h2>
<ul class="footcols__list">
<li><a class="footcols__link" href="/about">About</a></li>
<li><a class="footcols__link" href="/careers">Careers</a></li>
<li><a class="footcols__link" href="/blog">Blog</a></li>
<li><a class="footcols__link" href="/press">Press</a></li>
</ul>
</div>
<div class="footcols__col">
<h2 class="footcols__heading">Resources</h2>
<ul class="footcols__list">
<li><a class="footcols__link" href="/docs">Docs</a></li>
<li><a class="footcols__link" href="/guides">Guides</a></li>
<li><a class="footcols__link" href="/support">Support</a></li>
<li><a class="footcols__link" href="/status">Status</a></li>
</ul>
</div>
<div class="footcols__col">
<h2 class="footcols__heading">Legal</h2>
<ul class="footcols__list">
<li><a class="footcols__link" href="/privacy">Privacy</a></li>
<li><a class="footcols__link" href="/terms">Terms</a></li>
<li><a class="footcols__link" href="/security">Security</a></li>
<li><a class="footcols__link" href="/cookies">Cookies</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="footcols__bar">
<p class="footcols__copy">© <time datetime="2026">2026</time> Adysre Inc.</p>
</div>
</footer>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Each column is a real `<h2>` over a `<ul>`, not a styled `<div>` over a stack of `<a>`s. The headings are how a screen reader user skims a sitemap; without them it is thirty links in a row with no indication of where one group ends and the next begins. The whole grid sits in **one** `<nav aria-label="Footer">` - it is one navigation region containing four groups, not four navigations. The grid steps 2 → 4 columns deliberately rather than using `auto-fit` + `minmax`, which collapses to unpredictable counts mid-range and leaves a lone orphan column. Edit `COLUMNS` to reshape the sitemap; the markup follows the data.