フッター
Simple Footer
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
#footer#simple#links
6 個のフレームワーク初級
Loading…
One line - copyright and the legal links. For an app shell or a checkout page.
<!--
One line. The whole design problem here is the separator: a "·" typed between
the links is read aloud as "middle dot" by a screen reader, so it is drawn
with an aria-hidden span rather than punctuation in the link text.
This is the footer for an app shell or a checkout - somewhere a sitemap would
be noise but the legal links still have to exist.
-->
<footer class="footlegal">
<div class="footlegal__inner">
<p class="footlegal__copy">© <time datetime="2026">2026</time> Adysre Inc.</p>
<nav aria-label="Legal">
<ul class="footlegal__links">
<li><a class="footlegal__link" href="/privacy">Privacy</a></li>
<li aria-hidden="true" class="footlegal__sep">·</li>
<li><a class="footlegal__link" href="/terms">Terms</a></li>
<li aria-hidden="true" class="footlegal__sep">·</li>
<li><a class="footlegal__link" href="/cookies">Cookies</a></li>
</ul>
</nav>
</div>
</footer>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
className | string | - | ルート要素にマージされる追加クラス。 |
The whole design problem is the separator. A "·" typed into the link text is announced as "middle dot" between every entry; here it is its own `aria-hidden` list item, so it is drawn but never read. This is the footer for a place where a sitemap would be noise but Privacy and Terms still have to exist - an app shell, a checkout, an embedded view. Contrast matters more than usual at 13px: `text-gray-500` on white is 4.8:1 and `text-gray-400` on `gray-900` is 7.0:1, both over the line, and the tempting shade lighter is not. It wraps to two centred lines on narrow screens rather than shrinking the type.