[{"data":1,"prerenderedAt":231},["ShallowReactive",2],{"page:\u002Fdesign-system\u002Fsession-card":3},{"id":4,"title":5,"body":6,"description":223,"extension":224,"meta":225,"navigation":226,"path":227,"seo":228,"stem":229,"__hash__":230},"pages\u002Fdesign-system\u002Fsession-card.md","Parking card",{"type":7,"value":8,"toc":217},"minimark",[9,14,23,27,103,107,110,188],[10,11,13],"h2",{"id":12},"anatomy","Anatomy",[15,16,17,18,22],"p",{},"The parking card sits at the bottom of the map. It's where people start a parking action and come back to while they park. In the app it's ",[19,20,21],"code",{},"SPMapDockCard",".",[24,25],"ds-session-card",{"state":26},"active",[28,29,30,43],"table",{},[31,32,33],"thead",{},[34,35,36,40],"tr",{},[37,38,39],"th",{},"Part",[37,41,42],{},"Value",[44,45,46,63,75,92],"tbody",{},[34,47,48,52],{},[49,50,51],"td",{},"Card",[49,53,54,58,59,62],{},[55,56],"color-chip",{"c":57},"white",", ",[19,60,61],{},"radiusM"," (12px) corners, padding 24px left and right and 18px top and bottom",[34,64,65,68],{},[49,66,67],{},"Header",[49,69,70,71,74],{},"The place in ",[19,72,73],{},"titleSm",", then an optional tag and the zone code label on the right, 20px apart",[34,76,77,80],{},[49,78,79],{},"Strip",[49,81,82,58,85,87,88,91],{},[55,83],{"c":84},"grey 100",[19,86,61],{}," corners, 18 by 12px padding: the timer in ",[19,89,90],{},"titleMd"," on the left, the license plate with a pencil on the right",[34,93,94,97],{},[49,95,96],{},"Buttons",[49,98,99,100,102],{},"Flush with the bottom of the card, no corners of their own, ",[19,101,90],{},", 16px top and bottom. One button, or two side by side.",[10,104,106],{"id":105},"states","States",[108,109],"ds-states",{},[28,111,112,124],{},[31,113,114],{},[34,115,116,119,122],{},[37,117,118],{},"State",[37,120,121],{},"Timer",[37,123,96],{},[44,125,126,150,177],{},[34,127,128,131,141],{},[49,129,130],{},"Before you start",[49,132,133,137,138],{},[134,135,136],"em",{},"00:00:00"," in ",[55,139],{"c":140},"grey 700",[49,142,143,146,147],{},[19,144,145],{},"primary",": ",[134,148,149],{},"Start parking",[34,151,152,155,162],{},[49,153,154],{},"While you park",[49,156,157,158,161],{},"The elapsed time in ",[55,159],{"c":160},"secondary 1000",", ticking every second",[49,163,164,146,167,170,171,146,174],{},[19,165,166],{},"info",[134,168,169],{},"Details",", and ",[19,172,173],{},"danger",[134,175,176],{},"Stop",[34,178,179,182,185],{},[49,180,181],{},"Loading",[49,183,184],{},"Gray bars where the title and code come",[49,186,187],{},"The button disabled",[189,190,191,205,211],"ul",{},[192,193,194,198,199,204],"li",{},[195,196,197],"strong",{},"The timer on the card counts up"," from the start, in hours, minutes and seconds. It never counts down there; the end time is on the details screen. The lock screen is separate (see ",[200,201,203],"a",{"href":202},"\u002Fapplications\u002Fapp#outside-the-app","outside the app",").",[192,206,207,210],{},[195,208,209],{},"The plate has a pencil"," before you start, because you can still change the car.",[192,212,213,216],{},[195,214,215],{},"Stop is always red and always on the right",", so people find it without reading.",{"title":218,"searchDepth":219,"depth":219,"links":220},"",2,[221,222],{"id":12,"depth":219,"text":13},{"id":105,"depth":219,"text":106},"The card on the map that starts and shows a parking action.","md",{},true,"\u002Fdesign-system\u002Fsession-card",{"title":5,"description":223},"design-system\u002Fsession-card","mZW6tGmixbTL9wGYptfLLzNRgb6hbcCCkneK11Lf-o4",1792779480805]