[{"data":1,"prerenderedAt":523},["Reactive",2],{"content-query-jiTRvQS3qo":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":518,"_id":519,"_source":520,"_file":521,"_extension":522},"/docs/utilities/css/display","css",false,"","CSS Utility Classes - Display - Inkline","Change the display style of components responsively with display utilities.",{"type":11,"children":12,"toc":512},"root",[13,20,27,34,40,54,66,165,326,461,467,472,507],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Display",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"change-the-display-style-of-components-responsively-with-display-utilities",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":31},"h3",{"id":30},"how-it-works",[32],{"type":26,"value":33},"How it works",{"type":14,"tag":35,"props":36,"children":37},"p",{},[38],{"type":26,"value":39},"The classes are named using the following format:",{"type":14,"tag":41,"props":42,"children":43},"ul",{},[44],{"type":14,"tag":45,"props":46,"children":47},"li",{},[48],{"type":14,"tag":49,"props":50,"children":51},"code-inline",{},[52],{"type":26,"value":53},"._display:{value}",{"type":14,"tag":35,"props":55,"children":56},{},[57,59,64],{"type":26,"value":58},"Where ",{"type":14,"tag":49,"props":60,"children":61},{},[62],{"type":26,"value":63},"value",{"type":26,"value":65}," can be one of:",{"type":14,"tag":41,"props":67,"children":68},{},[69,77,85,93,101,109,117,125,133,141,149,157],{"type":14,"tag":45,"props":70,"children":71},{},[72],{"type":14,"tag":49,"props":73,"children":74},{},[75],{"type":26,"value":76},"block",{"type":14,"tag":45,"props":78,"children":79},{},[80],{"type":14,"tag":49,"props":81,"children":82},{},[83],{"type":26,"value":84},"contents",{"type":14,"tag":45,"props":86,"children":87},{},[88],{"type":14,"tag":49,"props":89,"children":90},{},[91],{"type":26,"value":92},"flex",{"type":14,"tag":45,"props":94,"children":95},{},[96],{"type":14,"tag":49,"props":97,"children":98},{},[99],{"type":26,"value":100},"flow-root",{"type":14,"tag":45,"props":102,"children":103},{},[104],{"type":14,"tag":49,"props":105,"children":106},{},[107],{"type":26,"value":108},"grid",{"type":14,"tag":45,"props":110,"children":111},{},[112],{"type":14,"tag":49,"props":113,"children":114},{},[115],{"type":26,"value":116},"inline",{"type":14,"tag":45,"props":118,"children":119},{},[120],{"type":14,"tag":49,"props":121,"children":122},{},[123],{"type":26,"value":124},"inline-block",{"type":14,"tag":45,"props":126,"children":127},{},[128],{"type":14,"tag":49,"props":129,"children":130},{},[131],{"type":26,"value":132},"inline-flex",{"type":14,"tag":45,"props":134,"children":135},{},[136],{"type":14,"tag":49,"props":137,"children":138},{},[139],{"type":26,"value":140},"none",{"type":14,"tag":45,"props":142,"children":143},{},[144],{"type":14,"tag":49,"props":145,"children":146},{},[147],{"type":26,"value":148},"table",{"type":14,"tag":45,"props":150,"children":151},{},[152],{"type":14,"tag":49,"props":153,"children":154},{},[155],{"type":26,"value":156},"table-cell",{"type":14,"tag":45,"props":158,"children":159},{},[160],{"type":14,"tag":49,"props":161,"children":162},{},[163],{"type":26,"value":164},"table-row",{"type":14,"tag":166,"props":167,"children":168},"content-tabs",{},[169,178],{"type":14,"tag":170,"props":171,"children":172},"template",{"v-slot:preview":7},[173],{"type":14,"tag":174,"props":175,"children":177},"content-preview",{"src":176},"/stories/utilities/display/inline",[],{"type":14,"tag":170,"props":179,"children":180},{"v-slot:vue":7},[181],{"type":14,"tag":182,"props":183,"children":188},"code",{"className":184,"code":186,"language":187,"meta":7},[185],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_display:inline! _background:primary!\">Inline\u003C/div>\n    \u003Cdiv class=\"_display:inline! _background:dark!\">Inline\u003C/div>\n\u003C/template>\n\n","vue",[189],{"type":14,"tag":190,"props":191,"children":192},"pre",{},[193],{"type":14,"tag":182,"props":194,"children":195},{"__ignoreMap":7},[196,218,267,308],{"type":14,"tag":197,"props":198,"children":201},"span",{"class":199,"line":200},"line",1,[202,208,213],{"type":14,"tag":197,"props":203,"children":205},{"class":204},"ct-553616",[206],{"type":26,"value":207},"\u003C",{"type":14,"tag":197,"props":209,"children":211},{"class":210},"ct-914029",[212],{"type":26,"value":170},{"type":14,"tag":197,"props":214,"children":215},{"class":204},[216],{"type":26,"value":217},">\n",{"type":14,"tag":197,"props":219,"children":221},{"class":199,"line":220},2,[222,227,232,237,243,248,254,259,263],{"type":14,"tag":197,"props":223,"children":224},{"class":204},[225],{"type":26,"value":226},"    \u003C",{"type":14,"tag":197,"props":228,"children":229},{"class":210},[230],{"type":26,"value":231},"div",{"type":14,"tag":197,"props":233,"children":234},{"class":204},[235],{"type":26,"value":236}," ",{"type":14,"tag":197,"props":238,"children":240},{"class":239},"ct-762058",[241],{"type":26,"value":242},"class",{"type":14,"tag":197,"props":244,"children":245},{"class":204},[246],{"type":26,"value":247},"=",{"type":14,"tag":197,"props":249,"children":251},{"class":250},"ct-952708",[252],{"type":26,"value":253},"\"_display:inline! _background:primary!\"",{"type":14,"tag":197,"props":255,"children":256},{"class":204},[257],{"type":26,"value":258},">Inline\u003C/",{"type":14,"tag":197,"props":260,"children":261},{"class":210},[262],{"type":26,"value":231},{"type":14,"tag":197,"props":264,"children":265},{"class":204},[266],{"type":26,"value":217},{"type":14,"tag":197,"props":268,"children":270},{"class":199,"line":269},3,[271,275,279,283,287,291,296,300,304],{"type":14,"tag":197,"props":272,"children":273},{"class":204},[274],{"type":26,"value":226},{"type":14,"tag":197,"props":276,"children":277},{"class":210},[278],{"type":26,"value":231},{"type":14,"tag":197,"props":280,"children":281},{"class":204},[282],{"type":26,"value":236},{"type":14,"tag":197,"props":284,"children":285},{"class":239},[286],{"type":26,"value":242},{"type":14,"tag":197,"props":288,"children":289},{"class":204},[290],{"type":26,"value":247},{"type":14,"tag":197,"props":292,"children":293},{"class":250},[294],{"type":26,"value":295},"\"_display:inline! _background:dark!\"",{"type":14,"tag":197,"props":297,"children":298},{"class":204},[299],{"type":26,"value":258},{"type":14,"tag":197,"props":301,"children":302},{"class":210},[303],{"type":26,"value":231},{"type":14,"tag":197,"props":305,"children":306},{"class":204},[307],{"type":26,"value":217},{"type":14,"tag":197,"props":309,"children":311},{"class":199,"line":310},4,[312,317,321],{"type":14,"tag":197,"props":313,"children":314},{"class":204},[315],{"type":26,"value":316},"\u003C/",{"type":14,"tag":197,"props":318,"children":319},{"class":210},[320],{"type":26,"value":170},{"type":14,"tag":197,"props":322,"children":323},{"class":204},[324],{"type":26,"value":325},">",{"type":14,"tag":166,"props":327,"children":328},{},[329,336],{"type":14,"tag":170,"props":330,"children":331},{"v-slot:preview":7},[332],{"type":14,"tag":174,"props":333,"children":335},{"src":334},"/stories/utilities/display/block",[],{"type":14,"tag":170,"props":337,"children":338},{"v-slot:vue":7},[339],{"type":14,"tag":182,"props":340,"children":343},{"className":341,"code":342,"language":187,"meta":7},[185],"\u003Ctemplate>\n    \u003Cdiv class=\"_display:block! _background:primary!\">Block\u003C/div>\n    \u003Cdiv class=\"_display:block! _background:dark!\">Block\u003C/div>\n\u003C/template>\n\n",[344],{"type":14,"tag":190,"props":345,"children":346},{},[347],{"type":14,"tag":182,"props":348,"children":349},{"__ignoreMap":7},[350,365,406,446],{"type":14,"tag":197,"props":351,"children":352},{"class":199,"line":200},[353,357,361],{"type":14,"tag":197,"props":354,"children":355},{"class":204},[356],{"type":26,"value":207},{"type":14,"tag":197,"props":358,"children":359},{"class":210},[360],{"type":26,"value":170},{"type":14,"tag":197,"props":362,"children":363},{"class":204},[364],{"type":26,"value":217},{"type":14,"tag":197,"props":366,"children":367},{"class":199,"line":220},[368,372,376,380,384,388,393,398,402],{"type":14,"tag":197,"props":369,"children":370},{"class":204},[371],{"type":26,"value":226},{"type":14,"tag":197,"props":373,"children":374},{"class":210},[375],{"type":26,"value":231},{"type":14,"tag":197,"props":377,"children":378},{"class":204},[379],{"type":26,"value":236},{"type":14,"tag":197,"props":381,"children":382},{"class":239},[383],{"type":26,"value":242},{"type":14,"tag":197,"props":385,"children":386},{"class":204},[387],{"type":26,"value":247},{"type":14,"tag":197,"props":389,"children":390},{"class":250},[391],{"type":26,"value":392},"\"_display:block! _background:primary!\"",{"type":14,"tag":197,"props":394,"children":395},{"class":204},[396],{"type":26,"value":397},">Block\u003C/",{"type":14,"tag":197,"props":399,"children":400},{"class":210},[401],{"type":26,"value":231},{"type":14,"tag":197,"props":403,"children":404},{"class":204},[405],{"type":26,"value":217},{"type":14,"tag":197,"props":407,"children":408},{"class":199,"line":269},[409,413,417,421,425,429,434,438,442],{"type":14,"tag":197,"props":410,"children":411},{"class":204},[412],{"type":26,"value":226},{"type":14,"tag":197,"props":414,"children":415},{"class":210},[416],{"type":26,"value":231},{"type":14,"tag":197,"props":418,"children":419},{"class":204},[420],{"type":26,"value":236},{"type":14,"tag":197,"props":422,"children":423},{"class":239},[424],{"type":26,"value":242},{"type":14,"tag":197,"props":426,"children":427},{"class":204},[428],{"type":26,"value":247},{"type":14,"tag":197,"props":430,"children":431},{"class":250},[432],{"type":26,"value":433},"\"_display:block! _background:dark!\"",{"type":14,"tag":197,"props":435,"children":436},{"class":204},[437],{"type":26,"value":397},{"type":14,"tag":197,"props":439,"children":440},{"class":210},[441],{"type":26,"value":231},{"type":14,"tag":197,"props":443,"children":444},{"class":204},[445],{"type":26,"value":217},{"type":14,"tag":197,"props":447,"children":448},{"class":199,"line":310},[449,453,457],{"type":14,"tag":197,"props":450,"children":451},{"class":204},[452],{"type":26,"value":316},{"type":14,"tag":197,"props":454,"children":455},{"class":210},[456],{"type":26,"value":170},{"type":14,"tag":197,"props":458,"children":459},{"class":204},[460],{"type":26,"value":325},{"type":14,"tag":28,"props":462,"children":464},{"id":463},"print",[465],{"type":26,"value":466},"Print",{"type":14,"tag":35,"props":468,"children":469},{},[470],{"type":26,"value":471},"Change the display value of elements when printing with the print display utility classes.",{"type":14,"tag":41,"props":473,"children":474},{},[475,483,491,499],{"type":14,"tag":45,"props":476,"children":477},{},[478],{"type":14,"tag":49,"props":479,"children":480},{},[481],{"type":26,"value":482},"._print:display:none",{"type":14,"tag":45,"props":484,"children":485},{},[486],{"type":14,"tag":49,"props":487,"children":488},{},[489],{"type":26,"value":490},"._print:display:inline",{"type":14,"tag":45,"props":492,"children":493},{},[494],{"type":14,"tag":49,"props":495,"children":496},{},[497],{"type":26,"value":498},"._print:display:inline-block",{"type":14,"tag":45,"props":500,"children":501},{},[502],{"type":14,"tag":49,"props":503,"children":504},{},[505],{"type":26,"value":506},"._print:display:block",{"type":14,"tag":508,"children":509},"style",[510],{"type":26,"value":511},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}",{"title":7,"searchDepth":220,"depth":220,"links":513},[514],{"id":23,"depth":220,"text":9,"children":515},[516,517],{"id":30,"depth":269,"text":33},{"id":463,"depth":269,"text":466},"markdown","content:docs:utilities:css:display.md","content","docs/utilities/css/display.md","md",1794582261418]