FOOTERS / FREE HTML + ASTRO

Signal studio footer

A graphic studio footer with oversized display type, a bright enquiry panel and a structured contact directory.

Responsive source
No JavaScript dependency
MIT code · version 1.0.0

Try the design

Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.

Copy the source

<footer class="fct-signal-studio-footer" data-snippet="signal-studio-footer">
  <div class="r-inner">
    <div class="r-foot-intro">
      <p class="r-micro">Independent by nature.<br />Collaborative by choice.</p>
      <a class="r-link" href="work.html">See selected work <span aria-hidden="true">↗</span></a>
    </div>
    <div class="r-statement">
      <h2>GOOD WORK.<br /><span>GOOD PEOPLE.</span></h2>
      <aside>
        <span class="r-micro">Have a project in mind?</span>
        <p>Let’s make<br />something matter.</p>
        <a class="r-pill" href="mailto:hello@example.com">Start a conversation ↗</a>
      </aside>
    </div>
    <div class="r-directory r-rule">
      <div>
        <span class="r-micro">01 / Studio</span><a href="about.html">Who we are</a
        ><a href="work.html">What we make</a>
      </div>
      <div>
        <span class="r-micro">02 / Elsewhere</span
        ><a href="https://www.instagram.com/">Instagram ↗</a
        ><a href="https://www.linkedin.com/">LinkedIn ↗</a>
      </div>
      <div>
        <span class="r-micro">03 / Say hello</span
        ><a href="mailto:hello@example.com">hello@example.com</a>
        <p>Example studio details.</p>
      </div>
      <div class="r-wordmark">SIGNAL</div>
    </div>
    <div class="r-bottom r-micro">
      <span>© 2026 Signal · Demonstration identity</span><a href="privacy.html">Privacy</a
      ><span>Built around good ideas.</span>
    </div>
  </div>
</footer>

@font-face {
  font-family: "fct-signal-studio-footer-sans";
  src: url("fonts/instrument-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "fct-signal-studio-footer-sans";
  src: url("fonts/instrument-sans-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "fct-signal-studio-footer-serif";
  src: url("fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "fct-signal-studio-footer-display";
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.fct-signal-studio-footer {
  --paper: #f0eee6;
  --ink: #252a25;
  --accent: #e1e56b;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.6 "fct-signal-studio-footer-sans",
    Arial,
    sans-serif;
}
.fct-signal-studio-footer,
.fct-signal-studio-footer * {
  box-sizing: border-box;
}
.fct-signal-studio-footer :is(h2, h3, p, figure, ul) {
  margin: 0;
}
.fct-signal-studio-footer :is(h2, h3) {
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.055em;
}
.fct-signal-studio-footer a {
  color: inherit;
  text-underline-offset: 5px;
}
.fct-signal-studio-footer button,
.fct-signal-studio-footer input,
.fct-signal-studio-footer select,
.fct-signal-studio-footer textarea {
  font: inherit;
}
.fct-signal-studio-footer :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #285331;
  outline-offset: 4px;
}
.fct-signal-studio-footer .r-inner {
  max-width: 1440px;
  margin: auto;
  padding: 48px clamp(20px, 4vw, 64px);
}
.fct-signal-studio-footer .r-micro {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fct-signal-studio-footer .r-rule {
  border-top: 1px solid #252a2555;
}
.fct-signal-studio-footer .r-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 10px 0;
}
.fct-signal-studio-footer .r-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: inherit;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.fct-signal-studio-footer .r-italic {
  font-family: "fct-signal-studio-footer-serif", Georgia, serif;
  font-style: italic;
}
.fct-signal-studio-footer .r-muted {
  color: #565e54;
}
.fct-signal-studio-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}
.fct-signal-studio-footer .r-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fct-signal-studio-footer {
  background: #262c29;
  color: #f0eee6;
}
.fct-signal-studio-footer a:focus-visible {
  outline-color: #e1e56b;
}
.fct-signal-studio-footer .r-foot-intro {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: start;
  margin-bottom: 55px;
}
.fct-signal-studio-footer .r-statement {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 50px;
  align-items: center;
  padding-bottom: 65px;
}
.fct-signal-studio-footer h2 {
  font-family: "fct-signal-studio-footer-display", Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 10rem);
  letter-spacing: -0.025em;
  line-height: 0.88;
}
.fct-signal-studio-footer h2 span {
  color: #b5bcb2;
}
.fct-signal-studio-footer aside {
  background: #e1e56b;
  color: #252a25;
  border-radius: 3px;
  padding: 32px;
  transform: rotate(-2deg);
}
.fct-signal-studio-footer aside p {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin: 35px 0;
}
.fct-signal-studio-footer aside a:focus-visible {
  outline-color: #285331;
}
.fct-signal-studio-footer .r-directory {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
  gap: 30px;
  padding-top: 30px;
  border-color: #b5bcb266;
}
.fct-signal-studio-footer .r-directory > div > a {
  display: block;
  min-height: 44px;
  padding-top: 10px;
  text-decoration: none;
}
.fct-signal-studio-footer .r-directory > div > .r-micro {
  display: block;
  margin-bottom: 15px;
  color: #b5bcb2;
}
.fct-signal-studio-footer .r-directory p {
  font-size: 0.8125rem;
  color: #b5bcb2;
}
.fct-signal-studio-footer .r-wordmark {
  font-family: "fct-signal-studio-footer-display", Impact, sans-serif;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  align-self: end;
}
.fct-signal-studio-footer .r-wordmark span {
  font: 16px Arial;
  vertical-align: top;
}
.fct-signal-studio-footer .r-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 35px;
  margin-top: 30px;
  border-top: 1px solid #b5bcb266;
  color: #b5bcb2;
}
.fct-signal-studio-footer .r-bottom a {
  min-height: 44px;
  align-content: start;
}
@media (max-width: 800px) {
  .fct-signal-studio-footer .r-statement {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .fct-signal-studio-footer aside {
    transform: none;
    padding: 25px;
  }
  .fct-signal-studio-footer h2 {
    font-size: clamp(4.1rem, 14vw, 8rem);
  }
  .fct-signal-studio-footer .r-directory {
    grid-template-columns: 1fr 1fr;
  }
  .fct-signal-studio-footer .r-foot-intro {
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  .fct-signal-studio-footer .r-bottom > span:last-child {
    display: none;
  }
}

---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003cfooter class=\"fct-signal-studio-footer\" data-snippet=\"signal-studio-footer\"\u003e\u003cdiv class=\"r-inner\"\u003e\u003cdiv class=\"r-foot-intro\"\u003e\u003cp class=\"r-micro\"\u003eIndependent by nature.\u003cbr\u003eCollaborative by choice.\u003c/p\u003e\u003ca class=\"r-link\" href=\"work.html\"\u003eSee selected work \u003cspan aria-hidden=\"true\"\u003e↗\u003c/span\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"r-statement\"\u003e\u003ch2\u003eGOOD WORK.\u003cbr\u003e\u003cspan\u003eGOOD PEOPLE.\u003c/span\u003e\u003c/h2\u003e\u003caside\u003e\u003cspan class=\"r-micro\"\u003eHave a project in mind?\u003c/span\u003e\u003cp\u003eLet’s make\u003cbr\u003esomething matter.\u003c/p\u003e\u003ca class=\"r-pill\" href=\"mailto:hello@example.com\"\u003eStart a conversation ↗\u003c/a\u003e\u003c/aside\u003e\u003c/div\u003e\u003cdiv class=\"r-directory r-rule\"\u003e\u003cdiv\u003e\u003cspan class=\"r-micro\"\u003e01 / Studio\u003c/span\u003e\u003ca href=\"about.html\"\u003eWho we are\u003c/a\u003e\u003ca href=\"work.html\"\u003eWhat we make\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003cspan class=\"r-micro\"\u003e02 / Elsewhere\u003c/span\u003e\u003ca href=\"https://www.instagram.com/\"\u003eInstagram ↗\u003c/a\u003e\u003ca href=\"https://www.linkedin.com/\"\u003eLinkedIn ↗\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003cspan class=\"r-micro\"\u003e03 / Say hello\u003c/span\u003e\u003ca href=\"mailto:hello@example.com\"\u003ehello@example.com\u003c/a\u003e\u003cp\u003eExample studio details.\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"r-wordmark\"\u003eSIGNAL\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"r-bottom r-micro\"\u003e\u003cspan\u003e© 2026 Signal · Demonstration identity\u003c/span\u003e\u003ca href=\"privacy.html\"\u003ePrivacy\u003c/a\u003e\u003cspan\u003eBuilt around good ideas.\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/footer\u003e";
---
<Fragment set:html={markup} />
<style is:global>
@font-face{font-family:'fct-signal-studio-footer-sans';src:url('/snippet-assets/signal-studio-footer/fonts/instrument-sans-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'fct-signal-studio-footer-sans';src:url('/snippet-assets/signal-studio-footer/fonts/instrument-sans-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'fct-signal-studio-footer-serif';src:url('/snippet-assets/signal-studio-footer/fonts/instrument-serif-400-italic.woff2') format('woff2');font-style:italic;font-display:swap}@font-face{font-family:'fct-signal-studio-footer-display';src:url('/snippet-assets/signal-studio-footer/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}.fct-signal-studio-footer{--paper:#f0eee6;--ink:#252a25;--accent:#e1e56b;background:var(--paper);color:var(--ink);font:16px/1.6 'fct-signal-studio-footer-sans',Arial,sans-serif}.fct-signal-studio-footer,.fct-signal-studio-footer *{box-sizing:border-box}.fct-signal-studio-footer :is(h2,h3,p,figure,ul){margin:0}.fct-signal-studio-footer :is(h2,h3){line-height:1.05;font-weight:400;letter-spacing:-.055em}.fct-signal-studio-footer a{color:inherit;text-underline-offset:5px}.fct-signal-studio-footer button,.fct-signal-studio-footer input,.fct-signal-studio-footer select,.fct-signal-studio-footer textarea{font:inherit}.fct-signal-studio-footer :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #285331;outline-offset:4px}.fct-signal-studio-footer .r-inner{max-width:1440px;margin:auto;padding:48px clamp(20px,4vw,64px)}.fct-signal-studio-footer .r-micro{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}.fct-signal-studio-footer .r-rule{border-top:1px solid #252a2555}.fct-signal-studio-footer .r-link{display:inline-flex;min-height:48px;align-items:center;justify-content:space-between;gap:25px;text-decoration:none;border-bottom:1px solid currentColor;padding:10px 0}.fct-signal-studio-footer .r-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid currentColor;border-radius:100px;color:inherit;background:transparent;text-decoration:none;cursor:pointer}.fct-signal-studio-footer .r-italic{font-family:'fct-signal-studio-footer-serif',Georgia,serif;font-style:italic}.fct-signal-studio-footer .r-muted{color:#565e54}.fct-signal-studio-footer img{display:block;max-width:100%;height:auto}.fct-signal-studio-footer .r-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-signal-studio-footer{background:#262c29;color:#f0eee6}.fct-signal-studio-footer a:focus-visible{outline-color:#e1e56b}.fct-signal-studio-footer .r-foot-intro{display:flex;justify-content:space-between;gap:30px;align-items:start;margin-bottom:55px}.fct-signal-studio-footer .r-statement{display:grid;grid-template-columns:1.8fr 1fr;gap:50px;align-items:center;padding-bottom:65px}.fct-signal-studio-footer h2{font-family:'fct-signal-studio-footer-display',Impact,sans-serif;font-weight:700;font-size:clamp(4rem,9vw,10rem);letter-spacing:-.025em;line-height:.88}.fct-signal-studio-footer h2 span{color:#b5bcb2}.fct-signal-studio-footer aside{background:#e1e56b;color:#252a25;border-radius:3px;padding:32px;transform:rotate(-2deg)}.fct-signal-studio-footer aside p{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.05em;margin:35px 0}.fct-signal-studio-footer aside a:focus-visible{outline-color:#285331}.fct-signal-studio-footer .r-directory{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:30px;padding-top:30px;border-color:#b5bcb266}.fct-signal-studio-footer .r-directory>div>a{display:block;min-height:44px;padding-top:10px;text-decoration:none}.fct-signal-studio-footer .r-directory>div>.r-micro{display:block;margin-bottom:15px;color:#b5bcb2}.fct-signal-studio-footer .r-directory p{font-size:.8125rem;color:#b5bcb2}.fct-signal-studio-footer .r-wordmark{font-family:'fct-signal-studio-footer-display',Impact,sans-serif;font-size:clamp(2rem,5vw,5rem);font-weight:700;line-height:1;letter-spacing:-.03em;align-self:end}.fct-signal-studio-footer .r-wordmark span{font:16px Arial;vertical-align:top}.fct-signal-studio-footer .r-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:35px;margin-top:30px;border-top:1px solid #b5bcb266;color:#b5bcb2}.fct-signal-studio-footer .r-bottom a{min-height:44px;align-content:start}@media(max-width:800px){.fct-signal-studio-footer .r-statement{grid-template-columns:1fr;gap:35px}.fct-signal-studio-footer aside{transform:none;padding:25px}.fct-signal-studio-footer h2{font-size:clamp(4.1rem,14vw,8rem)}.fct-signal-studio-footer .r-directory{grid-template-columns:1fr 1fr}.fct-signal-studio-footer .r-foot-intro{margin-bottom:40px;flex-wrap:wrap}.fct-signal-studio-footer .r-bottom>span:last-child{display:none}}
</style>

Where this design fits

A narrow introductory line leads into a large two-line typographic statement. A contrasting project panel and numbered directory give the section a clear rhythm at desktop and phone sizes.

Graphic display typography
Contrasting enquiry panel
Numbered contact directory

What is included

The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, a license and setup notes. The Astro ZIP includes Snippet.astro, self-hosted fonts and asset license notes. It can be imported into an existing Astro page or layout.

Set the right destinations

Example navigation, policy and contact links must point to your actual pages. Update visible business details and telephone/email links together. Remove sections that your website does not need.

Add it to an HTML website

Copy snippet.html into the relevant page section.
Load snippet.css after your existing site stylesheet. The class prefix identifies this design.
No JavaScript is needed for this design.
Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website.

Use it in Astro

Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Copy the fonts and any images folders into public/snippet-assets/signal-studio-footer/; the component uses those public paths. Keep each generated prefix unique if you duplicate a component on one page.

Keep the section maintainable

Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes.

Keep building.

Explore full website templates ↗Open the free website tools ↗Check your customized HTML files ↗

Try the design

Copy the source

Where this design fits

What is included

Set the right destinations

Add it to an HTML website

Use it in Astro

Keep the section maintainable

More footers to consider

Minimal inline footer

Agency contact footer

Local business footer

Shop directory footer

Publication footer

Keep building.

Your next ideacould start here.

Your next idea
could start here.