[{"data":1,"prerenderedAt":310},["ShallowReactive",2],{"$fuYF_OgtBOfLQbu5Gvzqo6cF2MMjlHRJAw-7isN_XMBs":3},{"newThing":4,"project":5,"cycle":8,"sections":20,"threads":302,"otherDocs":303,"images":304,"archiveItems":308,"links":309},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":4,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":15,"hasPickup":16,"hasInitialPrompt":16},"c5",5,"c5.patterns-page","patterns-page","Patterns Page","archived","2026-09-11",false,"\u002Fcycles\u002Fdesign\u002Fc5-patterns.png",1,0,[21,61,80,240,292],{"key":22,"title":23,"empty":16,"ast":24},"why","Why",{"type":25,"children":26},"root",[27],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32,35,44,46,52,54,59],{"type":33,"value":34},"text","c4 extracted 6 content\u002Flayout components from ",{"type":28,"tag":36,"props":37,"children":41},"a",{"href":38,"rel":39},"http:\u002F\u002Fwww.qpoint.io",[40],"nofollow",[42],{"type":33,"value":43},"www.qpoint.io",{"type":33,"value":45}," into the layer and documented them individually. But individual component demos don't show how these components ",{"type":28,"tag":47,"props":48,"children":49},"strong",{},[50],{"type":33,"value":51},"compose together",{"type":33,"value":53}," — the real value. ",{"type":28,"tag":36,"props":55,"children":57},{"href":38,"rel":56},[40],[58],{"type":33,"value":43},{"type":33,"value":60}," uses 3 dominant compositional patterns 20+ times across its pages. This cycle makes those patterns visible and copyable in the design site.",{"key":62,"title":63,"empty":16,"ast":64},"objective","Objective",{"type":25,"children":65},[66],{"type":28,"tag":29,"props":67,"children":68},{},[69,71,78],{"type":33,"value":70},"Add a ",{"type":28,"tag":72,"props":73,"children":75},"code",{"className":74},[],[76],{"type":33,"value":77},"\u002Fpatterns",{"type":33,"value":79}," page to the design site that showcases 3 live-rendered compositional patterns with copyable MDC code.",{"key":81,"title":82,"empty":16,"ast":83},"scope","Scope",{"type":25,"children":84},[85,120,127],{"type":28,"tag":86,"props":87,"children":88},"ul",{},[89,102,115],{"type":28,"tag":90,"props":91,"children":92},"li",{},[93,95,100],{"type":33,"value":94},"Single ",{"type":28,"tag":72,"props":96,"children":98},{"className":97},[],[99],{"type":33,"value":77},{"type":33,"value":101}," page with 3 pattern showcases",{"type":28,"tag":90,"props":103,"children":104},{},[105,107,113],{"type":33,"value":106},"Local ",{"type":28,"tag":72,"props":108,"children":110},{"className":109},[],[111],{"type":33,"value":112},"PatternCard",{"type":33,"value":114}," component for consistent layout",{"type":28,"tag":90,"props":116,"children":117},{},[118],{"type":33,"value":119},"Nav + homepage updates",{"type":28,"tag":121,"props":122,"children":124},"h3",{"id":123},"patterns",[125],{"type":33,"value":126},"Patterns",{"type":28,"tag":128,"props":129,"children":130},"table",{},[131,150],{"type":28,"tag":132,"props":133,"children":134},"thead",{},[135],{"type":28,"tag":136,"props":137,"children":138},"tr",{},[139,145],{"type":28,"tag":140,"props":141,"children":142},"th",{},[143],{"type":33,"value":144},"Pattern",{"type":28,"tag":140,"props":146,"children":147},{},[148],{"type":33,"value":149},"Components",{"type":28,"tag":151,"props":152,"children":153},"tbody",{},[154,187,211],{"type":28,"tag":136,"props":155,"children":156},{},[157,163],{"type":28,"tag":158,"props":159,"children":160},"td",{},[161],{"type":33,"value":162},"Feature Grid",{"type":28,"tag":158,"props":164,"children":165},{},[166,172,174,180,181],{"type":28,"tag":72,"props":167,"children":169},{"className":168},[],[170],{"type":33,"value":171},"ContentSectionHeadline",{"type":33,"value":173}," + ",{"type":28,"tag":72,"props":175,"children":177},{"className":176},[],[178],{"type":33,"value":179},"LayoutGrid",{"type":33,"value":173},{"type":28,"tag":72,"props":182,"children":184},{"className":183},[],[185],{"type":33,"value":186},"ContentBigPoint",{"type":28,"tag":136,"props":188,"children":189},{},[190,195],{"type":28,"tag":158,"props":191,"children":192},{},[193],{"type":33,"value":194},"Process Steps",{"type":28,"tag":158,"props":196,"children":197},{},[198,204,205],{"type":28,"tag":72,"props":199,"children":201},{"className":200},[],[202],{"type":33,"value":203},"ContentStepWrapper",{"type":33,"value":173},{"type":28,"tag":72,"props":206,"children":208},{"className":207},[],[209],{"type":33,"value":210},"ContentStep",{"type":28,"tag":136,"props":212,"children":213},{},[214,219],{"type":28,"tag":158,"props":215,"children":216},{},[217],{"type":33,"value":218},"Section Template",{"type":28,"tag":158,"props":220,"children":221},{},[222,227,228,233,234],{"type":28,"tag":72,"props":223,"children":225},{"className":224},[],[226],{"type":33,"value":171},{"type":33,"value":173},{"type":28,"tag":72,"props":229,"children":231},{"className":230},[],[232],{"type":33,"value":179},{"type":33,"value":173},{"type":28,"tag":72,"props":235,"children":237},{"className":236},[],[238],{"type":33,"value":239},"ContentCheck",{"key":241,"title":242,"empty":16,"ast":243},"key-changes","Key Changes",{"type":25,"children":244},[245],{"type":28,"tag":86,"props":246,"children":247},{},[248,259,270,281],{"type":28,"tag":90,"props":249,"children":250},{},[251,257],{"type":28,"tag":72,"props":252,"children":254},{"className":253},[],[255],{"type":33,"value":256},"app\u002Fcomponents\u002FPatternCard.vue",{"type":33,"value":258}," — showcase wrapper with slots + code prop + copy button",{"type":28,"tag":90,"props":260,"children":261},{},[262,268],{"type":28,"tag":72,"props":263,"children":265},{"className":264},[],[266],{"type":33,"value":267},"app\u002Fpages\u002Fpatterns.vue",{"type":33,"value":269}," — the page with 3 live examples",{"type":28,"tag":90,"props":271,"children":272},{},[273,279],{"type":28,"tag":72,"props":274,"children":276},{"className":275},[],[277],{"type":33,"value":278},"app\u002Fcomponents\u002FAppNav.vue",{"type":33,"value":280}," — added Patterns link",{"type":28,"tag":90,"props":282,"children":283},{},[284,290],{"type":28,"tag":72,"props":285,"children":287},{"className":286},[],[288],{"type":33,"value":289},"app\u002Fpages\u002Findex.vue",{"type":33,"value":291}," — added Patterns card",{"key":293,"title":294,"empty":16,"ast":295},"outcome","Outcome",{"type":25,"children":296},[297],{"type":28,"tag":29,"props":298,"children":299},{},[300],{"type":33,"value":301},"Patterns are visible and copyable. Anyone building a new Qpoint page can grab the MDC skeleton and adapt the content.",[],[],[305],{"src":17,"kind":306,"order":307},"hero",4999,[],[],1789151091785]