[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-site-config":3,"$f9x80oHS8-WXDN0pRLgDGLVFzdlwhW7t8wAlxZs_1q-k":6,"mdc-ch9tnl-key":140},{"gaMeasurementId":4,"bookingUrl":5},"G-7BYTDCVDDR","https:\u002F\u002Ftidycal.com\u002Fcmdcntr\u002F30-minute-meeting",{"post":7,"related":104},{"id":8,"slug":9,"title":10,"description":11,"summary":12,"content":13,"coverImageUrl":14,"coverImageAlt":15,"tags":16,"targetKeywords":22,"faq":27,"howTo":40,"demo":64,"featured":65,"tool":64,"status":66,"reviewNote":64,"metaTitle":67,"metaDescription":68,"canonicalUrl":69,"sourceTicketId":64,"agentGenerated":65,"publishedAt":70,"publishedBy":71,"createdAt":72,"updatedAt":73,"authorId":74,"clusterId":75,"ctaId":76,"author":77,"cluster":85,"cta":89,"tools":96},"ec4ecb2f-8f62-4dd8-9ba9-0a623c1caf44","figma-developer-handoff-sitecore-component-library","Figma Developer Handoff, Sitecore Edition: From Design File to Working Component Library","Inherited polished Figma files but no component library in the CMS? Here is the exact process we run to rebuild a working Sitecore component library on a live site.","A design handoff without a component library leaves your team unable to build pages. This is the process we run to rebuild a working Sitecore component library from a Figma file: agree the vocabulary, map fields to a real contract, build navigation as two components, layer and govern the library, and promote it on a running site.","A design agency finished a site refresh for a higher-education customer, handed over a set of polished Figma files, and moved on. Months later the internal web team was still stuck. The mockups looked finished, but nobody could turn them into pages. There was no component library in the content management system (CMS), no mapping from the design to anything an author could place, and one designer was quietly rebuilding screens by hand from a copied Figma file because that was faster than waiting for the parts that never came. If you have inherited a handoff like that, this is the rebuild process we run.\n\nThe core problem is a category error that shows up on almost every stalled Sitecore project we are asked to rescue. A Figma file is not a component library. It is a picture of one. The library of record is a set of templates, renderings, datasource contracts, and tests that live in source control, and the gap between the picture and the working system is exactly the work the previous team skipped. Closing it is not glamorous, but it is finite, and it follows a repeatable path.\n\n## First, agree on what the words mean\n\nBefore anyone builds a page, the design team and the Sitecore team have to be saying the same thing when they use the same word. This sounds obvious. It is the single most common place these projects go sideways, because \"component\" means one thing in Figma and something more specific in Sitecore, and nobody notices the mismatch until three sprints of rework have piled up.\n\nWe start by filling in one table together, in one meeting:\n\n| Term | What it means in design | What it maps to in Sitecore |\n|---|---|---|\n| Component | A reusable block on a Figma canvas | A rendering plus its datasource template, and optionally a view model |\n| Variant | A visual state: size, theme, layout | Rendering parameters, template inheritance, or an SXA variant |\n| Token | A color, type, or spacing value | A CSS variable or theme entry, never a free-text field an author can override |\n| Frame or artboard | A layout canvas | Not a CMS object at all: it maps to a page type or a placeholder |\n| Library | A shared Figma library | A serialized module of templates, renderings, and tests in source control |\n\nIf the two teams cannot fill that table in a single meeting, that is the finding. Stop building pages and fix the vocabulary first. Every hour spent here saves a day of arguing about why a \"button component\" in the design has no clean home in the CMS.\n\n## Where the CMD CNTR process wraps around the work\n\nThe rebuild itself is a sequence of engineering steps, but we run those steps inside a delivery process that keeps a live site safe while its component library is reconstructed underneath it. Three environments, three gates.\n\n**Staging** is where each rebuilt component lands first, serialized and reviewed as a pull request. Nothing reaches the content authors until it has passed component review: a keyboard pass, an accessibility check, and a look at the datasource contract to confirm authors cannot break it.\n\n**Review** is a content-team gate, not an engineering one. The people who will actually place these components put them on two real page types and try to misuse them. Missing help text, confusing field order, and the temptation to nest a one-off all surface here, before the pattern is set in production.\n\n**Live** is a controlled promotion, component by component, in the order the audit gave us. We never flip an entire rebuilt library at once. The site keeps working the whole way through because we replace parts in dependency order, chrome and navigation last.\n\nThat wrapper matters because the customer usually cannot take the site down. The rebuild has to happen on a running plane.\n\n## The seven-step rebuild\n\nHere is the path we walk, condensed from the longer version but faithful to the order. Each step feeds the next, and skipping one is how you end up back where the previous agency left you.\n\n### Step 1: Inventory every component before you build anything\n\nList every published component using the designer-facing names, then sort each into page chrome (header, footer, navigation), section content (hero, card grid, section navigation), or utility. Flag anything with multiple levels of navigation separately, because that is where the hard accessibility work lives. Capture the accessibility notes now too, because they become rendering requirements later, not a cleanup pass at the end.\n\nWe write each entry as a small record so the mapping is explicit:\n\n```yaml\nname: SectionNav\ndesign_source: Figma \u002F Foundations \u002F Navigation\nsitecore_rendering: Foundation.Navigation.SectionNav\ndatasource_template: Foundation.Navigation.SectionNav\nvariants: Default, Sticky, Compact\na11y: aria-current, skip-to-section, 44px targets\n```\n\n### Step 2: Fix the field mapping before the build sprints\n\nFor each component, decide once where every piece of content lives, and write it down. Title text becomes a single-line or rich text field with a real character limit. A call to action becomes a general link field, label and URL together. Theme becomes a rendering parameter or a droplink, never free text. Images get an image field with mandatory alt text. Nested blocks become placeholders, not one giant \"mega-template\" that authors have to fight.\n\nThe output is a fixed contract per component. When you skip this step, authors invent structure, and six months later you have forty variations of a card because nobody agreed on the one card.\n\n### Step 3: Build multi-level navigation as two components, not one\n\nNavigation is where the copied-Figma-file rebuild usually broke, so it gets its own step. Do not build one reusable mega-menu. Build two components with two jobs.\n\nGlobal navigation owns the primary destinations across the whole site and exposes the current section with `aria-current=\"page\"`. Its mobile pattern has to be operable by keyboard, and it must return focus to the trigger when it closes.\n\nSection navigation manages orientation inside one section only. It reads the current page's context to highlight the active sibling or ancestor, and it must not duplicate the entire global tree into a side rail. A sticky version needs a skip control and must never trap the keyboard.\n\nThe rule that keeps this honest: navigation is an information architecture (IA) problem first and a styling problem second. If the structure is wrong, no amount of CSS fixes it.\n\n### Step 4: Layer the library so authors cannot reach the wrong parts\n\nStructure the library in layers, each with its own review bar. Tokens (colors, type scale, spacing, focus ring) sit at the bottom as CSS variables. Primitives (button, link, icon, text) carry no page logic. Composites (card, hero, accordion) have strict datasource contracts. Chrome (global navigation, section navigation, footer, skip link) gets the highest review bar because it appears on every page. Page types compose placeholders only: an author assembles a page, but cannot invent new chrome.\n\nSerialize all of it with Sitecore Content Serialization (SCS) or an equivalent like Unicorn or TDS, so template and rendering changes arrive as reviewable pull requests instead of silent edits in a shared environment. If you run a Helix solution, this maps cleanly onto the layers: Foundation holds tokens, primitives, and navigation, Feature holds domain composites, and Project holds only site wiring and page types.\n\n### Step 5: Handle variants without exploding your templates\n\nEvery design has variants, and the wrong instinct is a new template for each one. Use the lightest tool that works:\n\n| Approach | Use when | Avoid when |\n|---|---|---|\n| Rendering parameters | Layout or theme toggles | The difference is content that needs translation |\n| Template inheritance | Related components share fields | Unrelated components would share a template |\n| SXA variants | You run SXA with the style toolkit | You are headless with no SXA |\n| A separate rendering | The markup structure genuinely differs | Two components differ by a single field |\n\nThe rule: if a designer called it a variant of the same component, prefer parameters. If the markup structure changes, a carousel versus a static grid, prefer a separate rendering.\n\n### Step 6: Treat the author experience as part of the component\n\nA component is not done when it renders. It is done when an author cannot easily misuse it. Order the fields the way the Figma panel is ordered (content, then media, then behavior). Add help text that names the design source, for example \"Maps to Figma: Section Nav \u002F Compact.\" Enforce validation in the CMS: required alt text, maximum lengths, allowed link types. The Experience Editor should quietly discourage nested one-offs rather than invite them.\n\n### Step 7: Lock the field contract for headless and Layout Service\n\nIf you deliver through Layout Service or XM Cloud, the field names in Sitecore have to match what the front-end component map expects, exactly. A rename on either side breaks the contract silently. Write the contract down as the shape both sides agree to:\n\n```json\n{\n  \"componentName\": \"SectionNav\",\n  \"fields\": {\n    \"heading\": { \"value\": \"About\" },\n    \"items\": [\n      { \"fields\": { \"link\": { \"value\": { \"href\": \"\u002Fabout\", \"text\": \"About\" } } } }\n    ]\n  },\n  \"params\": { \"variant\": \"sticky\" }\n}\n```\n\n## Orientation rules the section nav has to follow\n\nBecause navigation is where these rebuilds most often fail an accessibility review, we hold the section navigation to a written set of orientation rules and keep them in the component's README so the next developer inherits the reasoning, not just the code:\n\n- Show the user where they are. Deep trees disorient people fast. Use `aria-current`, a visible active state, and an optional breadcrumb.\n- Scope the section nav to its section root. Resolve it from the page's ancestors so you are not dumping the whole site into a side rail.\n- Match navigation labels to page titles. A label that disagrees with the page it leads to erodes trust.\n- Keep keyboard order matched to visual order. No positive `tabindex`, and let the DOM order carry the sequence.\n- Close the mobile drawer on Escape and restore focus to the trigger. Trap focus only while the drawer is open.\n\nResolving the section root is a few lines, and getting it right is what stops the side rail from listing every page on the site:\n\n```csharp\nvar page = Sitecore.Context.Item;\nvar sectionRoot = page.Axes.GetAncestors()\n  .FirstOrDefault(a => a.TemplateID == SectionRootTemplateId) ?? page;\nvar links = sectionRoot.Children\n  .Where(c => c.TemplateID == NavLinkTemplateId);\n```\n\n## The governance that stops it from happening again\n\nThe reason the customer needed a rebuild in the first place is that the original library had no guardrails, so it forked until it was unusable. We install a short governance checklist and hold the line on it:\n\n- No new rendering ships without a design component ID in its README.\n- No hex colors in rich text. Tokens only.\n- Navigation changes go through IA review, not visual QA alone.\n- Every template or rendering change arrives as a serialization pull request.\n- A quarterly audit hunts for unused renderings, duplicate heroes, and orphan placeholders.\n\nNone of these are heavy. Together they are the difference between a library that stays coherent for years and one that needs this same rescue again in eighteen months.\n\n## This discipline is not Sitecore-specific\n\nWe run the exact same process when we build our own component libraries in Nuxt from purchased or commissioned designs. The platform changes, the discipline does not: agree on vocabulary, map fields to a real contract, build navigation as an IA problem, layer the library, and govern it so it cannot fork. Sitecore has the richest tooling for enforcing these contracts at the CMS layer, which is why we lean on it hard for enterprise work, but the failure mode (a design file mistaken for a working library) is universal.\n\n## Further reading\n\nThis process is adapted, with permission, from Mohd Naeem's deeper walkthrough, [From Zeplin and Figma to a Sitecore Component Library](https:\u002F\u002Fwww.mohdnaeem.com\u002Ffrom-zeplin-and-figma-to-sitecore-component-library\u002F), which includes the full worked SectionNav example and more of the Helix detail. The blank version of the mapping table above is available as a free [Figma-to-CMS component mapping template](\u002Ftools\u002Ffigma-to-cms-mapping-table). If accessibility is where your handoff is failing review, the companion piece on [WCAG 2.2 for Sitecore teams](\u002Fblog\u002Fenterprise-cms\u002Fwcag-2-2-vs-2-1-sitecore-teams) covers what authors break after launch and how the CMS can stop them. For the wider platform-and-partner picture, start with the [enterprise CMS pillar](\u002Fblog\u002Fenterprise-cms\u002Fenterprise-cms-2026-platform-and-partner).","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Ffigma-handoff.png","Chrome component blocks assembling from purple wireframe blueprints into a solid component library",[17,18,19,20,21],"sitecore","figma","component library","design handoff","accessibility",[23,24,25,26],"figma developer handoff","sitecore component library","figma to sitecore","design system handoff",[28,31,34,37],{"answer":29,"question":30},"It helps, but it is not required. The rebuild starts from whatever design source you have, a Figma file, a Zeplin export, or the live site itself, and reconstructs the component contract from there. What matters is agreeing on the vocabulary and the field mapping, not owning a specific file.","Do I need the original agency’s Figma file to rebuild the component library?",{"answer":32,"question":33},"It depends on the number of components and how much navigation complexity is involved, but the work is finite and follows a fixed order. Most of the time goes into inventory, field mapping, and multi-level navigation, not the page building. We scope it component by component so you see progress on a running site rather than waiting for a big-bang delivery.","How long does a Sitecore component library rebuild take?",{"answer":35,"question":36},"A Figma component is a reusable visual block. A Sitecore component is a rendering plus its datasource template, and optionally a view model, that an author can place and fill without breaking it. The Figma file is a picture of the component; the Sitecore version is the working contract in source control.","What is the difference between a Figma component and a Sitecore component?",{"answer":38,"question":39},"Yes. We rebuild on a running site by replacing components in dependency order, staging and reviewing each one before it reaches authors, and promoting to live component by component. Chrome and navigation go last.","Can you rebuild the library without taking the site down?",{"name":41,"steps":42},"Rebuild a Sitecore component library from a Figma handoff",[43,46,49,52,55,58,61],{"name":44,"text":45},"Inventory the components","List every component by its designer-facing name, sort into chrome, section, and utility, flag multi-level navigation, and capture accessibility notes as build requirements.",{"name":47,"text":48},"Fix the field mapping","For each component, decide once where every piece of content lives and its constraint, using the most restrictive field type that works.",{"name":50,"text":51},"Build multi-level navigation as two components","Separate global navigation from section navigation, each with its own job and orientation rules, instead of one reusable mega-menu.",{"name":53,"text":54},"Layer the library","Structure tokens, primitives, composites, chrome, and page types in layers, each with its own review bar, and serialize them for pull-request review.",{"name":56,"text":57},"Handle variants without exploding templates","Use rendering parameters for layout and theme toggles, and a separate rendering only when the markup structure genuinely differs.",{"name":59,"text":60},"Make the author experience part of the component","Order fields like the design panel, add help text naming the design source, and enforce validation so authors cannot easily misuse the component.",{"name":62,"text":63},"Lock the field contract for headless","Match Sitecore field names exactly to what the front-end component map expects, and write the contract down as the shape both sides agree to.",null,false,"published","Figma Developer Handoff, Sitecore Edition: Design File to Component Library","The rebuild playbook for a Sitecore component library when a design agency hands over Figma files but no working library: terminology, field mapping, navigation, and governance.","https:\u002F\u002Fcmdcntr.io\u002Fblog\u002Fenterprise-cms\u002Ffigma-developer-handoff-sitecore-component-library","2026-05-27T14:00:00.000Z","7452d3cc-b0aa-46e4-96e6-da9c0225c471","2026-07-11T13:00:04.749Z","2026-07-11T13:00:43.248Z","57ab518f-eb4a-4619-9adc-8f106988bf5d","23d49753-baf2-4629-b6fc-df27c558f48d","00000000-0000-4000-e610-000000000001",{"slug":78,"name":79,"avatarUrl":80,"role":81,"bio":82,"isPublic":83,"expertiseSummary":84,"linkedin":64,"github":64,"twitter":64,"website":64},"mohd-naeem","Mohd Naeem","\u002Fapi\u002Fpublic\u002Favatar\u002F443302bc-2d77-4202-8688-1968f2354b37","Sitecore Lead Developer and Solution Architect (XM\u002FXP, headless, practical AI)","Mohd Naeem is a Sitecore lead developer and solution architect with 15+ years across XM, XP, and composable headless delivery with JSS. He has led platform upgrades, content modeling, search and personalization, and CI\u002FCD for multi-site digital experience programs, usually as the technical lead bridging developers, content teams, and stakeholders. His recent work applies practical AI where it actually earns its keep: smarter search and content discovery, draft and review workflows for editors, and API-based assistants wired into existing Sitecore and line-of-business systems. He is AWS, Microsoft, and Sitecore certified, and his delivery record includes public sites for regulated pharma brands. Through Command Center he takes on greenfield architecture, rescue and refactor work, platform upgrades, and hands-on delivery leadership.",true,"Sitecore XM\u002FXP and XM Cloud, JSS\u002FSXA\u002FHelix, C#\u002F.NET, Azure and Azure DevOps, enterprise integrations, practical AI for content workflows",{"slug":86,"name":87,"color":88},"enterprise-cms","Enterprise CMS Delivery","#0EA5E9",{"id":76,"name":90,"ctaType":91,"heading":92,"description":93,"buttonText":94,"url":95,"leadMagnetUrl":64},"Design Handoff Rescue","book_call","Inherited a design handoff nobody can build?","We rebuild the component library your last agency skipped, on a running site, and hand off something your team can actually use.","Book a call","https:\u002F\u002Fcmdcntr.io\u002Fbook",[97],{"id":98,"slug":99,"name":100,"kind":101,"summary":102,"version":103,"coverImageUrl":64},"15c017af-88d1-4bc7-af3b-6c43b899a40f","figma-to-cms-mapping-table","Figma-to-CMS Component Mapping Table (Template)","file","A blank mapping template that turns a design component into a real CMS content contract before anyone builds a page.","1.0",[105,119],{"id":106,"slug":107,"title":108,"description":109,"coverImageUrl":110,"coverImageAlt":111,"tags":112,"featured":65,"tool":64,"publishedAt":116,"author":117,"cluster":118},"02e9949a-430d-4e35-b65e-71918e3caf9b","wcag-2-2-vs-2-1-sitecore-teams","WCAG 2.2 vs 2.1 for Sitecore Teams: What Changed and What Authors Actually Break","WCAG 2.2 is additive over 2.1, and most accessibility regressions on a Sitecore site come from authoring, not code. Here is what changed and what authors break after launch.","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Fwcag-2-2.png","A polished chrome shield bearing a glowing purple accessibility symbol",[113,21,17,114,115],"wcag","ada","compliance","2026-06-03T14:00:00.000Z",{"slug":78,"name":79,"avatarUrl":80,"role":81,"bio":82,"isPublic":83},{"slug":86,"name":87,"color":88},{"id":120,"slug":121,"title":122,"description":123,"coverImageUrl":124,"coverImageAlt":125,"tags":126,"featured":83,"tool":64,"publishedAt":132,"author":133,"cluster":139},"837a37b6-7992-476e-81a7-52d25c5d6449","enterprise-cms-2026-platform-and-partner","Enterprise CMS in 2026: How to Choose the Platform and the Partner","Choosing an enterprise CMS is two decisions: the platform and the partner. A practical 2026 guide to Sitecore, Storyblok, Contentful, and AEM, and how to pick the team that delivers it.","https:\u002F\u002Fcmdcntr.io\u002Fcovers\u002Fenterprise-cms\u002Fpillar.png","Two polished chrome monoliths representing an enterprise CMS platform and its delivery partner, wired with glowing purple circuitry",[127,17,128,129,130,131],"enterprise cms","headless cms","storyblok","contentful","cms migration","2026-05-13T14:00:00.000Z",{"slug":134,"name":135,"avatarUrl":136,"role":137,"bio":138,"isPublic":83},"michael-graham","Michael Graham","\u002Fapi\u002Fpublic\u002Favatar\u002F7452d3cc-b0aa-46e4-96e6-da9c0225c471","Founder & Software Engineer","Obsessed with building top-tier web software and crafting unique, polished user experiences.",{"slug":86,"name":87,"color":88},{"data":141,"body":142},{},{"type":143,"children":144},"root",[145,153,158,165,170,175,298,303,309,314,325,335,345,350,356,361,368,373,378,503,509,514,519,525,530,543,548,553,559,564,569,575,580,679,684,690,695,701,706,1116,1122,1127,1173,1178,1227,1233,1238,1266,1271,1277,1282,1288,1328],{"type":146,"tag":147,"props":148,"children":149},"element","p",{},[150],{"type":151,"value":152},"text","A design agency finished a site refresh for a higher-education customer, handed over a set of polished Figma files, and moved on. Months later the internal web team was still stuck. The mockups looked finished, but nobody could turn them into pages. There was no component library in the content management system (CMS), no mapping from the design to anything an author could place, and one designer was quietly rebuilding screens by hand from a copied Figma file because that was faster than waiting for the parts that never came. If you have inherited a handoff like that, this is the rebuild process we run.",{"type":146,"tag":147,"props":154,"children":155},{},[156],{"type":151,"value":157},"The core problem is a category error that shows up on almost every stalled Sitecore project we are asked to rescue. A Figma file is not a component library. It is a picture of one. The library of record is a set of templates, renderings, datasource contracts, and tests that live in source control, and the gap between the picture and the working system is exactly the work the previous team skipped. Closing it is not glamorous, but it is finite, and it follows a repeatable path.",{"type":146,"tag":159,"props":160,"children":162},"h2",{"id":161},"first-agree-on-what-the-words-mean",[163],{"type":151,"value":164},"First, agree on what the words mean",{"type":146,"tag":147,"props":166,"children":167},{},[168],{"type":151,"value":169},"Before anyone builds a page, the design team and the Sitecore team have to be saying the same thing when they use the same word. This sounds obvious. It is the single most common place these projects go sideways, because \"component\" means one thing in Figma and something more specific in Sitecore, and nobody notices the mismatch until three sprints of rework have piled up.",{"type":146,"tag":147,"props":171,"children":172},{},[173],{"type":151,"value":174},"We start by filling in one table together, in one meeting:",{"type":146,"tag":176,"props":177,"children":178},"table",{},[179,203],{"type":146,"tag":180,"props":181,"children":182},"thead",{},[183],{"type":146,"tag":184,"props":185,"children":186},"tr",{},[187,193,198],{"type":146,"tag":188,"props":189,"children":190},"th",{},[191],{"type":151,"value":192},"Term",{"type":146,"tag":188,"props":194,"children":195},{},[196],{"type":151,"value":197},"What it means in design",{"type":146,"tag":188,"props":199,"children":200},{},[201],{"type":151,"value":202},"What it maps to in Sitecore",{"type":146,"tag":204,"props":205,"children":206},"tbody",{},[207,226,244,262,280],{"type":146,"tag":184,"props":208,"children":209},{},[210,216,221],{"type":146,"tag":211,"props":212,"children":213},"td",{},[214],{"type":151,"value":215},"Component",{"type":146,"tag":211,"props":217,"children":218},{},[219],{"type":151,"value":220},"A reusable block on a Figma canvas",{"type":146,"tag":211,"props":222,"children":223},{},[224],{"type":151,"value":225},"A rendering plus its datasource template, and optionally a view model",{"type":146,"tag":184,"props":227,"children":228},{},[229,234,239],{"type":146,"tag":211,"props":230,"children":231},{},[232],{"type":151,"value":233},"Variant",{"type":146,"tag":211,"props":235,"children":236},{},[237],{"type":151,"value":238},"A visual state: size, theme, layout",{"type":146,"tag":211,"props":240,"children":241},{},[242],{"type":151,"value":243},"Rendering parameters, template inheritance, or an SXA variant",{"type":146,"tag":184,"props":245,"children":246},{},[247,252,257],{"type":146,"tag":211,"props":248,"children":249},{},[250],{"type":151,"value":251},"Token",{"type":146,"tag":211,"props":253,"children":254},{},[255],{"type":151,"value":256},"A color, type, or spacing value",{"type":146,"tag":211,"props":258,"children":259},{},[260],{"type":151,"value":261},"A CSS variable or theme entry, never a free-text field an author can override",{"type":146,"tag":184,"props":263,"children":264},{},[265,270,275],{"type":146,"tag":211,"props":266,"children":267},{},[268],{"type":151,"value":269},"Frame or artboard",{"type":146,"tag":211,"props":271,"children":272},{},[273],{"type":151,"value":274},"A layout canvas",{"type":146,"tag":211,"props":276,"children":277},{},[278],{"type":151,"value":279},"Not a CMS object at all: it maps to a page type or a placeholder",{"type":146,"tag":184,"props":281,"children":282},{},[283,288,293],{"type":146,"tag":211,"props":284,"children":285},{},[286],{"type":151,"value":287},"Library",{"type":146,"tag":211,"props":289,"children":290},{},[291],{"type":151,"value":292},"A shared Figma library",{"type":146,"tag":211,"props":294,"children":295},{},[296],{"type":151,"value":297},"A serialized module of templates, renderings, and tests in source control",{"type":146,"tag":147,"props":299,"children":300},{},[301],{"type":151,"value":302},"If the two teams cannot fill that table in a single meeting, that is the finding. Stop building pages and fix the vocabulary first. Every hour spent here saves a day of arguing about why a \"button component\" in the design has no clean home in the CMS.",{"type":146,"tag":159,"props":304,"children":306},{"id":305},"where-the-cmd-cntr-process-wraps-around-the-work",[307],{"type":151,"value":308},"Where the CMD CNTR process wraps around the work",{"type":146,"tag":147,"props":310,"children":311},{},[312],{"type":151,"value":313},"The rebuild itself is a sequence of engineering steps, but we run those steps inside a delivery process that keeps a live site safe while its component library is reconstructed underneath it. Three environments, three gates.",{"type":146,"tag":147,"props":315,"children":316},{},[317,323],{"type":146,"tag":318,"props":319,"children":320},"strong",{},[321],{"type":151,"value":322},"Staging",{"type":151,"value":324}," is where each rebuilt component lands first, serialized and reviewed as a pull request. Nothing reaches the content authors until it has passed component review: a keyboard pass, an accessibility check, and a look at the datasource contract to confirm authors cannot break it.",{"type":146,"tag":147,"props":326,"children":327},{},[328,333],{"type":146,"tag":318,"props":329,"children":330},{},[331],{"type":151,"value":332},"Review",{"type":151,"value":334}," is a content-team gate, not an engineering one. The people who will actually place these components put them on two real page types and try to misuse them. Missing help text, confusing field order, and the temptation to nest a one-off all surface here, before the pattern is set in production.",{"type":146,"tag":147,"props":336,"children":337},{},[338,343],{"type":146,"tag":318,"props":339,"children":340},{},[341],{"type":151,"value":342},"Live",{"type":151,"value":344}," is a controlled promotion, component by component, in the order the audit gave us. We never flip an entire rebuilt library at once. The site keeps working the whole way through because we replace parts in dependency order, chrome and navigation last.",{"type":146,"tag":147,"props":346,"children":347},{},[348],{"type":151,"value":349},"That wrapper matters because the customer usually cannot take the site down. The rebuild has to happen on a running plane.",{"type":146,"tag":159,"props":351,"children":353},{"id":352},"the-seven-step-rebuild",[354],{"type":151,"value":355},"The seven-step rebuild",{"type":146,"tag":147,"props":357,"children":358},{},[359],{"type":151,"value":360},"Here is the path we walk, condensed from the longer version but faithful to the order. Each step feeds the next, and skipping one is how you end up back where the previous agency left you.",{"type":146,"tag":362,"props":363,"children":365},"h3",{"id":364},"step-1-inventory-every-component-before-you-build-anything",[366],{"type":151,"value":367},"Step 1: Inventory every component before you build anything",{"type":146,"tag":147,"props":369,"children":370},{},[371],{"type":151,"value":372},"List every published component using the designer-facing names, then sort each into page chrome (header, footer, navigation), section content (hero, card grid, section navigation), or utility. Flag anything with multiple levels of navigation separately, because that is where the hard accessibility work lives. Capture the accessibility notes now too, because they become rendering requirements later, not a cleanup pass at the end.",{"type":146,"tag":147,"props":374,"children":375},{},[376],{"type":151,"value":377},"We write each entry as a small record so the mapping is explicit:",{"type":146,"tag":379,"props":380,"children":385},"pre",{"className":381,"code":382,"language":383,"meta":384,"style":384},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","name: SectionNav\ndesign_source: Figma \u002F Foundations \u002F Navigation\nsitecore_rendering: Foundation.Navigation.SectionNav\ndatasource_template: Foundation.Navigation.SectionNav\nvariants: Default, Sticky, Compact\na11y: aria-current, skip-to-section, 44px targets\n","yaml","",[386],{"type":146,"tag":387,"props":388,"children":389},"code",{"__ignoreMap":384},[390,414,432,450,467,485],{"type":146,"tag":391,"props":392,"children":395},"span",{"class":393,"line":394},"line",1,[396,402,408],{"type":146,"tag":391,"props":397,"children":399},{"style":398},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[400],{"type":151,"value":401},"name",{"type":146,"tag":391,"props":403,"children":405},{"style":404},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[406],{"type":151,"value":407},":",{"type":146,"tag":391,"props":409,"children":411},{"style":410},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[412],{"type":151,"value":413}," SectionNav\n",{"type":146,"tag":391,"props":415,"children":417},{"class":393,"line":416},2,[418,423,427],{"type":146,"tag":391,"props":419,"children":420},{"style":398},[421],{"type":151,"value":422},"design_source",{"type":146,"tag":391,"props":424,"children":425},{"style":404},[426],{"type":151,"value":407},{"type":146,"tag":391,"props":428,"children":429},{"style":410},[430],{"type":151,"value":431}," Figma \u002F Foundations \u002F Navigation\n",{"type":146,"tag":391,"props":433,"children":435},{"class":393,"line":434},3,[436,441,445],{"type":146,"tag":391,"props":437,"children":438},{"style":398},[439],{"type":151,"value":440},"sitecore_rendering",{"type":146,"tag":391,"props":442,"children":443},{"style":404},[444],{"type":151,"value":407},{"type":146,"tag":391,"props":446,"children":447},{"style":410},[448],{"type":151,"value":449}," Foundation.Navigation.SectionNav\n",{"type":146,"tag":391,"props":451,"children":453},{"class":393,"line":452},4,[454,459,463],{"type":146,"tag":391,"props":455,"children":456},{"style":398},[457],{"type":151,"value":458},"datasource_template",{"type":146,"tag":391,"props":460,"children":461},{"style":404},[462],{"type":151,"value":407},{"type":146,"tag":391,"props":464,"children":465},{"style":410},[466],{"type":151,"value":449},{"type":146,"tag":391,"props":468,"children":470},{"class":393,"line":469},5,[471,476,480],{"type":146,"tag":391,"props":472,"children":473},{"style":398},[474],{"type":151,"value":475},"variants",{"type":146,"tag":391,"props":477,"children":478},{"style":404},[479],{"type":151,"value":407},{"type":146,"tag":391,"props":481,"children":482},{"style":410},[483],{"type":151,"value":484}," Default, Sticky, Compact\n",{"type":146,"tag":391,"props":486,"children":488},{"class":393,"line":487},6,[489,494,498],{"type":146,"tag":391,"props":490,"children":491},{"style":398},[492],{"type":151,"value":493},"a11y",{"type":146,"tag":391,"props":495,"children":496},{"style":404},[497],{"type":151,"value":407},{"type":146,"tag":391,"props":499,"children":500},{"style":410},[501],{"type":151,"value":502}," aria-current, skip-to-section, 44px targets\n",{"type":146,"tag":362,"props":504,"children":506},{"id":505},"step-2-fix-the-field-mapping-before-the-build-sprints",[507],{"type":151,"value":508},"Step 2: Fix the field mapping before the build sprints",{"type":146,"tag":147,"props":510,"children":511},{},[512],{"type":151,"value":513},"For each component, decide once where every piece of content lives, and write it down. Title text becomes a single-line or rich text field with a real character limit. A call to action becomes a general link field, label and URL together. Theme becomes a rendering parameter or a droplink, never free text. Images get an image field with mandatory alt text. Nested blocks become placeholders, not one giant \"mega-template\" that authors have to fight.",{"type":146,"tag":147,"props":515,"children":516},{},[517],{"type":151,"value":518},"The output is a fixed contract per component. When you skip this step, authors invent structure, and six months later you have forty variations of a card because nobody agreed on the one card.",{"type":146,"tag":362,"props":520,"children":522},{"id":521},"step-3-build-multi-level-navigation-as-two-components-not-one",[523],{"type":151,"value":524},"Step 3: Build multi-level navigation as two components, not one",{"type":146,"tag":147,"props":526,"children":527},{},[528],{"type":151,"value":529},"Navigation is where the copied-Figma-file rebuild usually broke, so it gets its own step. Do not build one reusable mega-menu. Build two components with two jobs.",{"type":146,"tag":147,"props":531,"children":532},{},[533,535,541],{"type":151,"value":534},"Global navigation owns the primary destinations across the whole site and exposes the current section with ",{"type":146,"tag":387,"props":536,"children":538},{"className":537},[],[539],{"type":151,"value":540},"aria-current=\"page\"",{"type":151,"value":542},". Its mobile pattern has to be operable by keyboard, and it must return focus to the trigger when it closes.",{"type":146,"tag":147,"props":544,"children":545},{},[546],{"type":151,"value":547},"Section navigation manages orientation inside one section only. It reads the current page's context to highlight the active sibling or ancestor, and it must not duplicate the entire global tree into a side rail. A sticky version needs a skip control and must never trap the keyboard.",{"type":146,"tag":147,"props":549,"children":550},{},[551],{"type":151,"value":552},"The rule that keeps this honest: navigation is an information architecture (IA) problem first and a styling problem second. If the structure is wrong, no amount of CSS fixes it.",{"type":146,"tag":362,"props":554,"children":556},{"id":555},"step-4-layer-the-library-so-authors-cannot-reach-the-wrong-parts",[557],{"type":151,"value":558},"Step 4: Layer the library so authors cannot reach the wrong parts",{"type":146,"tag":147,"props":560,"children":561},{},[562],{"type":151,"value":563},"Structure the library in layers, each with its own review bar. Tokens (colors, type scale, spacing, focus ring) sit at the bottom as CSS variables. Primitives (button, link, icon, text) carry no page logic. Composites (card, hero, accordion) have strict datasource contracts. Chrome (global navigation, section navigation, footer, skip link) gets the highest review bar because it appears on every page. Page types compose placeholders only: an author assembles a page, but cannot invent new chrome.",{"type":146,"tag":147,"props":565,"children":566},{},[567],{"type":151,"value":568},"Serialize all of it with Sitecore Content Serialization (SCS) or an equivalent like Unicorn or TDS, so template and rendering changes arrive as reviewable pull requests instead of silent edits in a shared environment. If you run a Helix solution, this maps cleanly onto the layers: Foundation holds tokens, primitives, and navigation, Feature holds domain composites, and Project holds only site wiring and page types.",{"type":146,"tag":362,"props":570,"children":572},{"id":571},"step-5-handle-variants-without-exploding-your-templates",[573],{"type":151,"value":574},"Step 5: Handle variants without exploding your templates",{"type":146,"tag":147,"props":576,"children":577},{},[578],{"type":151,"value":579},"Every design has variants, and the wrong instinct is a new template for each one. Use the lightest tool that works:",{"type":146,"tag":176,"props":581,"children":582},{},[583,604],{"type":146,"tag":180,"props":584,"children":585},{},[586],{"type":146,"tag":184,"props":587,"children":588},{},[589,594,599],{"type":146,"tag":188,"props":590,"children":591},{},[592],{"type":151,"value":593},"Approach",{"type":146,"tag":188,"props":595,"children":596},{},[597],{"type":151,"value":598},"Use when",{"type":146,"tag":188,"props":600,"children":601},{},[602],{"type":151,"value":603},"Avoid when",{"type":146,"tag":204,"props":605,"children":606},{},[607,625,643,661],{"type":146,"tag":184,"props":608,"children":609},{},[610,615,620],{"type":146,"tag":211,"props":611,"children":612},{},[613],{"type":151,"value":614},"Rendering parameters",{"type":146,"tag":211,"props":616,"children":617},{},[618],{"type":151,"value":619},"Layout or theme toggles",{"type":146,"tag":211,"props":621,"children":622},{},[623],{"type":151,"value":624},"The difference is content that needs translation",{"type":146,"tag":184,"props":626,"children":627},{},[628,633,638],{"type":146,"tag":211,"props":629,"children":630},{},[631],{"type":151,"value":632},"Template inheritance",{"type":146,"tag":211,"props":634,"children":635},{},[636],{"type":151,"value":637},"Related components share fields",{"type":146,"tag":211,"props":639,"children":640},{},[641],{"type":151,"value":642},"Unrelated components would share a template",{"type":146,"tag":184,"props":644,"children":645},{},[646,651,656],{"type":146,"tag":211,"props":647,"children":648},{},[649],{"type":151,"value":650},"SXA variants",{"type":146,"tag":211,"props":652,"children":653},{},[654],{"type":151,"value":655},"You run SXA with the style toolkit",{"type":146,"tag":211,"props":657,"children":658},{},[659],{"type":151,"value":660},"You are headless with no SXA",{"type":146,"tag":184,"props":662,"children":663},{},[664,669,674],{"type":146,"tag":211,"props":665,"children":666},{},[667],{"type":151,"value":668},"A separate rendering",{"type":146,"tag":211,"props":670,"children":671},{},[672],{"type":151,"value":673},"The markup structure genuinely differs",{"type":146,"tag":211,"props":675,"children":676},{},[677],{"type":151,"value":678},"Two components differ by a single field",{"type":146,"tag":147,"props":680,"children":681},{},[682],{"type":151,"value":683},"The rule: if a designer called it a variant of the same component, prefer parameters. If the markup structure changes, a carousel versus a static grid, prefer a separate rendering.",{"type":146,"tag":362,"props":685,"children":687},{"id":686},"step-6-treat-the-author-experience-as-part-of-the-component",[688],{"type":151,"value":689},"Step 6: Treat the author experience as part of the component",{"type":146,"tag":147,"props":691,"children":692},{},[693],{"type":151,"value":694},"A component is not done when it renders. It is done when an author cannot easily misuse it. Order the fields the way the Figma panel is ordered (content, then media, then behavior). Add help text that names the design source, for example \"Maps to Figma: Section Nav \u002F Compact.\" Enforce validation in the CMS: required alt text, maximum lengths, allowed link types. The Experience Editor should quietly discourage nested one-offs rather than invite them.",{"type":146,"tag":362,"props":696,"children":698},{"id":697},"step-7-lock-the-field-contract-for-headless-and-layout-service",[699],{"type":151,"value":700},"Step 7: Lock the field contract for headless and Layout Service",{"type":146,"tag":147,"props":702,"children":703},{},[704],{"type":151,"value":705},"If you deliver through Layout Service or XM Cloud, the field names in Sitecore have to match what the front-end component map expects, exactly. A rename on either side breaks the contract silently. Write the contract down as the shape both sides agree to:",{"type":146,"tag":379,"props":707,"children":711},{"className":708,"code":709,"language":710,"meta":384,"style":384},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"componentName\": \"SectionNav\",\n  \"fields\": {\n    \"heading\": { \"value\": \"About\" },\n    \"items\": [\n      { \"fields\": { \"link\": { \"value\": { \"href\": \"\u002Fabout\", \"text\": \"About\" } } } }\n    ]\n  },\n  \"params\": { \"variant\": \"sticky\" }\n}\n","json",[712],{"type":146,"tag":387,"props":713,"children":714},{"__ignoreMap":384},[715,723,765,790,853,878,1030,1039,1048,1107],{"type":146,"tag":391,"props":716,"children":717},{"class":393,"line":394},[718],{"type":146,"tag":391,"props":719,"children":720},{"style":404},[721],{"type":151,"value":722},"{\n",{"type":146,"tag":391,"props":724,"children":725},{"class":393,"line":416},[726,731,737,742,746,751,756,760],{"type":146,"tag":391,"props":727,"children":728},{"style":404},[729],{"type":151,"value":730},"  \"",{"type":146,"tag":391,"props":732,"children":734},{"style":733},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[735],{"type":151,"value":736},"componentName",{"type":146,"tag":391,"props":738,"children":739},{"style":404},[740],{"type":151,"value":741},"\"",{"type":146,"tag":391,"props":743,"children":744},{"style":404},[745],{"type":151,"value":407},{"type":146,"tag":391,"props":747,"children":748},{"style":404},[749],{"type":151,"value":750}," \"",{"type":146,"tag":391,"props":752,"children":753},{"style":410},[754],{"type":151,"value":755},"SectionNav",{"type":146,"tag":391,"props":757,"children":758},{"style":404},[759],{"type":151,"value":741},{"type":146,"tag":391,"props":761,"children":762},{"style":404},[763],{"type":151,"value":764},",\n",{"type":146,"tag":391,"props":766,"children":767},{"class":393,"line":434},[768,772,777,781,785],{"type":146,"tag":391,"props":769,"children":770},{"style":404},[771],{"type":151,"value":730},{"type":146,"tag":391,"props":773,"children":774},{"style":733},[775],{"type":151,"value":776},"fields",{"type":146,"tag":391,"props":778,"children":779},{"style":404},[780],{"type":151,"value":741},{"type":146,"tag":391,"props":782,"children":783},{"style":404},[784],{"type":151,"value":407},{"type":146,"tag":391,"props":786,"children":787},{"style":404},[788],{"type":151,"value":789}," {\n",{"type":146,"tag":391,"props":791,"children":792},{"class":393,"line":452},[793,798,804,808,812,817,821,827,831,835,839,844,848],{"type":146,"tag":391,"props":794,"children":795},{"style":404},[796],{"type":151,"value":797},"    \"",{"type":146,"tag":391,"props":799,"children":801},{"style":800},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[802],{"type":151,"value":803},"heading",{"type":146,"tag":391,"props":805,"children":806},{"style":404},[807],{"type":151,"value":741},{"type":146,"tag":391,"props":809,"children":810},{"style":404},[811],{"type":151,"value":407},{"type":146,"tag":391,"props":813,"children":814},{"style":404},[815],{"type":151,"value":816}," {",{"type":146,"tag":391,"props":818,"children":819},{"style":404},[820],{"type":151,"value":750},{"type":146,"tag":391,"props":822,"children":824},{"style":823},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[825],{"type":151,"value":826},"value",{"type":146,"tag":391,"props":828,"children":829},{"style":404},[830],{"type":151,"value":741},{"type":146,"tag":391,"props":832,"children":833},{"style":404},[834],{"type":151,"value":407},{"type":146,"tag":391,"props":836,"children":837},{"style":404},[838],{"type":151,"value":750},{"type":146,"tag":391,"props":840,"children":841},{"style":410},[842],{"type":151,"value":843},"About",{"type":146,"tag":391,"props":845,"children":846},{"style":404},[847],{"type":151,"value":741},{"type":146,"tag":391,"props":849,"children":850},{"style":404},[851],{"type":151,"value":852}," },\n",{"type":146,"tag":391,"props":854,"children":855},{"class":393,"line":469},[856,860,865,869,873],{"type":146,"tag":391,"props":857,"children":858},{"style":404},[859],{"type":151,"value":797},{"type":146,"tag":391,"props":861,"children":862},{"style":800},[863],{"type":151,"value":864},"items",{"type":146,"tag":391,"props":866,"children":867},{"style":404},[868],{"type":151,"value":741},{"type":146,"tag":391,"props":870,"children":871},{"style":404},[872],{"type":151,"value":407},{"type":146,"tag":391,"props":874,"children":875},{"style":404},[876],{"type":151,"value":877}," [\n",{"type":146,"tag":391,"props":879,"children":880},{"class":393,"line":487},[881,886,890,894,898,902,906,910,915,919,923,927,931,936,940,944,948,952,958,962,966,970,975,979,984,988,992,996,1000,1004,1008,1012,1017,1021,1025],{"type":146,"tag":391,"props":882,"children":883},{"style":404},[884],{"type":151,"value":885},"      {",{"type":146,"tag":391,"props":887,"children":888},{"style":404},[889],{"type":151,"value":750},{"type":146,"tag":391,"props":891,"children":892},{"style":823},[893],{"type":151,"value":776},{"type":146,"tag":391,"props":895,"children":896},{"style":404},[897],{"type":151,"value":741},{"type":146,"tag":391,"props":899,"children":900},{"style":404},[901],{"type":151,"value":407},{"type":146,"tag":391,"props":903,"children":904},{"style":404},[905],{"type":151,"value":816},{"type":146,"tag":391,"props":907,"children":908},{"style":404},[909],{"type":151,"value":750},{"type":146,"tag":391,"props":911,"children":912},{"style":398},[913],{"type":151,"value":914},"link",{"type":146,"tag":391,"props":916,"children":917},{"style":404},[918],{"type":151,"value":741},{"type":146,"tag":391,"props":920,"children":921},{"style":404},[922],{"type":151,"value":407},{"type":146,"tag":391,"props":924,"children":925},{"style":404},[926],{"type":151,"value":816},{"type":146,"tag":391,"props":928,"children":929},{"style":404},[930],{"type":151,"value":750},{"type":146,"tag":391,"props":932,"children":934},{"style":933},"--shiki-light:#916B53;--shiki-default:#916B53;--shiki-dark:#916B53",[935],{"type":151,"value":826},{"type":146,"tag":391,"props":937,"children":938},{"style":404},[939],{"type":151,"value":741},{"type":146,"tag":391,"props":941,"children":942},{"style":404},[943],{"type":151,"value":407},{"type":146,"tag":391,"props":945,"children":946},{"style":404},[947],{"type":151,"value":816},{"type":146,"tag":391,"props":949,"children":950},{"style":404},[951],{"type":151,"value":750},{"type":146,"tag":391,"props":953,"children":955},{"style":954},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[956],{"type":151,"value":957},"href",{"type":146,"tag":391,"props":959,"children":960},{"style":404},[961],{"type":151,"value":741},{"type":146,"tag":391,"props":963,"children":964},{"style":404},[965],{"type":151,"value":407},{"type":146,"tag":391,"props":967,"children":968},{"style":404},[969],{"type":151,"value":750},{"type":146,"tag":391,"props":971,"children":972},{"style":410},[973],{"type":151,"value":974},"\u002Fabout",{"type":146,"tag":391,"props":976,"children":977},{"style":404},[978],{"type":151,"value":741},{"type":146,"tag":391,"props":980,"children":981},{"style":404},[982],{"type":151,"value":983},",",{"type":146,"tag":391,"props":985,"children":986},{"style":404},[987],{"type":151,"value":750},{"type":146,"tag":391,"props":989,"children":990},{"style":954},[991],{"type":151,"value":151},{"type":146,"tag":391,"props":993,"children":994},{"style":404},[995],{"type":151,"value":741},{"type":146,"tag":391,"props":997,"children":998},{"style":404},[999],{"type":151,"value":407},{"type":146,"tag":391,"props":1001,"children":1002},{"style":404},[1003],{"type":151,"value":750},{"type":146,"tag":391,"props":1005,"children":1006},{"style":410},[1007],{"type":151,"value":843},{"type":146,"tag":391,"props":1009,"children":1010},{"style":404},[1011],{"type":151,"value":741},{"type":146,"tag":391,"props":1013,"children":1014},{"style":404},[1015],{"type":151,"value":1016}," }",{"type":146,"tag":391,"props":1018,"children":1019},{"style":404},[1020],{"type":151,"value":1016},{"type":146,"tag":391,"props":1022,"children":1023},{"style":404},[1024],{"type":151,"value":1016},{"type":146,"tag":391,"props":1026,"children":1027},{"style":404},[1028],{"type":151,"value":1029}," }\n",{"type":146,"tag":391,"props":1031,"children":1033},{"class":393,"line":1032},7,[1034],{"type":146,"tag":391,"props":1035,"children":1036},{"style":404},[1037],{"type":151,"value":1038},"    ]\n",{"type":146,"tag":391,"props":1040,"children":1042},{"class":393,"line":1041},8,[1043],{"type":146,"tag":391,"props":1044,"children":1045},{"style":404},[1046],{"type":151,"value":1047},"  },\n",{"type":146,"tag":391,"props":1049,"children":1051},{"class":393,"line":1050},9,[1052,1056,1061,1065,1069,1073,1077,1082,1086,1090,1094,1099,1103],{"type":146,"tag":391,"props":1053,"children":1054},{"style":404},[1055],{"type":151,"value":730},{"type":146,"tag":391,"props":1057,"children":1058},{"style":733},[1059],{"type":151,"value":1060},"params",{"type":146,"tag":391,"props":1062,"children":1063},{"style":404},[1064],{"type":151,"value":741},{"type":146,"tag":391,"props":1066,"children":1067},{"style":404},[1068],{"type":151,"value":407},{"type":146,"tag":391,"props":1070,"children":1071},{"style":404},[1072],{"type":151,"value":816},{"type":146,"tag":391,"props":1074,"children":1075},{"style":404},[1076],{"type":151,"value":750},{"type":146,"tag":391,"props":1078,"children":1079},{"style":800},[1080],{"type":151,"value":1081},"variant",{"type":146,"tag":391,"props":1083,"children":1084},{"style":404},[1085],{"type":151,"value":741},{"type":146,"tag":391,"props":1087,"children":1088},{"style":404},[1089],{"type":151,"value":407},{"type":146,"tag":391,"props":1091,"children":1092},{"style":404},[1093],{"type":151,"value":750},{"type":146,"tag":391,"props":1095,"children":1096},{"style":410},[1097],{"type":151,"value":1098},"sticky",{"type":146,"tag":391,"props":1100,"children":1101},{"style":404},[1102],{"type":151,"value":741},{"type":146,"tag":391,"props":1104,"children":1105},{"style":404},[1106],{"type":151,"value":1029},{"type":146,"tag":391,"props":1108,"children":1110},{"class":393,"line":1109},10,[1111],{"type":146,"tag":391,"props":1112,"children":1113},{"style":404},[1114],{"type":151,"value":1115},"}\n",{"type":146,"tag":159,"props":1117,"children":1119},{"id":1118},"orientation-rules-the-section-nav-has-to-follow",[1120],{"type":151,"value":1121},"Orientation rules the section nav has to follow",{"type":146,"tag":147,"props":1123,"children":1124},{},[1125],{"type":151,"value":1126},"Because navigation is where these rebuilds most often fail an accessibility review, we hold the section navigation to a written set of orientation rules and keep them in the component's README so the next developer inherits the reasoning, not just the code:",{"type":146,"tag":1128,"props":1129,"children":1130},"ul",{},[1131,1145,1150,1155,1168],{"type":146,"tag":1132,"props":1133,"children":1134},"li",{},[1135,1137,1143],{"type":151,"value":1136},"Show the user where they are. Deep trees disorient people fast. Use ",{"type":146,"tag":387,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":151,"value":1142},"aria-current",{"type":151,"value":1144},", a visible active state, and an optional breadcrumb.",{"type":146,"tag":1132,"props":1146,"children":1147},{},[1148],{"type":151,"value":1149},"Scope the section nav to its section root. Resolve it from the page's ancestors so you are not dumping the whole site into a side rail.",{"type":146,"tag":1132,"props":1151,"children":1152},{},[1153],{"type":151,"value":1154},"Match navigation labels to page titles. A label that disagrees with the page it leads to erodes trust.",{"type":146,"tag":1132,"props":1156,"children":1157},{},[1158,1160,1166],{"type":151,"value":1159},"Keep keyboard order matched to visual order. No positive ",{"type":146,"tag":387,"props":1161,"children":1163},{"className":1162},[],[1164],{"type":151,"value":1165},"tabindex",{"type":151,"value":1167},", and let the DOM order carry the sequence.",{"type":146,"tag":1132,"props":1169,"children":1170},{},[1171],{"type":151,"value":1172},"Close the mobile drawer on Escape and restore focus to the trigger. Trap focus only while the drawer is open.",{"type":146,"tag":147,"props":1174,"children":1175},{},[1176],{"type":151,"value":1177},"Resolving the section root is a few lines, and getting it right is what stops the side rail from listing every page on the site:",{"type":146,"tag":379,"props":1179,"children":1183},{"className":1180,"code":1181,"language":1182,"meta":384,"style":384},"language-csharp shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","var page = Sitecore.Context.Item;\nvar sectionRoot = page.Axes.GetAncestors()\n  .FirstOrDefault(a => a.TemplateID == SectionRootTemplateId) ?? page;\nvar links = sectionRoot.Children\n  .Where(c => c.TemplateID == NavLinkTemplateId);\n","csharp",[1184],{"type":146,"tag":387,"props":1185,"children":1186},{"__ignoreMap":384},[1187,1195,1203,1211,1219],{"type":146,"tag":391,"props":1188,"children":1189},{"class":393,"line":394},[1190],{"type":146,"tag":391,"props":1191,"children":1192},{},[1193],{"type":151,"value":1194},"var page = Sitecore.Context.Item;\n",{"type":146,"tag":391,"props":1196,"children":1197},{"class":393,"line":416},[1198],{"type":146,"tag":391,"props":1199,"children":1200},{},[1201],{"type":151,"value":1202},"var sectionRoot = page.Axes.GetAncestors()\n",{"type":146,"tag":391,"props":1204,"children":1205},{"class":393,"line":434},[1206],{"type":146,"tag":391,"props":1207,"children":1208},{},[1209],{"type":151,"value":1210},"  .FirstOrDefault(a => a.TemplateID == SectionRootTemplateId) ?? page;\n",{"type":146,"tag":391,"props":1212,"children":1213},{"class":393,"line":452},[1214],{"type":146,"tag":391,"props":1215,"children":1216},{},[1217],{"type":151,"value":1218},"var links = sectionRoot.Children\n",{"type":146,"tag":391,"props":1220,"children":1221},{"class":393,"line":469},[1222],{"type":146,"tag":391,"props":1223,"children":1224},{},[1225],{"type":151,"value":1226},"  .Where(c => c.TemplateID == NavLinkTemplateId);\n",{"type":146,"tag":159,"props":1228,"children":1230},{"id":1229},"the-governance-that-stops-it-from-happening-again",[1231],{"type":151,"value":1232},"The governance that stops it from happening again",{"type":146,"tag":147,"props":1234,"children":1235},{},[1236],{"type":151,"value":1237},"The reason the customer needed a rebuild in the first place is that the original library had no guardrails, so it forked until it was unusable. We install a short governance checklist and hold the line on it:",{"type":146,"tag":1128,"props":1239,"children":1240},{},[1241,1246,1251,1256,1261],{"type":146,"tag":1132,"props":1242,"children":1243},{},[1244],{"type":151,"value":1245},"No new rendering ships without a design component ID in its README.",{"type":146,"tag":1132,"props":1247,"children":1248},{},[1249],{"type":151,"value":1250},"No hex colors in rich text. Tokens only.",{"type":146,"tag":1132,"props":1252,"children":1253},{},[1254],{"type":151,"value":1255},"Navigation changes go through IA review, not visual QA alone.",{"type":146,"tag":1132,"props":1257,"children":1258},{},[1259],{"type":151,"value":1260},"Every template or rendering change arrives as a serialization pull request.",{"type":146,"tag":1132,"props":1262,"children":1263},{},[1264],{"type":151,"value":1265},"A quarterly audit hunts for unused renderings, duplicate heroes, and orphan placeholders.",{"type":146,"tag":147,"props":1267,"children":1268},{},[1269],{"type":151,"value":1270},"None of these are heavy. Together they are the difference between a library that stays coherent for years and one that needs this same rescue again in eighteen months.",{"type":146,"tag":159,"props":1272,"children":1274},{"id":1273},"this-discipline-is-not-sitecore-specific",[1275],{"type":151,"value":1276},"This discipline is not Sitecore-specific",{"type":146,"tag":147,"props":1278,"children":1279},{},[1280],{"type":151,"value":1281},"We run the exact same process when we build our own component libraries in Nuxt from purchased or commissioned designs. The platform changes, the discipline does not: agree on vocabulary, map fields to a real contract, build navigation as an IA problem, layer the library, and govern it so it cannot fork. Sitecore has the richest tooling for enforcing these contracts at the CMS layer, which is why we lean on it hard for enterprise work, but the failure mode (a design file mistaken for a working library) is universal.",{"type":146,"tag":159,"props":1283,"children":1285},{"id":1284},"further-reading",[1286],{"type":151,"value":1287},"Further reading",{"type":146,"tag":147,"props":1289,"children":1290},{},[1291,1293,1302,1304,1310,1312,1318,1320,1326],{"type":151,"value":1292},"This process is adapted, with permission, from Mohd Naeem's deeper walkthrough, ",{"type":146,"tag":1294,"props":1295,"children":1299},"a",{"href":1296,"rel":1297},"https:\u002F\u002Fwww.mohdnaeem.com\u002Ffrom-zeplin-and-figma-to-sitecore-component-library\u002F",[1298],"nofollow",[1300],{"type":151,"value":1301},"From Zeplin and Figma to a Sitecore Component Library",{"type":151,"value":1303},", which includes the full worked SectionNav example and more of the Helix detail. The blank version of the mapping table above is available as a free ",{"type":146,"tag":1294,"props":1305,"children":1307},{"href":1306},"\u002Ftools\u002Ffigma-to-cms-mapping-table",[1308],{"type":151,"value":1309},"Figma-to-CMS component mapping template",{"type":151,"value":1311},". If accessibility is where your handoff is failing review, the companion piece on ",{"type":146,"tag":1294,"props":1313,"children":1315},{"href":1314},"\u002Fblog\u002Fenterprise-cms\u002Fwcag-2-2-vs-2-1-sitecore-teams",[1316],{"type":151,"value":1317},"WCAG 2.2 for Sitecore teams",{"type":151,"value":1319}," covers what authors break after launch and how the CMS can stop them. For the wider platform-and-partner picture, start with the ",{"type":146,"tag":1294,"props":1321,"children":1323},{"href":1322},"\u002Fblog\u002Fenterprise-cms\u002Fenterprise-cms-2026-platform-and-partner",[1324],{"type":151,"value":1325},"enterprise CMS pillar",{"type":151,"value":1327},".",{"type":146,"tag":1329,"props":1330,"children":1331},"style",{},[1332],{"type":151,"value":1333},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"]