[{"data":1,"prerenderedAt":172},["ShallowReactive",2],{"page:\u002Fdesign-system\u002Fzone-badge":3},{"id":4,"title":5,"body":6,"description":164,"extension":165,"meta":166,"navigation":167,"path":168,"seo":169,"stem":170,"__hash__":171},"pages\u002Fdesign-system\u002Fzone-badge.md","Zone sign",{"type":7,"value":8,"toc":158},"minimark",[9,14,27,31,116,120],[10,11,13],"h2",{"id":12},"anatomy","Anatomy",[15,16,17,18,22,23,26],"p",{},"The zone sign looks like the blue parking signs on Dutch streets, with the zone code people also see on the sign and the parking meter. In the app it's ",[19,20,21],"code",{},"ParkingZoneBadge","; the inline version is ",[19,24,25],{},"SPParkingCodeLabel",".",[28,29],"ds-specimens",{"show":30},"zones",[32,33,34,47],"table",{},[35,36,37],"thead",{},[38,39,40,44],"tr",{},[41,42,43],"th",{},"Part",[41,45,46],{},"Value",[48,49,50,68,86,94],"tbody",{},[38,51,52,56],{},[53,54,55],"td",{},"Sign",[53,57,58,59,63,64,67],{},"60 by 60px, ",[60,61],"color-chip",{"c":62},"primary 500",", ",[19,65,66],{},"radiusS"," (8px) corners",[38,69,70,73],{},[53,71,72],{},"Code",[53,74,75,76,78,79,82,83,85],{},"In a white band across the top 27px, with a 2px ",[60,77],{"c":62}," border; ",[19,80,81],{},"labelMd"," in bold, ",[60,84],{"c":62},", at most 6 characters",[38,87,88,91],{},[53,89,90],{},"P",[53,92,93],{},"24px in white, centered under the band",[38,95,96,99],{},[53,97,98],{},"Code label",[53,100,101,102,104,105,108,109,112,113,115],{},"A 16px ",[60,103],{"c":62}," tile with a white P and ",[19,106,107],{},"radiusXS"," corners, then the code in ",[19,110,111],{},"labelLg"," and ",[60,114],{"c":62},", 4px apart",[10,117,119],{"id":118},"usage","Usage",[121,122,123,140,146,152],"ul",{},[124,125,126,130,131,135,136,139],"li",{},[127,128,129],"strong",{},"The code is the code on the street sign",", without a city prefix: ",[132,133,134],"em",{},"12100",", not ",[132,137,138],{},"AMS 12100",". The place goes in the title next to it.",[124,141,142,145],{},[127,143,144],{},"The sign for the zone you're in or looking at","; the code label inline, next to a title in a card or list.",[124,147,148,151],{},[127,149,150],{},"Always blue."," The sign is never orange, navy or outlined, also not in marketing.",[124,153,154,157],{},[127,155,156],{},"One sign per view."," Two zones next to each other are two rows with a code label each.",{"title":159,"searchDepth":160,"depth":160,"links":161},"",2,[162,163],{"id":12,"depth":160,"text":13},{"id":118,"depth":160,"text":119},"The P sign with the zone code.","md",{},true,"\u002Fdesign-system\u002Fzone-badge",{"title":5,"description":164},"design-system\u002Fzone-badge","JUeoihQC1IadQ1qrXU3w1P3vfviOxPbQXoHtX69Lrg0",1792779480805]