SECTION

Site footer

Your mark, a line about the site, and a few links.

Mark and links

HTML

<footer class="site-footer" style="width:100%">
  <div class="shell site-footer-bar">
    <div class="site-footer-mark">
      <svg viewBox="0 0 40 40" aria-hidden="true" style="height:38px;width:38px">
        <g fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round">
          <path d="M22 8 L30 8 L30 16 L22 16 Z"></path>
          <path d="M14 16 L30 16 L30 24 L14 24 Z"></path>
          <path d="M6 24 L30 24 L30 32 L6 32 Z"></path>
        </g>
      </svg>
      <span>YOUR NAME — INDEPENDENT</span>
    </div>
    <div class="site-footer-links">
      <a href="#">Design reference ↗</a>
      <span>Built on Groundwork</span>
    </div>
  </div>
</footer>

Reference

Read from sections/site-footer.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.site-footer.site-footer-bar.site-footer-mark.site-footer-links

READS--ds-accent--ds-focus-ring--ds-focus-width--ds-font-display--ds-gap--ds-gap-loose--ds-ground--ds-hairline--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-soft--ds-mark-h-lg--ds-pad-card--ds-pad-section--ds-rule--ds-rule-strong--ds-text-chip--ds-track-meta--ds-track-subtle--ds-underline-offset

Notes

TWO SMALL THINGS

The bar is align-items: flex-end so the mark and the links share a baseline at the bottom. The mark is taller than the text beside it, and top-aligning leaves the links floating.

The mark is dimmed with opacity rather than a faded colour token, because it is usually a multi-colour asset and a colour cannot reach inside it.