(() => {
for (const root of document.querySelectorAll('[data-snippet="folio-editorial-header"]')) {
if (root.dataset.initialized) continue;
root.dataset.initialized = "true";
const b = root.querySelector(".r-menu");
root.classList.add("is-ready");
b.addEventListener("click", () => {
const open = b.getAttribute("aria-expanded") !== "true";
b.setAttribute("aria-expanded", String(open));
root.classList.toggle("is-open", open);
});
root.addEventListener("keydown", (e) => {
if (e.key === "Escape" && root.classList.contains("is-open")) {
root.classList.remove("is-open");
b.setAttribute("aria-expanded", "false");
b.focus();
}
});
}
})();
---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003cheader class=\"fct-folio-editorial-header\" data-snippet=\"folio-editorial-header\"\u003e\u003cdiv class=\"r-inner\"\u003e\u003cdiv class=\"r-utility r-micro\"\u003e\u003ca href=\"about.html\"\u003eIndependent perspectives on spaces \u0026 culture\u003c/a\u003e\u003cspan\u003eJournal / Studio / Objects\u003c/span\u003e\u003ca href=\"subscribe.html\"\u003eSubscribe ↗\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"r-masthead\"\u003e\u003ca href=\"index.html\" aria-label=\"Folio home\"\u003efolio\u003cspan class=\"r-period\"\u003e.\u003c/span\u003e\u003c/a\u003e\u003cdiv\u003e\u003cspan class=\"r-micro\"\u003eA considered point of view\u003c/span\u003e\u003cp\u003ePlaces to live.\u003cbr\u003eIdeas to keep.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"r-navigation r-rule\"\u003e\u003cbutton type=\"button\" class=\"r-menu\" aria-expanded=\"false\" aria-controls=\"fct-folio-editorial-header-links\"\u003eExplore \u003cspan aria-hidden=\"true\"\u003e+\u003c/span\u003e\u003c/button\u003e\u003cnav id=\"fct-folio-editorial-header-links\" aria-label=\"Primary\"\u003e\u003ca href=\"stories.html\"\u003eStories \u003csup\u003e01\u003c/sup\u003e\u003c/a\u003e\u003ca href=\"spaces.html\"\u003eSpaces \u003csup\u003e02\u003c/sup\u003e\u003c/a\u003e\u003ca href=\"people.html\"\u003ePeople \u003csup\u003e03\u003c/sup\u003e\u003c/a\u003e\u003ca href=\"objects.html\"\u003eObjects \u003csup\u003e04\u003c/sup\u003e\u003c/a\u003e\u003ca href=\"contact.html\"\u003eGet in touch ↗\u003c/a\u003e\u003c/nav\u003e\u003c/div\u003e\u003c/div\u003e\u003c/header\u003e";
---
<Fragment set:html={markup} />
<style is:global>
@font-face{font-family:'fct-folio-editorial-header-sans';src:url('/snippet-assets/folio-editorial-header/fonts/instrument-sans-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'fct-folio-editorial-header-sans';src:url('/snippet-assets/folio-editorial-header/fonts/instrument-sans-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'fct-folio-editorial-header-serif';src:url('/snippet-assets/folio-editorial-header/fonts/instrument-serif-400-italic.woff2') format('woff2');font-style:italic;font-display:swap}@font-face{font-family:'fct-folio-editorial-header-display';src:url('/snippet-assets/folio-editorial-header/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}.fct-folio-editorial-header{--paper:#f0eee6;--ink:#252a25;--accent:#e1e56b;background:var(--paper);color:var(--ink);font:16px/1.6 'fct-folio-editorial-header-sans',Arial,sans-serif}.fct-folio-editorial-header,.fct-folio-editorial-header *{box-sizing:border-box}.fct-folio-editorial-header :is(h2,h3,p,figure,ul){margin:0}.fct-folio-editorial-header :is(h2,h3){line-height:1.05;font-weight:400;letter-spacing:-.055em}.fct-folio-editorial-header a{color:inherit;text-underline-offset:5px}.fct-folio-editorial-header button,.fct-folio-editorial-header input,.fct-folio-editorial-header select,.fct-folio-editorial-header textarea{font:inherit}.fct-folio-editorial-header :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #285331;outline-offset:4px}.fct-folio-editorial-header .r-inner{max-width:1440px;margin:auto;padding:48px clamp(20px,4vw,64px)}.fct-folio-editorial-header .r-micro{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}.fct-folio-editorial-header .r-rule{border-top:1px solid #252a2555}.fct-folio-editorial-header .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-folio-editorial-header .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-folio-editorial-header .r-italic{font-family:'fct-folio-editorial-header-serif',Georgia,serif;font-style:italic}.fct-folio-editorial-header .r-muted{color:#565e54}.fct-folio-editorial-header img{display:block;max-width:100%;height:auto}.fct-folio-editorial-header .r-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fct-folio-editorial-header .r-utility{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #252a2555;padding-bottom:18px}.fct-folio-editorial-header .r-utility a{min-height:44px;align-content:center;text-decoration:none}.fct-folio-editorial-header .r-masthead{display:flex;justify-content:space-between;align-items:end;padding:20px 0 38px;gap:40px}.fct-folio-editorial-header .r-masthead>a{font-size:clamp(7rem,23vw,20rem);line-height:.83;letter-spacing:-.085em;text-decoration:none;font-weight:600}.fct-folio-editorial-header .r-period{color:#916248}.fct-folio-editorial-header .r-masthead>div{padding-bottom:5px;max-width:250px}.fct-folio-editorial-header .r-masthead p{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;margin-top:18px;letter-spacing:-.04em}.fct-folio-editorial-header nav{display:flex;justify-content:space-between;gap:24px;padding-top:12px}.fct-folio-editorial-header nav a{display:inline-flex;min-height:48px;align-items:center;gap:18px;text-decoration:none;font-size:1.1rem}.fct-folio-editorial-header nav sup{font-size:.6875rem;color:#62695e}.fct-folio-editorial-header .r-menu{display:none;min-height:48px;background:transparent;border:0;padding:10px 0;color:inherit;width:100%;justify-content:space-between}.fct-folio-editorial-header .r-navigation{margin-top:0}@media(max-width:700px){.fct-folio-editorial-header .r-inner{padding-top:20px;padding-bottom:15px}.fct-folio-editorial-header .r-utility>span{display:none}.fct-folio-editorial-header .r-utility>a:first-child{max-width:180px;font-size:.6875rem}.fct-folio-editorial-header .r-masthead{display:block;padding-top:28px;padding-bottom:25px}.fct-folio-editorial-header .r-masthead>a{font-size:clamp(7rem,36vw,15rem)}.fct-folio-editorial-header .r-masthead>div{display:flex;align-items:end;justify-content:space-between;max-width:none;margin-top:25px;gap:20px}.fct-folio-editorial-header .r-masthead p{font-size:1.4rem;flex:none;margin:0}.fct-folio-editorial-header .r-masthead .r-micro{max-width:100px;font-size:.6875rem}.fct-folio-editorial-header.is-ready .r-menu{display:flex}.fct-folio-editorial-header.is-ready nav{display:none}.fct-folio-editorial-header.is-open nav{display:flex;flex-direction:column;gap:0;padding-top:0}.fct-folio-editorial-header nav a{justify-content:space-between;border-top:1px solid #252a2533;padding-block:8px}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="folio-editorial-header"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';const b=root.querySelector('.r-menu');root.classList.add('is-ready');b.addEventListener('click',()=>{const open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));root.classList.toggle('is-open',open);});root.addEventListener('keydown',e=>{if(e.key==='Escape'&&root.classList.contains('is-open')){root.classList.remove('is-open');b.setAttribute('aria-expanded','false');b.focus();}});}})();
</script>
Where this design fits
The oversized serif wordmark is balanced by small utility type and a ruled navigation row. Its hierarchy takes cues from editorial property and culture sites without reproducing a reference brand.
Oversized editorial wordmark
Responsive navigation disclosure
Self-hosted typography
What is included
The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, 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.
Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions.
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/folio-editorial-header/; 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.
