[{"data":1,"prerenderedAt":2543},["ShallowReactive",2],{"content-\u002Fdocs\u002Fdeveloper\u002Fcss-framework":3,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":1394,"$f8f5lnJ37FCtouC_Q-20Y_lk47T8QT59vG2H3NVA0ikU":1751,"$fH8KF6TaNm7Prkw5PjE_U_K0_jhwqU4rL9IgcxTR8qEY":1866,"$fyiJZYLjBFt2lk2xFvTMVeoO9lrrw5oJhIWqZApobzKw":2360,"$f9iagjYMRp_cp7yEdRxNGbRRM-_6jJbtnT1B2jaQT72o":2363,"$fO64oLMm_B0SaJi2EEWkFOZnsN5slbBr3rNOFoAPYcHE":2365,"$fR8Iqe1c2C4Ou29UH21iDVCohUPB4Je8iNI7EeSVBfF4":2367,"$f2lJC7RRnEo5PHKnCWj57hQOWjnuFBPub_8MKclzsBp0":2369,"$folczYOKVr0hnTT0TSP00TpYgUAMgtMy37OLxR44eCso":2371,"$fmu83Aqiq2R90CyuZSHRz_DQx1GXqSXUDfXbp3TAGAIY":2373,"$fIb--d7zZDRBVi1M4wy1UvePi6jqyLd8lqmN19gP6f94":2375,"$fhBsjLsIcnHdQXVWBq_GVc7BTnt24wWYnuWV5j7R0oLs":2377,"$fSW2ZOHVToLRR_sd_zvpiRLUcCw1FeeN2X13eUiWKQiQ":2379,"$fdMfO-Tq13Ics7rq7xS2MAvgKWkWMy6y5WobCmnGq10o":2381,"$fq43I_hopKycLrjeYXGrTM5Cn3yJS8okw0TJVoINCWQo":2383,"$f84n2c9H0MmXNLjPIU-48AZp7ieKQPr6Q3OJIiD313V0":2385,"$f6k9NiPYYNqVxb14jk8URsMRtjvNPlt-1AQyxSj8jdCs":2387,"$fjDmOmUzdE1XqFlhYAPnlRScDEufxLutvkIZ9WhJC8Iw":2389,"$fMFYqXDVnXBM7H5e8Q6SPZTIcyGezMlakrxpKYPd8e1o":2391,"$fthm2JZuTKld9jzKyW7dJIDv76rIOtdLqhZ8xmH-54fw":2393,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":2395,"$fG5mfZUBMRUXAQak2ZsydV5_2IwWeiy4Z5oCvZqsVc-Q":2411,"sidebar-component-doc-meta":2413},{"id":4,"title":5,"badge":6,"body":9,"description":83,"excludeFromSearch":1384,"extension":1385,"external":1384,"icon":1386,"keywords":1386,"menuSection":1386,"meta":1387,"native":1384,"navTitle":1386,"navigation":1388,"order":1386,"path":1389,"railLabel":1386,"seo":1390,"sidebar":1384,"sitemap":1391,"stem":1392,"tabs":1386,"__hash__":1393},"docs\u002Fdocs\u002F01.developer\u002F06.css-framework\u002Findex.md","CSS Framework",{"text":7,"variant":8},"Legacy","warning",{"type":10,"value":11,"toc":1350},"minimark",[12,19,31,36,46,66,71,77,102,106,110,125,129,145,182,186,194,222,225,229,237,263,275,279,286,311,314,332,334,338,341,344,390,409,411,415,418,423,432,434,438,465,468,474,476,482,485,491,493,497,508,511,517,519,523,533,536,542,544,548,551,554,560,562,566,572,584,587,593,595,599,602,605,611,613,617,623,626,632,634,638,645,648,703,706,712,714,718,726,729,735,737,741,749,752,758,760,764,781,784,790,792,796,817,825,846,853,903,909,951,954,960,962,966,982,1012,1015,1026,1032,1034,1038,1075,1080,1085,1087,1091,1105,1111,1116,1154,1160,1164,1177,1179,1185,1189,1191,1197,1199,1203,1212,1215,1221,1223,1227,1233,1239,1281,1289,1321,1328,1333,1335,1339,1346],[13,14,15],"nord-intro",{},[16,17,18],"p",{},"Nord Design System's original CSS Framework with shorthand utility classes.",[20,21,22],"nord-banner",{"variant":8},[16,23,24,25,30],{},"This is our original CSS framework. For new projects, we recommend using ",[26,27,29],"a",{"href":28},"\u002Fcore\u002Fcss\u002Ftailwind\u002F","Tailwind CSS"," instead.",[32,33,35],"h2",{"id":34},"installation","Installation",[16,37,38,39,45],{},"Before moving further, please make sure you have ",[26,40,44],{"href":41,"rel":42},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[43],"nofollow","Node.js"," installed on your machine. You can install the latest version through their website.",[16,47,48,49,54,55,60,61,65],{},"If you're planning on using Nord CSS Framework in a project that doesn't yet use ",[26,50,53],{"href":51,"rel":52},"https:\u002F\u002Fwww.npmjs.com",[43],"Node Package Manager",", you'll have to first create a ",[26,56,59],{"href":57,"rel":58},"https:\u002F\u002Fdocs.npmjs.com\u002Ffiles\u002Fpackage.json",[43],"package.json"," file. To do this, run ",[62,63,64],"code",{},"npm init"," and follow the steps provided. Once finished, you can install the CSS Framework by following these instructions.",[67,68,70],"h3",{"id":69},"install-using-npm","Install using NPM",[16,72,73,74,76],{},"Run in your project or website root directory (where ",[62,75,59],{}," lives):",[78,79,84],"pre",{"className":80,"code":81,"language":82,"meta":83,"style":83},"language-bash shiki shiki-themes github-light github-dark","npm install @nordhealth\u002Fcss\n","bash","",[62,85,86],{"__ignoreMap":83},[87,88,91,95,99],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"sScJk","npm",[87,96,98],{"class":97},"sZZnC"," install",[87,100,101],{"class":97}," @nordhealth\u002Fcss\n",[67,103,105],{"id":104},"install-using-yarn","Install using Yarn",[16,107,73,108,76],{},[62,109,59],{},[78,111,113],{"className":80,"code":112,"language":82,"meta":83,"style":83},"yarn add @nordhealth\u002Fcss\n",[62,114,115],{"__ignoreMap":83},[87,116,117,120,123],{"class":89,"line":90},[87,118,119],{"class":93},"yarn",[87,121,122],{"class":97}," add",[87,124,101],{"class":97},[67,126,128],{"id":127},"cdn-usage","CDN usage",[16,130,131,132,136,137,140,141,144],{},"The CSS Framework can be directly used via ",[26,133,135],{"href":134},"\u002Fdocs\u002Fdeveloper\u002Fcdn\u002F","Nord CDN",", which allows your team to get up and running with minimal additions. The latest version of this framework can be added into your application by adding the below stylesheet ",[62,138,139],{},"\u003Clink>"," tag into the ",[62,142,143],{},"\u003Chead>"," section of your app:",[78,146,150],{"className":147,"code":148,"language":149,"meta":83,"style":83},"language-html shiki shiki-themes github-light github-dark","\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F3.3.0\u002Fnord.min.css\" \u002F>\n","html",[62,151,152],{"__ignoreMap":83},[87,153,154,158,162,165,168,171,174,176,179],{"class":89,"line":90},[87,155,157],{"class":156},"sVt8B","\u003C",[87,159,161],{"class":160},"s9eBZ","link",[87,163,164],{"class":93}," rel",[87,166,167],{"class":156},"=",[87,169,170],{"class":97},"\"stylesheet\"",[87,172,173],{"class":93}," href",[87,175,167],{"class":156},[87,177,178],{"class":97},"\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F3.3.0\u002Fnord.min.css\"",[87,180,181],{"class":156}," \u002F>\n",[67,183,185],{"id":184},"browser-support","Browser support",[16,187,188,189,193],{},"Nord's CSS Framework is tested in the latest two versions of the following browsers. Our team addresses critical ",[26,190,192],{"href":191},"\u002Fresources\u002Fsupport\u002F","bug fixes"," in earlier versions based on their severity and impact. If you need to support IE11 or pre-Chromium Edge, this library isn't for you.",[195,196,198,199,198,206,198,210,198,214,198,218],"nord-stack",{"direction":197},"horizontal","\n  ",[200,201],"img",{"src":202,"width":203,"height":203,"style":204,"alt":205},"\u002Fimg\u002Fbrowsers\u002Fchrome.png",64,"margin:0;width:64px;","Chrome",[200,207],{"src":208,"width":203,"height":203,"style":204,"alt":209},"\u002Fimg\u002Fbrowsers\u002Fsafari.png","Safari",[200,211],{"src":212,"width":203,"height":203,"style":204,"alt":213},"\u002Fimg\u002Fbrowsers\u002Fedge.png","Edge",[200,215],{"src":216,"width":203,"height":203,"style":204,"alt":217},"\u002Fimg\u002Fbrowsers\u002Ffirefox.png","Firefox",[200,219],{"src":220,"width":203,"height":203,"style":204,"alt":221},"\u002Fimg\u002Fbrowsers\u002Fopera.png","Opera",[223,224],"hr",{},[32,226,228],{"id":227},"usage","Usage",[16,230,231,232,140,234,236],{},"Once you've installed the CSS Framework package into your application, you can copy and paste the below stylesheet ",[62,233,139],{},[62,235,143],{}," section of your app after all other stylesheets. This will load the Nord CSS Framework for you:",[78,238,240],{"className":147,"code":239,"language":149,"meta":83,"style":83},"\u003Clink rel=\"stylesheet\" href=\"[path-to-dir]\u002Fnord.min.css\" \u002F>\n",[62,241,242],{"__ignoreMap":83},[87,243,244,246,248,250,252,254,256,258,261],{"class":89,"line":90},[87,245,157],{"class":156},[87,247,161],{"class":160},[87,249,164],{"class":93},[87,251,167],{"class":156},[87,253,170],{"class":97},[87,255,173],{"class":93},[87,257,167],{"class":156},[87,259,260],{"class":97},"\"[path-to-dir]\u002Fnord.min.css\"",[87,262,181],{"class":156},[16,264,265,266,270,271,274],{},"The above example can be used alongside a copy tasks similar to the one described in our ",[26,267,269],{"href":268},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts\u002F#usage","Webfonts guidelines",". While technically possible, we don't recommend to load this file directly from ",[62,272,273],{},"node_modules",".",[67,276,278],{"id":277},"import-in-sass","Import in Sass",[16,280,281,282,285],{},"To import the CSS Framework into your Sass (",[62,283,284],{},"scss","), include this in the beginning of your main partial:",[78,287,290],{"className":288,"code":289,"language":284,"meta":83,"style":83},"language-scss shiki shiki-themes github-light github-dark","\u002F\u002F Import CSS framework\n@import \"..\u002F..\u002Fnode_modules\u002F@nordhealth\u002Fcss\u002Flib\u002Fnord\";\n",[62,291,292,298],{"__ignoreMap":83},[87,293,294],{"class":89,"line":90},[87,295,297],{"class":296},"sJ8bj","\u002F\u002F Import CSS framework\n",[87,299,301,305,308],{"class":89,"line":300},2,[87,302,304],{"class":303},"szBVR","@import",[87,306,307],{"class":97}," \"..\u002F..\u002Fnode_modules\u002F@nordhealth\u002Fcss\u002Flib\u002Fnord\"",[87,309,310],{"class":156},";\n",[16,312,313],{},"You may need to edit the path shown above depending on your setup. If you're using Webpack you can use the following:",[78,315,317],{"className":288,"code":316,"language":284,"meta":83,"style":83},"\u002F\u002F Import CSS framework\n@import \"~@nordhealth\u002Fcss\u002Flib\u002Fnord\";\n",[62,318,319,323],{"__ignoreMap":83},[87,320,321],{"class":89,"line":90},[87,322,297],{"class":296},[87,324,325,327,330],{"class":89,"line":300},[87,326,304],{"class":303},[87,328,329],{"class":97}," \"~@nordhealth\u002Fcss\u002Flib\u002Fnord\"",[87,331,310],{"class":156},[223,333],{},[32,335,337],{"id":336},"utilities","Utilities",[16,339,340],{},"This and the below sections explain each provided utility class in detail. We've tried to strike a balance between readable but brief. We want your code to be readable but not so verbose that spelling errors get in the way.",[16,342,343],{},"Utilities begin with full word naming and begin to scope into more specific. For example borders:",[345,346,347,354,364,380],"ul",{},[348,349,350,353],"li",{},[62,351,352],{},".n-border",": Application of a 1 pixel solid border from our Design Tokens",[348,355,356,359,360],{},[62,357,358],{},".n-border-strong",": The same border style but the strong color from our ",[26,361,363],{"href":362},"\u002Fcore\u002Ftokens\u002F","Design Tokens",[348,365,366,369,370,373,374,379],{},[62,367,368],{},".n-border-strong-i",": The same border style again but applying it to the ",[62,371,372],{},"inline"," sides of the element (left and right sides converted to ",[26,375,378],{"href":376,"rel":377},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Logical_Properties",[43],"logical properties",")",[348,381,382,385,386,389],{},[62,383,384],{},".n-border-strong-ie",": The same again but applying it to the ",[62,387,388],{},"inline-end"," side of the element (the right side)",[16,391,392,393,395,396,400,401,404,405,408],{},"The pattern of shorthand lettering for modifiers has been used throughout to signify a specific side(s) of an element or for a specific size from our ",[26,394,363],{"href":362},", using ",[26,397,399],{"href":398},"\u002Fdesign\u002Ffoundations\u002Fnaming\u002F#sizes","our t-shirt sizing"," convention (",[62,402,403],{},"-xxl",", ",[62,406,407],{},"-xl",", etc).",[223,410],{},[32,412,414],{"id":413},"reset-utility","Reset utility",[16,416,417],{},"The reset utility shown below is designed to be used on the highest level containing element in your markup and will reset the majority of styles to a sensible default.",[419,420],"css-example",{"name":421,"type":422},"reset","legacy",[424,425,429],"nord-button",{"href":426,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Freset\u002F","primary","_blank",[16,430,431],{},"View reset examples",[223,433],{},[32,435,437],{"id":436},"typographic-utilities","Typographic utilities",[16,439,440,441,444,445,448,449,451,452,404,456,444,460,464],{},"There are two main typographic helpers within the CSS Framework; ",[62,442,443],{},".n-typescale"," and ",[62,446,447],{},".n-typeset",". With these helpers, you can apply the values provided in our ",[26,450,363],{"href":362}," for ",[26,453,455],{"href":454},"\u002Fcore\u002Ftokens\u002F#font-size","font size",[26,457,459],{"href":458},"\u002Fcore\u002Ftokens\u002F#font","weight",[26,461,463],{"href":462},"\u002Fcore\u002Ftokens\u002F#line-height","spacing",", without the need to create CSS of your own.",[419,466],{"name":467,"type":422},"typescale",[424,469,471],{"href":470,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ftypescale\u002F",[16,472,473],{},"View typescale examples",[223,475],{},[16,477,478,479,481],{},"Additionally, applying ",[62,480,447],{}," to a containing element, will style all of its children text elements which can be useful for laying out typographic foundations.",[419,483],{"name":484,"type":422},"typeset",[424,486,488],{"href":487,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ftypeset\u002F",[16,489,490],{},"View typeset example",[223,492],{},[32,494,496],{"id":495},"description-list-utility","Description list utility",[16,498,499,500,503,504,507],{},"Description lists are ideal for presenting key \u002F value pair data. While the ",[62,501,502],{},".n-reset"," utility helper resets all typographic elements to a manageable default the ",[62,505,506],{},".n-dl"," utility will style description lists into a much more presentable format.",[419,509],{"name":510,"type":422},"descriptionlist",[424,512,514],{"href":513,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fdescriptionlist\u002F",[16,515,516],{},"View description list example",[223,518],{},[32,520,522],{"id":521},"font-size-utilities","Font size utilities",[16,524,525,526,529,530,274],{},"Nord ",[26,527,528],{"href":398},"defines its sizing"," using t-shirt sizes. This makes it possible for anyone, technical or non-technical, to understand the differences and how they relate to each other. Font sizing follows this same convention to mirror our ",[26,531,532],{"href":454},"Font Size Design Tokens",[419,534],{"name":535,"type":422},"fontsize",[424,537,539],{"href":538,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ffontsize\u002F",[16,540,541],{},"View font size examples",[223,543],{},[32,545,547],{"id":546},"font-weight-utilities","Font weight utilities",[16,549,550],{},"Interfaces are majority text, which is why we've spent a great amount of time fine-tuning our typographic choices. Use the below utilities to set font weights consistently.",[419,552],{"name":553,"type":422},"fontweight",[424,555,557],{"href":556,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ffontweight\u002F",[16,558,559],{},"View font weight examples",[223,561],{},[32,563,565],{"id":564},"color-utilities","Color utilities",[16,567,568,569,571],{},"Nord CSS Framework provides not only access to the colors within our ",[26,570,363],{"href":362},", but also a method of applying these tokens with a reduced risk of error, to ensure you're using the colors as they are intended.",[16,573,574,575,404,578,444,581,274],{},"Accent color has been made available in all the most common scenarios; ",[62,576,577],{},"color",[62,579,580],{},"background-color",[62,582,583],{},"fill",[419,585],{"name":586,"type":422},"accentcolors",[424,588,590],{"href":589,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Faccentcolors\u002F",[16,591,592],{},"View color examples",[223,594],{},[32,596,598],{"id":597},"text-color-utilities","Text color utilities",[16,600,601],{},"Colors intended for text have been wrapped up in a utility helper for direct application:",[419,603],{"name":604,"type":422},"textcolors",[424,606,608],{"href":607,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ftextcolors\u002F",[16,609,610],{},"View text color examples",[223,612],{},[32,614,616],{"id":615},"background-color-utilities","Background color utilities",[16,618,619,620,622],{},"Colors intended for element backgrounds or surfaces have been scoped into the ",[62,621,580],{}," property and can be applied using the following utility helpers:",[419,624],{"name":625,"type":422},"surfaces",[424,627,629],{"href":628,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fsurfaces\u002F",[16,630,631],{},"View surface and background examples",[223,633],{},[32,635,637],{"id":636},"border-utilities","Border utilities",[16,639,640,641,644],{},"Borders have been wrapped up into a series of utility helpers that make use of ",[26,642,378],{"href":376,"rel":643},[43],", so that your styles continue to work when your application changes languages.",[16,646,647],{},"These logical properties translate to different sides depending on the viewers language settings. We've abbreviated these properties into their initials to prevent overly verbose classnames. These abbreviations translate to the following properties in left-to-right languages:",[345,649,650,660,668,677,686,694],{},[348,651,652,655,656,659],{},[62,653,654],{},"-is",": Short for ",[62,657,658],{},"inline-start",", which is the left side",[348,661,662,655,665,667],{},[62,663,664],{},"-ie",[62,666,388],{},", which is the right side",[348,669,670,655,673,676],{},[62,671,672],{},"-bs",[62,674,675],{},"block-start",", which is the top side",[348,678,679,655,682,685],{},[62,680,681],{},"-be",[62,683,684],{},"block-end",", which is the bottom side",[348,687,688,655,691,693],{},[62,689,690],{},"-i",[62,692,372],{},", which is the left and right sides",[348,695,696,655,699,702],{},[62,697,698],{},"-b",[62,700,701],{},"block",", which is the top and bottom side",[419,704],{"name":705,"type":422},"borders",[424,707,709],{"href":708,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fborders\u002F",[16,710,711],{},"View border examples",[223,713],{},[32,715,717],{"id":716},"border-radius-utilities","Border radius utilities",[16,719,720,721,725],{},"Border radius tokens are available as utility helpers to apply rounded corners to elements. If you require more precise control over rounded corners, such as applying them to specific corners, we recommend making use of ",[26,722,724],{"href":723},"\u002Fcore\u002Ftokens\u002F#border-radius","our border radius design tokens"," directly.",[419,727],{"name":728,"type":422},"borderradius",[424,730,732],{"href":731,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fborderradius\u002F",[16,733,734],{},"View border radius examples",[223,736],{},[32,738,740],{"id":739},"box-shadow-utilities","Box shadow utilities",[16,742,743,744,748],{},"Box shadow tokens are designed to help reflect the elevation of a component or element. Larger shadows show that the element is higher and smaller shadows (or no shadow) show that the element is lower. Box shadow utility helpers have been named to reflect their intended purpose, please refer to our ",[26,745,747],{"href":746},"\u002Fcore\u002Ftokens\u002F#box-shadow","box shadow design tokens"," for further information.",[419,750],{"name":751,"type":422},"boxshadow",[424,753,755],{"href":754,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fboxshadow\u002F",[16,756,757],{},"View box shadow examples",[223,759],{},[32,761,763],{"id":762},"icon-utilities","Icon utilities",[16,765,766,767,444,770,773,774,776,777,780],{},"The icon utilities include colors as well as sizes. Sizes have been scoped into ",[62,768,769],{},"inline-size",[62,771,772],{},"block-size"," properties, while colors have been scoped to the ",[62,775,577],{}," property so that the ",[62,778,779],{},"currentColor"," attribute value can respectively inherit the color.",[419,782],{"name":783,"type":422},"icons",[424,785,787],{"href":786,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Ficons\u002F",[16,788,789],{},"View icon examples",[223,791],{},[32,793,795],{"id":794},"stack-utilities","Stack utilities",[16,797,798,799,803,804,807,808,812,813,816],{},"The ",[26,800,802],{"href":801},"\u002Fcomponents\u002Fstack\u002F","Stack component"," manages layout of immediate children along the vertical or horizontal axis with adjustable spacing between each child. The stack utility helpers are designed to provide the same features but with a single class applied to the containing element. The default child spacing is set to ",[62,805,806],{},"--n-space-m"," but can be adjusted using ",[26,809,811],{"href":810},"#gap-utilities","our gap utilities",". By default, the stack utility helpers wrap (as opposed to the Stack component), but this can be disabled by adding the ",[62,814,815],{},".n-stack-no-wrap"," utility helper.",[16,818,819,820,824],{},"As with the ",[26,821,823],{"href":822},"#border-utilities","border utilities",", the shorthand utility modifiers use logical properties. However the Stack utilities are only interested in vertical alignment. They follow this convention:",[345,826,827,837],{},[348,828,829,832,833,836],{},[62,830,831],{},"-s",": ",[62,834,835],{},"start",", which is the top alignment",[348,838,839,832,842,845],{},[62,840,841],{},"-e",[62,843,844],{},"end",", which is the bottom alignment",[16,847,848,849,852],{},"For more fine-grained positioning, you can adjust the ",[62,850,851],{},"justify-content"," property by using one of these utility classes:",[345,854,855,863,871,879,887,895],{},[348,856,857,832,860],{},[62,858,859],{},".n-justify-center",[62,861,862],{},"justify-content: center;",[348,864,865,832,868],{},[62,866,867],{},".n-justify-start",[62,869,870],{},"justify-content: flex-start;",[348,872,873,832,876],{},[62,874,875],{},".n-justify-end",[62,877,878],{},"justify-content: flex-end;",[348,880,881,832,884],{},[62,882,883],{},".n-justify-between",[62,885,886],{},"justify-content: space-between;",[348,888,889,832,892],{},[62,890,891],{},".n-justify-evenly",[62,893,894],{},"justify-content: space-evenly;",[348,896,897,832,900],{},[62,898,899],{},".n-justify-around",[62,901,902],{},"justify-content: space-around;",[16,904,905,906,852],{},"Plus, you can adjust the ",[62,907,908],{},"align-items",[345,910,911,919,927,935,943],{},[348,912,913,832,916],{},[62,914,915],{},".n-items-center",[62,917,918],{},"align-items: center;",[348,920,921,832,924],{},[62,922,923],{},".n-items-start",[62,925,926],{},"align-items: flex-start;",[348,928,929,832,932],{},[62,930,931],{},".n-items-end",[62,933,934],{},"align-items: flex-end;",[348,936,937,832,940],{},[62,938,939],{},".n-items-baseline",[62,941,942],{},"align-items: baseline;",[348,944,945,832,948],{},[62,946,947],{},".n-items-stretch",[62,949,950],{},"align-items: stretch;",[419,952],{"name":953,"type":422},"stack",[424,955,957],{"href":956,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fstack\u002F",[16,958,959],{},"View stack examples",[223,961],{},[32,963,965],{"id":964},"grid-and-container-utilities","Grid and container utilities",[16,967,968,969,973,974,977,978,807,980,274],{},"Grid and container helper classes are for creating layouts that follow our recommended ",[26,970,972],{"href":971},"\u002Fdesign\u002Ffoundations\u002Fgrid\u002F","grid layouts as shown in our Toolkit",". The grid utilities can be used alongside the ",[62,975,976],{},".n-container"," utilities to constrain containers to a desired width. The default child spacing in a grid is set to ",[62,979,806],{},[26,981,811],{"href":810},[345,983,984,1002],{},[348,985,986,989,990,993,994,997,998,1001],{},[62,987,988],{},".n-grid",": Provides a set column structure for items to fall into. Items can then be adjusted to fill more grid 'cells' with style properties ",[62,991,992],{},"grid-column: span 2"," or ",[62,995,996],{},"grid-row: span 2",". In addition there are helpers to align grid items horizontally, vertically or both (",[62,999,1000],{},".n-grid-center","). See examples below for all available grid item options",[348,1003,1004,1006,1007,1011],{},[62,1005,976],{},": Used to contain elements to a fixed width as the browser width grows. These help with ",[26,1008,1010],{"href":1009},"\u002Fdesign\u002Ffoundations\u002Ftypography\u002F#line-length","readable line length"," as well as providing focus to pages with reduced content. See examples below for all available container width options.",[419,1013],{"name":1014,"type":422},"grid",[16,1016,1017,1018,1021,1022,1025],{},"When using any of the ",[62,1019,1020],{},"n-grid"," utility helpers it's also possible to fine tune the grid column count to your needs using the ",[62,1023,1024],{},"--n-grid-columns"," CSS custom property, however we highly recommend using the existing helpers provided.",[424,1027,1029],{"href":1028,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fgrid\u002F",[16,1030,1031],{},"View grid examples",[223,1033],{},[32,1035,1037],{"id":1036},"gap-utilities","Gap utilities",[16,1039,1040,1041,1046,1047,1050,1051,404,1054,404,1057,404,1060,993,1063,1066,1067,1070,1071,1074],{},"By default both the stack and grid utilities have their child spacing set to ",[26,1042,1044],{"href":1043},"\u002Fcore\u002Ftokens\u002F#space",[62,1045,806],{}," to mirror the ",[26,1048,1049],{"href":801},"Stack component's"," default behaviour. However this can be adjusted using ",[62,1052,1053],{},"n-gap-xxl",[62,1055,1056],{},"n-gap-xl",[62,1058,1059],{},"n-gap-l",[62,1061,1062],{},"n-gap-s",[62,1064,1065],{},"n-gap-xs"," which applies ",[26,1068,1069],{"href":1043},"our spacing tokens"," as gaps. Using ",[62,1072,1073],{},"n-gap-none"," will remove the gap entirely.",[424,1076,1077],{"href":956,"variant":427,"target":428},[16,1078,1079],{},"View gap examples with stack utilities",[424,1081,1082],{"href":1028,"variant":427,"target":428},[16,1083,1084],{},"View gap examples with grid utilities",[223,1086],{},[32,1088,1090],{"id":1089},"spacing-utilities","Spacing utilities",[16,1092,1093,1094,1097,1098,1101,1102,274],{},"Our ",[26,1095,1096],{"href":1043},"spacing tokens"," are accessible via the CSS Framework as margin and padding. These are all applied using ",[26,1099,378],{"href":376,"rel":1100},[43],", so that your styles continue to work when your application changes languages. These also follow the ",[26,1103,1104],{"href":398},"t-shirt sizing convention",[16,1106,1107],{},[200,1108],{"alt":1109,"src":1110},"Diagram depicting how classnames are broken down","\u002Fimg\u002Flogical-property-diagram-classnaming.svg",[16,1112,819,1113,1115],{},[26,1114,823],{"href":822},", the shorthand utility modifiers use logical properties. They follow this convention:",[345,1117,1118,1124,1130,1136,1142,1148],{},[348,1119,1120,655,1122,659],{},[62,1121,654],{},[62,1123,658],{},[348,1125,1126,655,1128,667],{},[62,1127,664],{},[62,1129,388],{},[348,1131,1132,655,1134,676],{},[62,1133,672],{},[62,1135,675],{},[348,1137,1138,655,1140,685],{},[62,1139,681],{},[62,1141,684],{},[348,1143,1144,655,1146,693],{},[62,1145,690],{},[62,1147,372],{},[348,1149,1150,655,1152,702],{},[62,1151,698],{},[62,1153,701],{},[16,1155,1156],{},[200,1157],{"alt":1158,"src":1159},"Diagram depicting how logical properties correspond to sides of an element","\u002Fimg\u002Flogical-property-diagram-sides.svg",[67,1161,1163],{"id":1162},"margin","Margin",[16,1165,1166,1167,1169,1170,993,1173,1176],{},"In addition to the ",[26,1168,1096],{"href":1043}," the margin helpers come with \"auto\" margins. These can be useful for pushing an element to the start or end of a ",[26,1171,953],{"href":1172},"#stack-utilities",[26,1174,1014],{"href":1175},"#grid-and-container-utilities"," as well as centering en element horizontally as well as vertically.",[419,1178],{"name":1162,"type":422},[424,1180,1182],{"href":1181,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fmargin\u002F",[16,1183,1184],{},"View margin examples",[67,1186,1188],{"id":1187},"padding","Padding",[419,1190],{"name":1187,"type":422},[424,1192,1194],{"href":1193,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fpadding\u002F",[16,1195,1196],{},"View padding examples",[223,1198],{},[32,1200,1202],{"id":1201},"miscellaneous-utilities","Miscellaneous utilities",[16,1204,1205,1206,1211],{},"These final utility helpers are due to be expanded upon but at present provide options for truncating lines of text, adding dividers and creating form fields. Multiline truncation is achieved using webkit line clamp, please ",[26,1207,1210],{"href":1208,"rel":1209},"https:\u002F\u002Fcaniuse.com\u002F?search=line-clamp",[43],"check browser compatibility"," before using.",[419,1213],{"name":1214,"type":422},"misc",[424,1216,1218],{"href":1217,"variant":427,"target":428},"\u002Fcss\u002Fexamples\u002Fmisc\u002F",[16,1219,1220],{},"View misc examples",[223,1222],{},[32,1224,1226],{"id":1225},"css-custom-properties","CSS custom properties",[16,1228,1229,1230,274],{},"While we do recommend using components and utility helpers where you can, it's possible to use our design tokens directly in your code to give you finer grain control over your presentation. Our design tokens can be accessed using CSS custom properties (also known as CSS variables). These are the exact same custom properties shown on ",[26,1231,1232],{"href":362},"our design tokens page",[16,1234,1235,1236,1238],{},"An example use case could be that you wish to use ",[26,1237,1069],{"href":1043}," to add margin around an element:",[78,1240,1244],{"className":1241,"code":1242,"language":1243,"meta":83,"style":83},"language-css shiki shiki-themes github-light github-dark",".custom-cta {\n  margin: var(--n-space-xxl);\n}\n","css",[62,1245,1246,1254,1275],{"__ignoreMap":83},[87,1247,1248,1251],{"class":89,"line":90},[87,1249,1250],{"class":93},".custom-cta",[87,1252,1253],{"class":156}," {\n",[87,1255,1256,1260,1262,1265,1268,1272],{"class":89,"line":300},[87,1257,1259],{"class":1258},"sj4cs","  margin",[87,1261,832],{"class":156},[87,1263,1264],{"class":1258},"var",[87,1266,1267],{"class":156},"(",[87,1269,1271],{"class":1270},"s4XuR","--n-space-xxl",[87,1273,1274],{"class":156},");\n",[87,1276,1278],{"class":89,"line":1277},3,[87,1279,1280],{"class":156},"}\n",[16,1282,1283,1284,1288],{},"Another use case could be that you want to apply a ",[26,1285,1287],{"href":1286},"\u002Fcore\u002Ftokens\u002F#color","color token"," to a highlighted piece of text:",[78,1290,1292],{"className":1241,"code":1291,"language":1243,"meta":83,"style":83},"mark {\n  background: var(--n-color-status-highlight);\n}\n",[62,1293,1294,1301,1317],{"__ignoreMap":83},[87,1295,1296,1299],{"class":89,"line":90},[87,1297,1298],{"class":160},"mark",[87,1300,1253],{"class":156},[87,1302,1303,1306,1308,1310,1312,1315],{"class":89,"line":300},[87,1304,1305],{"class":1258},"  background",[87,1307,832],{"class":156},[87,1309,1264],{"class":1258},[87,1311,1267],{"class":156},[87,1313,1314],{"class":1270},"--n-color-status-highlight",[87,1316,1274],{"class":156},[87,1318,1319],{"class":89,"line":1277},[87,1320,1280],{"class":156},[16,1322,1323,1324,274],{},"Using our design tokens via CSS custom properties means that not only will these values be kept up to date but they will also change automatically when used in conjunction with ",[26,1325,1327],{"href":1326},"\u002Fdesign\u002Fthemes\u002F","our themes",[424,1329,1330],{"href":362,"variant":427},[16,1331,1332],{},"View all design tokens",[223,1334],{},[32,1336,1338],{"id":1337},"getting-support","Getting support",[16,1340,1341,1342,1345],{},"Need help with our CSS Framework? Please head over to the ",[26,1343,1344],{"href":191},"Support page"," for more information and ways to contact us.",[1347,1348,1349],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":83,"searchDepth":300,"depth":300,"links":1351},[1352,1358,1361,1362,1363,1364,1365,1366,1367,1368,1369,1370,1371,1372,1373,1374,1375,1376,1377,1381,1382,1383],{"id":34,"depth":300,"text":35,"children":1353},[1354,1355,1356,1357],{"id":69,"depth":1277,"text":70},{"id":104,"depth":1277,"text":105},{"id":127,"depth":1277,"text":128},{"id":184,"depth":1277,"text":185},{"id":227,"depth":300,"text":228,"children":1359},[1360],{"id":277,"depth":1277,"text":278},{"id":336,"depth":300,"text":337},{"id":413,"depth":300,"text":414},{"id":436,"depth":300,"text":437},{"id":495,"depth":300,"text":496},{"id":521,"depth":300,"text":522},{"id":546,"depth":300,"text":547},{"id":564,"depth":300,"text":565},{"id":597,"depth":300,"text":598},{"id":615,"depth":300,"text":616},{"id":636,"depth":300,"text":637},{"id":716,"depth":300,"text":717},{"id":739,"depth":300,"text":740},{"id":762,"depth":300,"text":763},{"id":794,"depth":300,"text":795},{"id":964,"depth":300,"text":965},{"id":1036,"depth":300,"text":1037},{"id":1089,"depth":300,"text":1090,"children":1378},[1379,1380],{"id":1162,"depth":1277,"text":1163},{"id":1187,"depth":1277,"text":1188},{"id":1201,"depth":300,"text":1202},{"id":1225,"depth":300,"text":1226},{"id":1337,"depth":300,"text":1338},false,"md",null,{},true,"\u002Fdocs\u002Fdeveloper\u002Fcss-framework",{"title":5,"description":83},{"loc":1389},"docs\u002F01.developer\u002F06.css-framework\u002Findex","rczuDR5FHb1ooseO5RUkgmWd9iidKoZzFmtiRDgccxA",[1395,1585,1699,1717],{"title":1396,"children":1397,"path":1583,"stem":1584,"page":1384},"Docs",[1398,1494],{"path":1399,"title":1400,"icon":1401,"keywords":1402,"children":1403},"\u002Fdocs\u002Fdeveloper","Developer","file-code","docs developer start install setup web components ai faq",[1404,1408,1413,1418,1422,1426,1462,1484,1489],{"path":1399,"title":1405,"icon":1406,"keywords":1407},"Getting started","navigation-dashboard","docs start install setup npm",{"path":1409,"title":1410,"icon":1411,"keywords":1412},"\u002Fdocs\u002Fdeveloper\u002Fweb-components","Using Web Components","generic-module","web components setup install usage custom elements",{"path":1414,"title":1415,"icon":1416,"keywords":1417},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts","Webfonts","interface-content-book","fonts typography webfonts",{"path":1419,"title":1420,"icon":1411,"keywords":1421},"\u002Fdocs\u002Fdeveloper\u002Fcdn","CDN","cdn package delivery script link",{"path":1423,"title":1424,"icon":1416,"keywords":1425},"\u002Fdocs\u002Fdeveloper\u002Flocalization","Localization","localization translation rtl ltr",{"path":1389,"title":5,"icon":1401,"keywords":1427,"badge":422,"children":1428},"css framework legacy utilities",[1429,1431,1433,1435,1438,1441,1444,1447,1450,1453,1456,1459],{"path":1430,"title":35},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#installation",{"path":1432,"title":228},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#usage",{"path":1434,"title":337},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#utilities",{"path":1436,"title":1437},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#reset-utility","Reset Utility",{"path":1439,"title":1440},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#typographic-utilities","Typographic Utilities",{"path":1442,"title":1443},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#font-size-utilities","Font Size Utilities",{"path":1445,"title":1446},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#color-utilities","Color Utilities",{"path":1448,"title":1449},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#border-utilities","Border Utilities",{"path":1451,"title":1452},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#box-shadow-utilities","Box Shadow Utilities",{"path":1454,"title":1455},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#grid-and-container-utilities","Grid & Container Utilities",{"path":1457,"title":1458},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#spacing-utilities","Spacing Utilities",{"path":1460,"title":1461},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#css-custom-properties","CSS Custom Properties",{"path":1463,"title":1464,"icon":1465,"keywords":1466,"children":1467},"\u002Fdocs\u002Fdeveloper\u002Feslint","ESLint Plugin","interface-checked","eslint lint rules css tailwind",[1468,1470,1472,1475,1478,1481],{"path":1469,"title":35},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#installation",{"path":1471,"title":228},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#usage",{"path":1473,"title":1474},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#nord-rules","Nord Rules",{"path":1476,"title":1477},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#tailwind-rules","Tailwind Rules",{"path":1479,"title":1480},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#custom-configuration","Custom Configuration",{"path":1482,"title":1483},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#class-detection","Class Detection",{"path":1485,"title":1486,"icon":1487,"keywords":1488},"\u002Fdocs\u002Fdeveloper\u002Fworking-with-ai","Working with AI","interface-ai","ai llms skills agents",{"path":1490,"title":1491,"icon":1492,"keywords":1493},"\u002Fdocs\u002Fdeveloper\u002Ffaq","FAQ","interface-help","questions answers support",{"path":1495,"title":1496,"icon":1416,"keywords":1497,"children":1498},"\u002Fdesign","Design","design foundations themes brand tools figma",[1499,1501,1535,1573,1578],{"path":1495,"title":1405,"icon":1406,"keywords":1500},"design start foundations figma",{"path":1502,"title":1503,"icon":1416,"keywords":1504,"children":1505},"\u002Fdesign\u002Ffoundations","Foundations","principles accessibility colors typography grid naming",[1506,1509,1512,1514,1517,1520,1523,1526,1529,1532],{"path":1507,"title":1508},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist","Accessibility",{"path":1510,"title":1511},"\u002Fdesign\u002Ffoundations\u002Fcolors","Color System",{"path":1513,"title":1446},"\u002Fdesign\u002Ffoundations\u002Fcolor-utilities",{"path":1515,"title":1516},"\u002Fdesign\u002Ffoundations\u002Fprinciples","Principles",{"path":1518,"title":1519},"\u002Fdesign\u002Ffoundations\u002Ffigma","Figma Toolkit",{"path":1521,"title":1522},"\u002Fdesign\u002Ffoundations\u002Fgrid","Grid",{"path":1524,"title":1525},"\u002Fdesign\u002Ffoundations\u002Ficonography","Iconography",{"path":1527,"title":1528},"\u002Fdesign\u002Ffoundations\u002Fnaming","Naming",{"path":1530,"title":1531},"\u002Fdesign\u002Ffoundations\u002Fbrand","Nordhealth Brand",{"path":1533,"title":1534},"\u002Fdesign\u002Ffoundations\u002Ftypography","Typography",{"path":1536,"title":1537,"icon":1538,"keywords":1539,"children":1540},"\u002Fdesign\u002Fthemes","Themes","interface-mode-light","themes brand dark light contrast",[1541,1544,1546,1549,1552,1555,1558,1561,1564,1567,1570],{"path":1542,"title":1543},"#top","Overview",{"path":1545,"title":35},"#installation",{"path":1547,"title":1548},"#available-themes","Available Themes",{"path":1550,"title":1551},"#examples","Examples",{"path":1553,"title":1554},"#dark-mode","Dark Mode",{"path":1556,"title":1557},"#creating-themes","Creating Themes",{"path":1559,"title":1560},"#accent-color","Accent Color",{"path":1562,"title":1563},"#top-bar-theming","Top Bar theming",{"path":1565,"title":1566},"#logo-usage","Logo Usage",{"path":1568,"title":1569},"#theming-in-figma","Theming in Figma",{"path":1571,"title":1572},"#theme-builder","Theme Builder",{"path":1574,"title":1575,"icon":1576,"keywords":1577},"\u002Fdesign\u002Fassets","Brand assets","interface-attachment","assets downloads logo brand figma",{"path":1579,"title":1580,"icon":1581,"keywords":1582},"\u002Fdesign\u002Ftools","Tools","navigation-settings","tools color generator theme builder accessibility checklist","\u002Fdocs","docs",{"title":1586,"children":1587,"path":1697,"stem":1698},"Core",[1588,1593,1630,1677,1682,1687,1692],{"path":1589,"title":1590,"icon":1591,"keywords":1592},"\u002Fcomponents","Components","interface-grid","components web components reference api examples",{"path":1594,"title":363,"icon":1595,"keywords":1596,"children":1597},"\u002Fcore\u002Ftokens","interface-tag","tokens variables color space typography",[1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628],{"path":1599,"title":1600},"#color","Color",{"path":1602,"title":1603},"#border-radius","Border Radius",{"path":1605,"title":1606},"#box-shadow","Box Shadow",{"path":1608,"title":1609},"#font-size","Font Size",{"path":1611,"title":1612},"#font","Font",{"path":1614,"title":1615},"#line-height","Line Height",{"path":1617,"title":1618},"#size","Size",{"path":1620,"title":1621},"#space","Space",{"path":1623,"title":1624},"#transition","Transition",{"path":1626,"title":1627},"#z-index","Z-index",{"path":1629,"title":228},"#usage",{"path":1631,"title":29,"icon":1632,"keywords":1633,"children":1634},"\u002Fcore\u002Fcss\u002Ftailwind","interface-edit","tailwind utilities css tokens",[1635,1637,1639,1642,1645,1648,1651,1654,1657,1660,1663,1666,1669,1671,1674],{"path":1636,"title":35},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#installation",{"path":1638,"title":228},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#usage",{"path":1640,"title":1641},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#peer-dependencies","Peer Dependencies",{"path":1643,"title":1644},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#theme-variables","Theme Variables",{"path":1646,"title":1647},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#logical-properties","Logical Properties",{"path":1649,"title":1650},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#typography-examples","Typography Examples",{"path":1652,"title":1653},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#color-examples","Color Examples",{"path":1655,"title":1656},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#border-examples","Border Examples",{"path":1658,"title":1659},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#shadow-examples","Shadow Examples",{"path":1661,"title":1662},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#miscellaneous-utilities","Miscellaneous Utilities",{"path":1664,"title":1665},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#nord-components","Nord Components",{"path":1667,"title":1668},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#form-utilities","Form Utilities",{"path":1670,"title":1522},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#grid",{"path":1672,"title":1673},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":1675,"title":1676},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#extending-the-theme","Extending the Theme",{"path":1678,"title":1679,"icon":1680,"keywords":1681},"\u002Fblocks","Blocks","interface-table","blocks patterns sections examples",{"path":1683,"title":1684,"icon":1685,"keywords":1686},"\u002Ftemplates","Templates","navigation-catalog","templates pages layouts examples",{"path":1688,"title":1689,"icon":1690,"keywords":1691},"\u002Ficons","Icons","interface-bookmark","icons nordicons symbols",{"path":1693,"title":1694,"icon":1695,"native":1388,"keywords":1696},"\u002Fstorybook","Playground","interface-play","playground storybook examples","\u002Fcore","core",{"title":1700,"path":1701,"stem":1702,"children":1703},"Updates","\u002Fupdates","updates\u002Findex",[1704,1708,1713],{"path":1701,"title":1705,"icon":1706,"keywords":1707},"Latest Updates","file-notes","latest updates blog announcements news",{"path":1709,"title":1710,"icon":1711,"keywords":1712},"\u002Fchangelogs","Changelog","text-list","changelog releases packages versions",{"path":1714,"title":1715,"icon":1401,"keywords":1716},"\u002Fmigrations","Migration guides","migrations upgrade guides breaking changes",{"title":1718,"children":1719,"path":1749,"stem":1750},"Resources",[1720,1725,1729,1733,1737,1741,1745],{"path":1721,"title":1722,"icon":1723,"keywords":1724},"\u002Fresources\u002Fabout","About the design system","interface-info","about nord design system team goals",{"path":1726,"title":1727,"icon":1492,"keywords":1728},"\u002Fresources\u002Fsupport","Support","help feedback support slack office hours status",{"path":1730,"title":1731,"icon":1632,"keywords":1732},"\u002Fresources\u002Fcontributing","Contributing","contributing contribution proposal process",{"path":1734,"title":1735,"icon":1711,"keywords":1736},"\u002Fresources\u002Fbacklog-prioritization","Backlog prioritization","backlog prioritization roadmap requests",{"path":1738,"title":1739,"icon":1492,"keywords":1740},"\u002Fresources\u002Faccessibility-statement","Accessibility statement","accessibility statement wcag website",{"path":1742,"title":1743,"icon":1723,"keywords":1744},"\u002Fresources\u002Fcareers","Careers","careers jobs team",{"path":1746,"title":1747,"icon":1706,"keywords":1748},"\u002Fresources\u002Fterms","Terms of use","terms legal license usage","\u002Fresources","resources",[1752,1815,1852,1857],{"title":1396,"children":1753,"path":1583,"stem":1584,"page":1384},[1754,1785],{"path":1399,"title":1400,"icon":1401,"keywords":1402,"children":1755},[1756,1757,1758,1759,1760,1761,1775,1783,1784],{"path":1399,"title":1405,"icon":1406,"keywords":1407},{"path":1409,"title":1410,"icon":1411,"keywords":1412},{"path":1414,"title":1415,"icon":1416,"keywords":1417},{"path":1419,"title":1420,"icon":1411,"keywords":1421},{"path":1423,"title":1424,"icon":1416,"keywords":1425},{"path":1389,"title":5,"icon":1401,"keywords":1427,"badge":422,"children":1762},[1763,1764,1765,1766,1767,1768,1769,1770,1771,1772,1773,1774],{"path":1430,"title":35},{"path":1432,"title":228},{"path":1434,"title":337},{"path":1436,"title":1437},{"path":1439,"title":1440},{"path":1442,"title":1443},{"path":1445,"title":1446},{"path":1448,"title":1449},{"path":1451,"title":1452},{"path":1454,"title":1455},{"path":1457,"title":1458},{"path":1460,"title":1461},{"path":1463,"title":1464,"icon":1465,"keywords":1466,"children":1776},[1777,1778,1779,1780,1781,1782],{"path":1469,"title":35},{"path":1471,"title":228},{"path":1473,"title":1474},{"path":1476,"title":1477},{"path":1479,"title":1480},{"path":1482,"title":1483},{"path":1485,"title":1486,"icon":1487,"keywords":1488},{"path":1490,"title":1491,"icon":1492,"keywords":1493},{"path":1495,"title":1496,"icon":1416,"keywords":1497,"children":1786},[1787,1788,1800,1813,1814],{"path":1495,"title":1405,"icon":1406,"keywords":1500},{"path":1502,"title":1503,"icon":1416,"keywords":1504,"children":1789},[1790,1791,1792,1793,1794,1795,1796,1797,1798,1799],{"path":1507,"title":1508},{"path":1510,"title":1511},{"path":1513,"title":1446},{"path":1515,"title":1516},{"path":1518,"title":1519},{"path":1521,"title":1522},{"path":1524,"title":1525},{"path":1527,"title":1528},{"path":1530,"title":1531},{"path":1533,"title":1534},{"path":1536,"title":1537,"icon":1538,"keywords":1539,"children":1801},[1802,1803,1804,1805,1806,1807,1808,1809,1810,1811,1812],{"path":1542,"title":1543},{"path":1545,"title":35},{"path":1547,"title":1548},{"path":1550,"title":1551},{"path":1553,"title":1554},{"path":1556,"title":1557},{"path":1559,"title":1560},{"path":1562,"title":1563},{"path":1565,"title":1566},{"path":1568,"title":1569},{"path":1571,"title":1572},{"path":1574,"title":1575,"icon":1576,"keywords":1577},{"path":1579,"title":1580,"icon":1581,"keywords":1582},{"title":1586,"children":1816,"path":1697,"stem":1698},[1817,1818,1831,1848,1849,1850,1851],{"path":1589,"title":1590,"icon":1591,"keywords":1592},{"path":1594,"title":363,"icon":1595,"keywords":1596,"children":1819},[1820,1821,1822,1823,1824,1825,1826,1827,1828,1829,1830],{"path":1599,"title":1600},{"path":1602,"title":1603},{"path":1605,"title":1606},{"path":1608,"title":1609},{"path":1611,"title":1612},{"path":1614,"title":1615},{"path":1617,"title":1618},{"path":1620,"title":1621},{"path":1623,"title":1624},{"path":1626,"title":1627},{"path":1629,"title":228},{"path":1631,"title":29,"icon":1632,"keywords":1633,"children":1832},[1833,1834,1835,1836,1837,1838,1839,1840,1841,1842,1843,1844,1845,1846,1847],{"path":1636,"title":35},{"path":1638,"title":228},{"path":1640,"title":1641},{"path":1643,"title":1644},{"path":1646,"title":1647},{"path":1649,"title":1650},{"path":1652,"title":1653},{"path":1655,"title":1656},{"path":1658,"title":1659},{"path":1661,"title":1662},{"path":1664,"title":1665},{"path":1667,"title":1668},{"path":1670,"title":1522},{"path":1672,"title":1673},{"path":1675,"title":1676},{"path":1678,"title":1679,"icon":1680,"keywords":1681},{"path":1683,"title":1684,"icon":1685,"keywords":1686},{"path":1688,"title":1689,"icon":1690,"keywords":1691},{"path":1693,"title":1694,"icon":1695,"native":1388,"keywords":1696},{"title":1700,"path":1701,"stem":1702,"children":1853},[1854,1855,1856],{"path":1701,"title":1705,"icon":1706,"keywords":1707},{"path":1709,"title":1710,"icon":1711,"keywords":1712},{"path":1714,"title":1715,"icon":1401,"keywords":1716},{"title":1718,"children":1858,"path":1749,"stem":1750},[1859,1860,1861,1862,1863,1864,1865],{"path":1721,"title":1722,"icon":1723,"keywords":1724},{"path":1726,"title":1727,"icon":1492,"keywords":1728},{"path":1730,"title":1731,"icon":1632,"keywords":1732},{"path":1734,"title":1735,"icon":1711,"keywords":1736},{"path":1738,"title":1739,"icon":1492,"keywords":1740},{"path":1742,"title":1743,"icon":1723,"keywords":1744},{"path":1746,"title":1747,"icon":1706,"keywords":1748},[1867,1890,1904,1909,1914,1919,1922,1926,1930,1934,1938,1942,1955,1968,1977,1981,1985,1989,1993,2011,2015,2056,2060,2089,2093,2097,2101,2105,2147,2156,2160,2164,2168,2172,2190,2199,2203,2207,2216,2245,2249,2253,2257,2261,2265,2269,2273,2282,2286,2290,2294,2297,2310,2314,2323,2327,2331,2340,2344,2348,2352,2356],{"name":1868,"tagName":1869,"description":1870,"category":1871,"status":1872,"isNew":1384,"lightDom":1388,"parts":1873},"Accordion","nord-accordion","Accordion is a set of collapsible sections, each with a header that toggles\nthe visibility of its content. It coordinates a group of\nAccordion Item elements, keyboard focus\nmovement between them, and which items are open.","container","ready",[1874,1878,1882,1886],{"name":1875,"tagName":1876,"description":1877},"AccordionHeader","nord-accordion-header","Accordion Header is the heading that labels an\nAccordion Panel. Following the WAI-ARIA\naccordion pattern, its Accordion Trigger\nbutton is wrapped in a heading element.",{"name":1879,"tagName":1880,"description":1881},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":1883,"tagName":1884,"description":1885},"AccordionPanel","nord-accordion-panel","Accordion Panel holds the content revealed by its\nAccordion Trigger. It must be placed inside\nan Accordion Item and animates its height as it\nopens and closes.",{"name":1887,"tagName":1888,"description":1889},"AccordionTrigger","nord-accordion-trigger","Accordion Trigger is the button that opens and closes its\nAccordion Panel. It must be placed inside an\nAccordion Header.",{"name":1891,"tagName":1892,"description":1893,"category":1894,"status":1872,"isNew":1384,"lightDom":1384,"parts":1895},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.","layout",[1896,1900],{"name":1897,"tagName":1898,"description":1899},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":1901,"tagName":1902,"description":1903},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":1905,"tagName":1906,"description":1907,"category":1908,"status":1872,"isNew":1384,"lightDom":1388},"Autocomplete","nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.","form",{"name":1910,"tagName":1911,"description":1912,"category":1913,"status":1872,"isNew":1384,"lightDom":1384},"Avatar","nord-avatar","Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.","content",{"name":1915,"tagName":1916,"description":1917,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"Badge","nord-badge","Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.","feedback",{"name":1920,"tagName":20,"description":1921,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"Banner","Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",{"name":1923,"tagName":424,"description":1924,"category":1925,"status":1872,"isNew":1384,"lightDom":1384},"Button","Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.","action",{"name":1927,"tagName":1928,"description":1929,"category":1925,"status":1872,"isNew":1384,"lightDom":1384},"ButtonGroup","nord-button-group","Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",{"name":1931,"tagName":1932,"description":1933,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Calendar","nord-calendar","Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",{"name":1935,"tagName":1936,"description":1937,"category":1871,"status":1872,"isNew":1384,"lightDom":1384},"Card","nord-card","Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",{"name":1939,"tagName":1940,"description":1941,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Checkbox","nord-checkbox","Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",{"name":1943,"tagName":1944,"description":1945,"category":1871,"status":1872,"isNew":1384,"lightDom":1388,"parts":1946},"Collapsible","nord-collapsible","Collapsible is a disclosure that shows or hides a section of content. It wires\ntogether a Collapsible Trigger and a\nCollapsible Panel, animating the panel\nheight as it opens and closes.",[1947,1951],{"name":1948,"tagName":1949,"description":1950},"CollapsiblePanel","nord-collapsible-panel","Collapsible Panel holds the content revealed by its\nCollapsible Trigger. It must be placed\ninside a Collapsible and animates its height as it\nopens and closes.",{"name":1952,"tagName":1953,"description":1954},"CollapsibleTrigger","nord-collapsible-trigger","Collapsible Trigger is the interactive control that opens and closes its\nCollapsible panel. It must be placed inside a\nCollapsible.",{"name":1956,"tagName":1957,"description":1958,"category":1908,"status":1872,"isNew":1384,"lightDom":1388,"parts":1959},"Combobox","nord-combobox","Combobox lets users choose one option (or several) from a list by typing to\nfilter, then picking with the keyboard or pointer. Use it when a Select\nwould be unwieldy because there are many options to scan.\n\nCombobox is a control only — it has no built-in label, hint or error. Compose\nit inside a Field to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed value is an option's value (or an array of them with\nmultiple); the input is a filter\u002Fsearch field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[1960,1964],{"name":1961,"tagName":1962,"description":1963},"ComboboxGroup","nord-combobox-group","Groups declarative \u003Cnord-combobox-option> children under a heading inside a\nCombobox:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-group label=\"Frameworks\">\n    \u003Cnord-combobox-option value=\"next\">Next.js\u003C\u002Fnord-combobox-option>\n  \u003C\u002Fnord-combobox-group>\n\u003C\u002Fnord-combobox>\n`\n\nContained options inherit this label as their group. The element renders\nnothing itself and is hidden with display: none`.",{"name":1965,"tagName":1966,"description":1967},"ComboboxOption","nord-combobox-option","A declarative option for a Combobox. Place these as\nchildren of \u003Cnord-combobox> instead of (or as an alternative to) setting the\n.options property:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-option value=\"bug\">Bug\u003C\u002Fnord-combobox-option>\n  \u003Cnord-combobox-option value=\"feature\">Feature\u003C\u002Fnord-combobox-option>\n\u003C\u002Fnord-combobox>\n`\n\nThe option's child markup becomes the rendered row, so you can author custom\nitems (e.g. an avatar + text) without an html string or a render function.\nSet the label attribute when the visible markup isn't plain text, so\nfiltering and the accessible name have something to match on.\n\nThe element renders nothing itself — it is a data source the combobox reads via\ncontext and is hidden with display: none`.",{"name":1969,"tagName":1970,"description":1971,"category":1925,"status":1872,"isNew":1384,"lightDom":1384,"parts":1972},"CommandMenu","nord-command-menu","Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",[1973],{"name":1974,"tagName":1975,"description":1976},"CommandMenuAction","nord-command-menu-action","Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.",{"name":1978,"tagName":1979,"description":1980,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"DatePicker","nord-date-picker","\nDate Picker allows user to enter a date either through text input,\nor by choosing a date from the calendar. Please note that the date\nmust be passed in ISO-8601 format: YYYY-MM-DD.",{"name":1982,"tagName":1983,"description":1984,"category":1908,"status":1872,"isNew":1384,"lightDom":1388},"DateRangePicker","nord-date-range-picker","Date Range Picker lets people choose a start and end date as a single range,\neither from a built-in list of presets (Today, Last 7 days, This month, …) or\nfrom a range calendar. It is a control only — compose it inside a\nField for a label, hint or error, like a native input.\n\nThe committed value is an ISO-8601 interval string YYYY-MM-DD\u002FYYYY-MM-DD;\nthe convenience start-date \u002F end-date props and the valueAsDateRange\ngetter\u002Fsetter stay in sync with it. Selecting in the popout builds a *pending*\nrange; **Apply** commits it (firing change), **Cancel** reverts to the last\ncommitted value, and **Clear** empties it.",{"name":1986,"tagName":1987,"description":1988,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Divider","nord-divider","Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",{"name":1990,"tagName":1991,"description":1992,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Drawer","nord-drawer","Drawer is used to display context-sensitive actions and  information.\nDrawer doesn’t block users from completing their task, like a modal would.",{"name":1994,"tagName":1995,"description":1996,"category":1997,"status":1872,"isNew":1384,"lightDom":1384,"parts":1998},"Dropdown","nord-dropdown","Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.","overlay",[1999,2003,2007],{"name":2000,"tagName":2001,"description":2002},"DropdownGroup","nord-dropdown-group","Dropdown group includes all the actions or items in a single dropdown\ngroup and is used for grouping items into related categories.",{"name":2004,"tagName":2005,"description":2006},"DropdownItem","nord-dropdown-item","Dropdown item populates dropdown with actions. Items can be\nplaced either inside a dropdown group or directly inside a\ndropdown component.",{"name":2008,"tagName":2009,"description":2010},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":2012,"tagName":2013,"description":2014,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"EmptyState","nord-empty-state","Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",{"name":2016,"tagName":2017,"description":2018,"category":1908,"status":1872,"isNew":1384,"lightDom":1388,"parts":2019},"Field","nord-field","Field is the wrapper for a single form control. It lays out a\nField Label, a control (such as an\nInput), an optional\nField Description and a\nField Error with consistent spacing.\n\nCombine several together in a Field Group and\ngroup related groups with a Field Set.\n\nThe Field shares its state with the control through context: a Nord control\nplaced inside a Field suppresses its own built-in label\u002Fhint\u002Ferror and takes\nits accessible name, description and invalid\u002Fdisabled state from the Field.",[2020,2024,2028,2032,2036,2040,2044,2048,2052],{"name":2021,"tagName":2022,"description":2023},"FieldContent","nord-field-content","Field Content wraps a Field Label and\nField Description so they stay aligned as a\nsingle text block, which is especially useful in horizontal\nField layouts.",{"name":2025,"tagName":2026,"description":2027},"FieldDescription","nord-field-description","Field Description is the helper or hint text for a Field.\nIt is styled to match the hint text used by Nord form controls such as\nInput.",{"name":2029,"tagName":2030,"description":2031},"FieldError","nord-field-error","Field Error displays validation error text for a Field.\nIt is styled to match the error text used by Nord form controls such as\nInput.\n\nExposes itself as a live region (role=\"alert\", aria-live=\"polite\") so the\nmessage is announced when it appears. The message is supplied as the\nelement's children.",{"name":2033,"tagName":2034,"description":2035},"FieldGroup","nord-field-group","Field Group stacks a set of Field controls vertically\nwith consistent spacing. Separate sections with a\nField Separator when needed.",{"name":2037,"tagName":2038,"description":2039},"FieldLabel","nord-field-label","Field Label is the label for a control inside a Field.\nIt is styled to match the labels used by Nord form controls such as\nInput.\n\nThe enclosing Field shares this label's id and text with the control through\ncontext, so the control names itself (aria-labelledby for light-DOM controls,\naria-label for shadow-DOM ones) — no wiring needed. Set the for attribute to\na control's id to additionally get native-style click-to-focus.\n\nThe required indicator is driven by the control: mark the control required\nand the Field toggles this label's required attribute automatically.",{"name":2041,"tagName":2042,"description":2043},"FieldLegend","nord-field-legend","Field Legend labels a Field Set, naming the group of\nfields for assistive technology. Place it as the first child of a Field Set.",{"name":2045,"tagName":2046,"description":2047},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":2049,"tagName":2050,"description":2051},"FieldSet","nord-field-set","Field Set groups related fields under a Field Legend\nfor semantic, accessible grouping. It exposes role=\"group\" named by its\nlegend; wrap a Field Group inside.",{"name":2053,"tagName":2054,"description":2055},"FieldTitle","nord-field-title","Field Title is an emphasized inline title used inside choice-card style\nField layouts, where a Field Label\nwraps a whole selectable field.",{"name":2057,"tagName":2058,"description":2059,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Fieldset","nord-fieldset","Deprecated: for new code, group related controls with the composable Field\nfamily — see grouping fields with Field.\nnord-fieldset remains supported for backwards compatibility and is not\nscheduled for removal.\n\nFieldset is used for grouping sets of input components. It is necessary to use a\nfieldset with radio and checkbox components, and can also be useful for logically\ngrouping other types of inputs.",{"name":2061,"tagName":2062,"description":2063,"category":1908,"status":1872,"isNew":1384,"lightDom":1388,"parts":2064},"FilterBar","nord-filter-bar","Filter Bar is a layout wrapper for a row of filter controls. It lays its\nchildren out in a wrapping flex row with a consistent gap, so you can drop in\nFilter Field, Filter Input,\nFilter Add Button and\nFilter Reset Button (or any controls) and\nhave them align without extra styling.\n\nLike Pagination, it is composition-first: it owns no\nfilter state and emits no events. Your app owns the active filters and any URL\nor query-string syncing; the filter primitives only emit intent.",[2065,2069,2073,2077,2081,2085],{"name":2066,"tagName":2067,"description":2068},"FilterAddButton","nord-filter-add-button","Filter Add Button opens a popout of available filters and emits the chosen one\nso your app can add it to the bar. Pass a flat list of options, or group them\nunder headings; selecting one fires a select event with the option's id\nand closes the popout.\n\nLike the other filter primitives it is intent-only: it does not track which\nfilters are active. Your app owns the active filters and decides what to do on\nselect (typically render a new Filter Field).\nMirrors the Provet Cloud filter add button.",{"name":2070,"tagName":2071,"description":2072},"FilterDateRange","nord-filter-date-range","Filter Date Range is a self-contained date-range **filter**: a chip that opens\na popout containing an inline Date Range Picker\n(presets + two-month calendar + Apply). It is the date-range counterpart to\nFilter Dropdown and renders the shared filter\nchip via Filter Field.\n\nComposition-first: it emits change\u002Fclear\u002Fremove and leaves the active\nfilters and any URL\u002Fquery state to your app.",{"name":2074,"tagName":2075,"description":2076},"FilterDropdown","nord-filter-dropdown","Filter Dropdown is a full-featured filter control: a chip trigger that opens a\npopout list of options. It owns its selection and tracks value, unlike the\ncomposition-first Filter Field — pass it options\nand listen for change. It ports the Provet Cloud filter dropdown.\n\nOptions come in three shapes: a flat list ({ value, label }), groups\n({ heading, children }) rendered with dividers, and tree-style options\n(a selectable option with children) where the parent stays selectable and the\nchildren render indented. Single mode tracks a string value and closes on\nselect; multiple tracks an array, shows checkboxes and keeps the popout open.",{"name":2078,"tagName":2079,"description":2080},"FilterField","nord-filter-field","Filter Field is the presentation-only filter **chip**: a joined pill showing a\nleading icon, the filter's label, the active selection summary (value) and\na clear or remove affordance, dashed while inactive. It is the shared chip used\nacross the filter family and the building block for custom filters.\n\nIt owns no popout and tracks no value — drop it into a popout-owning control as\nits slot=\"trigger\" (the host opens\u002Fpositions the popout and sets\naria-controls\u002Faria-haspopup\u002Faria-expanded on this element). Show the\nactive selection with value, reset it in response to clear, and remove the\nwhole field in response to remove. Your app owns the active filters and any\nURL\u002Fquery state.",{"name":2082,"tagName":2083,"description":2084},"FilterInput","nord-filter-input","Filter Input is a compact search\u002Ftext field for filtering a collection. It\nreplaces the small ad-hoc search inputs that sit in toolbars and table\nheaders. By default it renders inline as a small search field with a leading\nsearch icon; set mode=\"chip\" to collapse it behind a chip button that opens\nthe input in a popout, which is handy in a crowded Filter Bar.\n\nIt emits intent only: input as the user types and change when the value is\ncommitted. Your app owns the active filters and any URL\u002Fquery state — read the\nvalue from the event target (or bind value) and filter accordingly.\n\nIt is a control only, like Combobox: compose it inside\na Field for a visible label, or set label for an\naccessible name when used standalone.",{"name":2086,"tagName":2087,"description":2088},"FilterResetButton","nord-filter-reset-button","Filter Reset Button clears every active filter at once. It is a thin,\nintent-only control: it renders a plain button and dispatches a reset event\nwhen pressed. Your app owns the active filters and is responsible for clearing\nthem (and any URL\u002Fquery state) in the handler — the button holds no state of\nits own.\n\nDisable it while there is nothing to reset by binding disabled to whether any\nfilter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud\nfilter reset button.",{"name":2090,"tagName":2091,"description":2092,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Footer","nord-footer","The footer is a block of designated space for providing additional information or actions that are positioned below the main content.",{"name":2094,"tagName":2095,"description":2096,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":2098,"tagName":2099,"description":2100,"category":1913,"status":1872,"isNew":1384,"lightDom":1384},"Icon","nord-icon","Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",{"name":2102,"tagName":2103,"description":2104,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Input","nord-input","Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",{"name":2106,"tagName":2107,"description":2108,"category":2109,"status":1872,"isNew":1384,"lightDom":1388,"parts":2110},"Item","nord-item","Item is a flexible, composable row used to display a piece of content such as\na person, a file or a setting. Combine it with Item Media,\nItem Content, Item Title,\nItem Description and Item Actions\nto build rich list rows. Stack several together with Item Group.\n\nTo make a whole Item act as a link, wrap it in an \u003Ca> element. The row\nhighlights on hover when wrapped this way.","list",[2111,2115,2119,2123,2127,2131,2135,2139,2143],{"name":2112,"tagName":2113,"description":2114},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":2116,"tagName":2117,"description":2118},"ItemContent","nord-item-content","Item Content holds the textual content of an Item,\ntypically an Item Title and an\nItem Description. It grows to fill the\navailable space.",{"name":2120,"tagName":2121,"description":2122},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":2124,"tagName":2125,"description":2126},"ItemFooter","nord-item-footer","Item Footer spans the full width at the bottom of an Item,\nuseful for a row of metadata or trailing actions.",{"name":2128,"tagName":2129,"description":2130},"ItemGroup","nord-item-group","Item Group stacks a set of Item rows vertically and\nexposes them to assistive technology as a list. Separate individual items\nwith Item Separator.",{"name":2132,"tagName":2133,"description":2134},"ItemHeader","nord-item-header","Item Header spans the full width at the top of an Item,\nuseful for a leading image or a row of metadata.",{"name":2136,"tagName":2137,"description":2138},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":2140,"tagName":2141,"description":2142},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":2144,"tagName":2145,"description":2146},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":2148,"tagName":2149,"description":2150,"category":1913,"status":1872,"isNew":1384,"lightDom":1388,"parts":2151},"Kbd","nord-kbd","Kbd is used to display a keyboard key, such as a shortcut or a key the user\nshould press. Group related keys together with Kbd Group.",[2152],{"name":2153,"tagName":2154,"description":2155},"KbdGroup","nord-kbd-group","Kbd Group lays out a set of Kbd keys together, for example\nto represent a multi-key shortcut such as \u003Ckbd>Ctrl\u003C\u002Fkbd> \u003Ckbd>K\u003C\u002Fkbd>.",{"name":2157,"tagName":2158,"description":2159,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Layout","nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":2161,"tagName":2162,"description":2163,"category":1925,"status":1872,"isNew":1384,"lightDom":1384},"Message","nord-message","Message represents a specific item within a collection,\nsuch as notifications, tasks or conversations. Message\ncan be placed directly inside a dropdown component.",{"name":2165,"tagName":2166,"description":2167,"category":1918,"status":1872,"isNew":1384,"lightDom":1388},"Meter","nord-meter","Meter is a graphical display of a numeric value within a known range,\nsuch as disk usage, a battery level or a score. Unlike Progress Bar, it\nrepresents a static measurement rather than the completion of a task.",{"name":2169,"tagName":2170,"description":2171,"category":1997,"status":1872,"isNew":1384,"lightDom":1384},"Modal","nord-modal","Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",{"name":2173,"tagName":2174,"description":2175,"category":2176,"status":1872,"isNew":1384,"lightDom":1384,"parts":2177},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.","navigation",[2178,2182,2186],{"name":2179,"tagName":2180,"description":2181},"NavGroup","nord-nav-group","Navigation group includes all the actions or items in a single\ngroup and is used for grouping items into related categories.",{"name":2183,"tagName":2184,"description":2185},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":2187,"tagName":2188,"description":2189},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":2191,"tagName":2192,"description":2193,"category":1918,"status":1872,"isNew":1384,"lightDom":1384,"parts":2194},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[2195],{"name":2196,"tagName":2197,"description":2198},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":2200,"tagName":2201,"description":2202,"category":1908,"status":1872,"isNew":1384,"lightDom":1388},"NumberField","nord-number-field","Number Field is a control for entering a numeric value, with decrement and\nincrement stepper buttons, optional drag-to-scrub, and locale-aware\nformatting. It ports the behaviour of Base UI's Number Field: arrow\u002FPage\nstepping, Home\u002FEnd to the bounds, press-and-hold auto-repeat, optional\nwheel\u002Fscrub, clamping, and Intl.NumberFormat formatting.\n\nNumber Field is a control only — it has no built-in label, hint or error.\nCompose it inside a Field with a\nField Label to give it a label, hint and error,\nthe same way you would a native input.\n\nFORM PARTICIPATION: the value is submitted as the raw numeric string under the\nhost name via FormDataController (the inner input has no name, avoiding a\ndouble submit). Unlike Base UI there is no hidden native number input, and —\nlike the other new Nord controls — Number Field does NOT use\nElementInternals, so it performs no native constraint validation: required,\nmin, max and step are NOT enforced as form-blocking validity. min\u002Fmax\ngovern interactive stepping and (unless allow-out-of-range is set) clamp the\nvalue; required only surfaces as required\u002Faria-required on the inner input\nfor assistive technology. Authors must validate constraints themselves and\nreflect failures via invalid and a nord-field-error.\n\nACCESSIBILITY NOTE: the inner control is a text input (with inputmode) and\naria-roledescription=\"Number field\", NOT role=\"spinbutton\" and NOT a\nnative type=\"number\". A text input lets us show locale-formatted text\n(currency, percent, grouping) while keeping full text editing — assistive tech\nreads the formatted value from the input's text. We do NOT add\naria-valuenow\u002Fvaluemin\u002Fvaluemax\u002Fvaluetext: those are only valid on a\nrange role (e.g. spinbutton\u002Fslider) and would fail aria-allowed-attr\nvalidation on a text input. This mirrors what Base UI's NumberFieldInput\nactually ships (only aria-roledescription).",{"name":2204,"tagName":2205,"description":2206,"category":1908,"status":1872,"isNew":1384,"lightDom":1388},"OtpField","nord-otp-field","OTP Field is a segmented one-time-code input: it renders length individual\ncharacter cells plus a visually-hidden input that holds the full value, enabling\nSMS \u002F keychain autofill and native pattern\u002Frequired validation. Typing fills\nand auto-advances, Backspace clears and moves back, the arrow keys navigate, and\npasting a code distributes its characters across the cells.\n\nOTP Field is a control only — it has no built-in label, hint or error. Compose\nit inside a Field with a Field Label\n(connected with for) to give it an accessible name, helper text and an error\nmessage, exactly like a native input.",{"name":2208,"tagName":2209,"description":2210,"category":2176,"status":1872,"isNew":1384,"lightDom":1384,"parts":2211},"Outline","nord-outline","Outline is an in-page table of contents that lists a page's headings and\nhighlights the section currently in view as you scroll.\n\nProvide Outline Item children, or point for at\na container to build the list from its headings.",[2212],{"name":2213,"tagName":2214,"description":2215},"OutlineItem","nord-outline-item","Outline Item is a single link within an Outline. It\npoints at an in-page heading via its href and indents according to its\nlevel. Its active state is managed by the parent Outline — you normally\ndon't set it yourself.",{"name":2217,"tagName":2218,"description":2219,"category":2176,"status":1872,"isNew":1384,"lightDom":1388,"parts":2220},"Pagination","nord-pagination","Pagination is the navigation root for a paginated collection. It is\ncomposition-first: it owns no page state, renders no controls, and emits no\nevents. Your app owns the page state, URL\u002Fquery syncing, cursors and any data\nfetching; Nord supplies the semantic\u002Flayout primitives, the styling and the\npaginate() math utility for building the page window.\n\nAs a root it is a navigation landmark — it sets role=\"navigation\" and a\ndefault accessible label so screen-reader users can jump to it. Compose the\nlower-level primitives inside it:\n\n- Pagination Content — the list row.\n- Pagination Item — a slot in the row.\n- Pagination Link — a page link (set current).\n- Pagination Previous — the previous control.\n- Pagination Next — the next control.\n- Pagination Ellipsis — the collapsed-pages marker.\n\nBring your own interactive element — an \u003Ca> (e.g. a framework \u003CLink> \u002F\n\u003CNuxtLink>) or a nord-button — and own its href, navigation and\ndisabled state. See the framework adapters in the docs.",[2221,2225,2229,2233,2237,2241],{"name":2222,"tagName":2223,"description":2224},"PaginationContent","nord-pagination-content","The list container for composed Pagination controls.\nLays its Pagination Item children out in a row.\n\nPlace it inside Pagination, which is already the\nnavigation landmark (it sets role=\"navigation\" and an accessible label).\nDo not add your own \u003Cnav> wrapper — a second landmark around the same\ncontrols would be a duplicate that screen-reader users have to wade through.",{"name":2226,"tagName":2227,"description":2228},"PaginationEllipsis","nord-pagination-ellipsis","The collapsed-pages marker (…) in a composed Pagination.\nThe glyph is decorative; a visually-hidden label gives it meaning for\nassistive tech. Set label to localise it.",{"name":2230,"tagName":2231,"description":2232},"PaginationItem","nord-pagination-item","A single slot in a composed Pagination Content\nrow. Wrap each control — a Pagination Link,\nPagination Previous, Pagination Next\nor Pagination Ellipsis — in its own item.",{"name":2234,"tagName":2235,"description":2236},"PaginationLink","nord-pagination-link","A page link in a composed Pagination. A layout\nwrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink> for crawlable, SSR-friendly links) or a nord-button. Set\ncurrent on the link for the active page; it mirrors aria-current=\"page\"\nonto the interactive child so assistive tech announces it.",{"name":2238,"tagName":2239,"description":2240},"PaginationNext","nord-pagination-next","The \"next page\" control in a composed Pagination. A\nlayout wrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no next page.",{"name":2242,"tagName":2243,"description":2244},"PaginationPrevious","nord-pagination-previous","The \"previous page\" control in a composed Pagination.\nA layout wrapper around your own interactive element — provide an \u003Ca>\n(e.g. a framework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no previous page.",{"name":2246,"tagName":2247,"description":2248,"category":1997,"status":1872,"isNew":1384,"lightDom":1384},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":2250,"tagName":2251,"description":2252,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"Progress","nord-progress","Progress component is used to display a circular pie-chart style progress indicator.\nYou can customize the size and color of the progress indicator with the\nprovided properties.",{"name":2254,"tagName":2255,"description":2256,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"ProgressBar","nord-progress-bar","Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",{"name":2258,"tagName":2259,"description":2260,"category":1913,"status":1872,"isNew":1384,"lightDom":1384},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":2262,"tagName":2263,"description":2264,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Radio","nord-radio","Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",{"name":2266,"tagName":2267,"description":2268,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Range","nord-range","Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",{"name":2270,"tagName":2271,"description":2272,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"ScrollArea","nord-scroll-area","Scroll Area is a container that wraps overflowing content in a custom scroll\nviewport with consistently-styled scrollbars. Native scrollbars are hidden and\nreplaced with a thin overlay thumb that appears on hover or while scrolling.\n\nIt also exposes the distance from each edge as CSS custom properties\n(--scroll-area-overflow-*), which can drive an edge-fade mask on\n::part(viewport) — see the docs example.\n\nThe scroll machinery lives in shadow DOM; slot your content directly inside.",{"name":2274,"tagName":2275,"description":2276,"category":1925,"status":1872,"isNew":1384,"lightDom":1384,"parts":2277},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[2278],{"name":2279,"tagName":2280,"description":2281},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":2283,"tagName":2284,"description":2285,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Select","nord-select","Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",{"name":2287,"tagName":2288,"description":2289,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"Skeleton","nord-skeleton","Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",{"name":2291,"tagName":2292,"description":2293,"category":1918,"status":1872,"isNew":1384,"lightDom":1384},"Spinner","nord-spinner","Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",{"name":2295,"tagName":195,"description":2296,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"Stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":2298,"tagName":2299,"description":2300,"category":2176,"status":1872,"isNew":1384,"lightDom":1384,"parts":2301},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[2302,2306],{"name":2303,"tagName":2304,"description":2305},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":2307,"tagName":2308,"description":2309},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":2311,"tagName":2312,"description":2313,"category":2109,"status":1872,"isNew":1384,"lightDom":1384},"Table","nord-table","Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",{"name":2315,"tagName":2316,"description":2317,"category":1913,"status":1872,"isNew":1384,"lightDom":1384,"parts":2318},"Tag","nord-tag","Tags represent a set of keywords that help label, categorize,\nand organize objects. Commonly used to signify the attributes of an object.",[2319],{"name":2320,"tagName":2321,"description":2322},"TagGroup","nord-tag-group","Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.",{"name":2324,"tagName":2325,"description":2326,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Textarea","nord-textarea","Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",{"name":2328,"tagName":2329,"description":2330,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"TimePicker","nord-time-picker","Time Picker pairs the browser's native time field with a dropdown of quick\noptions, generated at a configurable interval between start and end.\nThe native field handles typing, locale-aware display and validation; the\ndropdown is a shortcut for common times.\n\nThe value is held in ISO HH:mm format.\n\nLike a native input, Time Picker is a control only — it has no built-in\nlabel, hint or error. Compose it inside a Field (with a\nField Label, Field Description\nand Field Error) to label it and add help or error text.",{"name":2332,"tagName":2333,"description":2334,"category":1918,"status":1872,"isNew":1384,"lightDom":1384,"parts":2335},"Toast","nord-toast","Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",[2336],{"name":2337,"tagName":2338,"description":2339},"ToastGroup","nord-toast-group","Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",{"name":2341,"tagName":2342,"description":2343,"category":1908,"status":1872,"isNew":1384,"lightDom":1384},"Toggle","nord-toggle","Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",{"name":2345,"tagName":2346,"description":2347,"category":1997,"status":1872,"isNew":1384,"lightDom":1384},"Tooltip","nord-tooltip","Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",{"name":2349,"tagName":2350,"description":2351,"category":1894,"status":1872,"isNew":1384,"lightDom":1384},"TopBar","nord-top-bar","Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",{"name":2353,"tagName":2354,"description":2355,"category":1913,"status":1872,"isNew":1384,"lightDom":1384},"Truncate","nord-truncate","Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.",{"name":2357,"tagName":2358,"description":2359,"category":1913,"status":1872,"isNew":1384,"lightDom":1384},"VisuallyHidden","nord-visually-hidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",{"type":2361,"name":421,"html":2362},"framework","\u003Cdiv class=\"n-reset\">\n  \u003Ch1>The quick brown fox jumps over the lazy dog\u003C\u002Fh1>\n  \u003Ch2>The quick brown fox jumps over the lazy dog\u003C\u002Fh2>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Ch4>The quick brown fox jumps over the lazy dog\u003C\u002Fh4>\n  \u003Ch5>The quick brown fox jumps over the lazy dog\u003C\u002Fh5>\n  \u003Ch6>The quick brown fox jumps over the lazy dog\u003C\u002Fh6>\n  \u003Cp>\n    Lorem ipsum dolor sit amet \u003Ca href=\"#\">consectetur adipisicing\u003C\u002Fa> elit. Deserunt amet ipsam enim sed sequi\n    voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad \u003Ccode>consequuntur veniam\u003C\u002Fcode>? Fuga\n    impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. \u003Ca href=\"#\">Architecto quasi\u003C\u002Fa>, incidunt eum ad, rerum\n    dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam\n    totam.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch2>The quick brown fox \u003Ca href=\"#\">jumps over the\u003C\u002Fa> lazy dog\u003C\u002Fh2>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Cpre>\u003Ccode><link rel=\"stylesheet\" href=\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Ftokens\u002F2.0.4\u002Ftokens.custom-properties.css\" integrity=\"sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E\" crossorigin=\"anonymous\" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Ch4>The quick brown fox jumps over the lazy dog\u003C\u002Fh4>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch5>The quick brown fox jumps over the lazy dog\u003C\u002Fh5>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch6>The quick brown fox jumps over the lazy dog\u003C\u002Fh6>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cul>\n    \u003Cli>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio\n      consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut\n      fugit?\n    \u003C\u002Fli>\n    \u003Cli>\n      Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga\n      deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.\n    \u003C\u002Fli>\n    \u003Cli>\n      Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!\n      Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil\n      laboriosam.\n    \u003C\u002Fli>\n    \u003Cli>\n      Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque\n      accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae expedita maiores\n      deserunt.\n    \u003C\u002Fli>\n    \u003Cli>\n      Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia\n      pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Col>\n    \u003Cli>\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,\n      laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.\n    \u003C\u002Fli>\n    \u003Cli>\n      Quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem\n      perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum\n      est?\n    \u003C\u002Fli>\n    \u003Cli>\n      Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt\n      ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!\n    \u003C\u002Fli>\n    \u003Cli>\n      Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus\n      at, dolore illum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum\n      nesciunt?\n    \u003C\u002Fli>\n    \u003Cli>\n      Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,\n      numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,\n      temporibus.\n    \u003C\u002Fli>\n  \u003C\u002Fol>\n  \u003Cdl>\n    \u003Cdt>Lorem ipsum dolor sit amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil\n      praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.\n    \u003C\u002Fdd>\n    \u003Cdt>Lorem ipsum dolor sit amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque\n      possimus ullam perferendis, neque velit?\n    \u003C\u002Fdd>\n    \u003Cdt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique\n      sequi voluptatibus, inventore optio asperiores voluptatem sed?\n    \u003C\u002Fdd>\n  \u003C\u002Fdl>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic\n    \u003Cem>officiis natus itaque dicta praesentium laborum\u003C\u002Fem>, optio \u003Cb>reprehenderit quas est nihil\u003C\u002Fb>, pariatur, porro\n    nostrum facere ea molestias debitis quia!\n  \u003C\u002Fp>\n  \u003Cblockquote>\n    \u003Cp>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore\n      aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?\n    \u003C\u002Fp>\n    \u003Ccite>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium\n      dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?\n    \u003C\u002Fcite>\n  \u003C\u002Fblockquote>\n  \u003Csmall>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum\n    provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.\n  \u003C\u002Fsmall>\n\u003C\u002Fdiv>\n",{"type":2361,"name":467,"html":2364},"\u003C!-- Typescale -->\n\u003Ch1 class=\"n-typescale-xxxl\">The quick brown fox\u003C\u002Fh1>\n\u003Ch2 class=\"n-typescale-xxl\">The quick brown fox\u003C\u002Fh2>\n\u003Ch3 class=\"n-typescale-xl\">The quick brown fox\u003C\u002Fh3>\n\u003Ch4 class=\"n-typescale-l\">The quick brown fox\u003C\u002Fh4>\n\u003Ch5 class=\"n-typescale-m\">The quick brown fox\u003C\u002Fh5>\n\u003Ch6 class=\"n-typescale-s\">The quick brown fox\u003C\u002Fh6>\n",{"type":2361,"name":484,"html":2366},"\u003Cdiv class=\"n-typeset\">\n  \u003Ch1>The quick brown fox jumps over the lazy dog\u003C\u002Fh1>\n  \u003Ch2>The quick brown fox jumps over the lazy dog\u003C\u002Fh2>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Ch4>The quick brown fox jumps over the lazy dog\u003C\u002Fh4>\n  \u003Ch5>The quick brown fox jumps over the lazy dog\u003C\u002Fh5>\n  \u003Ch6>The quick brown fox jumps over the lazy dog\u003C\u002Fh6>\n  \u003Cp>\n    Lorem ipsum dolor sit amet \u003Ca href=\"#\">consectetur adipisicing\u003C\u002Fa> elit. Deserunt amet ipsam enim sed sequi\n    voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad \u003Ccode>consequuntur veniam\u003C\u002Fcode>? Fuga\n    impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. \u003Ca href=\"#\">Architecto quasi\u003C\u002Fa>, incidunt eum ad, rerum\n    dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam\n    totam.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch2>The quick brown fox \u003Ca href=\"#\">jumps over the\u003C\u002Fa> lazy dog\u003C\u002Fh2>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Cpre>\u003Ccode><link rel=\"stylesheet\" href=\"https:\u002F\u002Fnordcdn.net\u002Fds\u002Ftokens\u002F2.0.4\u002Ftokens.custom-properties.css\" integrity=\"sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E\" crossorigin=\"anonymous\" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Ch4>The quick brown fox jumps over the lazy dog\u003C\u002Fh4>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch5>The quick brown fox jumps over the lazy dog\u003C\u002Fh5>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa\n    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch6>The quick brown fox jumps over the lazy dog\u003C\u002Fh6>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi\n    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.\n  \u003C\u002Fp>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cul>\n    \u003Cli>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio\n      consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut\n      fugit?\n    \u003C\u002Fli>\n    \u003Cli>\n      Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga\n      deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.\n    \u003C\u002Fli>\n    \u003Cli>\n      Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!\n      Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil\n      laboriosam.\n    \u003C\u002Fli>\n    \u003Cli>\n      Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque\n      accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae expedita maiores\n      deserunt.\n    \u003C\u002Fli>\n    \u003Cli>\n      Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia\n      pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Col>\n    \u003Cli>\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,\n      laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.\n    \u003C\u002Fli>\n    \u003Cli>\n      Quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem\n      perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum\n      est?\n    \u003C\u002Fli>\n    \u003Cli>\n      Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt\n      ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!\n    \u003C\u002Fli>\n    \u003Cli>\n      Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus\n      at, dolore illum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum\n      nesciunt?\n    \u003C\u002Fli>\n    \u003Cli>\n      Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,\n      numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,\n      temporibus.\n    \u003C\u002Fli>\n  \u003C\u002Fol>\n  \u003Cdl>\n    \u003Cdt>Lorem ipsum dolor sit amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil\n      praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.\n    \u003C\u002Fdd>\n    \u003Cdt>Lorem ipsum dolor sit amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque\n      possimus ullam perferendis, neque velit?\n    \u003C\u002Fdd>\n    \u003Cdt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.\u003C\u002Fdt>\n    \u003Cdd>\n      Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique\n      sequi voluptatibus, inventore optio asperiores voluptatem sed?\n    \u003C\u002Fdd>\n  \u003C\u002Fdl>\n  \u003Ch3>The quick brown fox jumps over the lazy dog\u003C\u002Fh3>\n  \u003Cp>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic\n    \u003Cem>officiis natus itaque dicta praesentium laborum\u003C\u002Fem>, optio \u003Cb>reprehenderit quas est nihil\u003C\u002Fb>, pariatur, porro\n    nostrum facere ea molestias debitis quia!\n  \u003C\u002Fp>\n  \u003Cblockquote>\n    \u003Cp>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore\n      aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?\n    \u003C\u002Fp>\n    \u003Ccite>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium\n      dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?\n    \u003C\u002Fcite>\n  \u003C\u002Fblockquote>\n  \u003Csmall>\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum\n    provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.\n  \u003C\u002Fsmall>\n\u003C\u002Fdiv>\n",{"type":2361,"name":510,"html":2368},"\u003Cdl class=\"n-dl\">\n  \u003Cdt>Status\u003C\u002Fdt>\n  \u003Cdd>\u003Cmark>Success\u003C\u002Fmark>\u003C\u002Fdd>\n  \u003Cdt>Date\u003C\u002Fdt>\n  \u003Cdd>Value 2\u003C\u002Fdd>\n  \u003Cdt>Amount\u003C\u002Fdt>\n  \u003Cdd>50,00 €\u003C\u002Fdd>\n  \u003Cdt>Payment fee\u003C\u002Fdt>\n  \u003Cdd>1,75 \u003C\u002Fdd>\n  \u003Cdt>Method\u003C\u002Fdt>\n  \u003Cdd>Card\u003C\u002Fdd>\n  \u003Cdt>Identifier\u003C\u002Fdt>\n  \u003Cdd>\u003Ccode>PAY38DL19710O\u003C\u002Fcode>\u003C\u002Fdd>\n  \u003Cdt>Description\u003C\u002Fdt>\n  \u003Cdd>\n    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum adipisci cupiditate deleniti sed perferendis placeat\n    nesciunt soluta impedit, animi nisi atque sit at aliquid rem quaerat voluptas excepturi quo qui.\n  \u003C\u002Fdd>\n\u003C\u002Fdl>\n",{"type":2361,"name":535,"html":2370},"\u003Cspan class=\"n-font-size-xxxl\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-xxl\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-xl\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-l\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-m\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-s\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-size-xs\">The quick brown fox\u003C\u002Fspan>\n",{"type":2361,"name":553,"html":2372},"\u003Cspan class=\"n-font-weight-active\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-weight-heading\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-font-weight-strong\">The quick brown fox\u003C\u002Fspan>\n",{"type":2361,"name":586,"html":2374},"\u003C!-- Text on accent background -->\n\u003Cdiv class=\"n-color-accent n-color-text-on-accent\">Element\u003C\u002Fdiv>\n\n\u003C!-- Accent color text -->\n\u003Cspan class=\"n-color-accent-text\">The quick brown fox\u003C\u002Fspan>\n\n\u003C!-- Accent color fill -->\n\u003Csvg class=\"n-color-accent-fill\" viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Accent color stroke -->\n\u003Csvg class=\"n-color-accent-stroke\" viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke-width=\"8\" \u002F>\n\u003C\u002Fsvg>\n",{"type":2361,"name":604,"html":2376},"\u003C!-- Text colors -->\n\u003Cspan class=\"n-color-text\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-weak\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-weaker\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-weakest\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-accent n-color-text-on-accent\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-nav-heading\">The quick brown fox\u003C\u002Fspan>\n\n\u003C!-- Status colors -->\n\u003Cspan class=\"n-color-text-success\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-error\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-danger\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-neutral\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-neutral-strong\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-warning\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-warning-strong\">The quick brown fox\u003C\u002Fspan>\n\u003Cspan class=\"n-color-text-highlight\">The quick brown fox\u003C\u002Fspan>\n\n\u003C!-- Link color -->\n\u003Ca href=\"#\" class=\"n-color-text-link\">Element\u003C\u002Fa>\n",{"type":2361,"name":625,"html":2378},"\u003C!-- Status colors -->\n\u003Cspan class=\"n-color-status-neutral\">.n-color-status-neutral\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-warning\">.n-color-status-warning\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-highlight n-color-text-on-accent\">.n-color-status-highlight\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-danger n-color-text-on-accent\">.n-color-status-danger\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-success n-color-text-on-accent\">.n-color-status-success\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-info n-color-text-on-accent\">.n-color-status-info\u003C\u002Fspan>\n\u003Cspan class=\"n-color-status-notification n-color-text-on-accent\">.n-color-status-notification\u003C\u002Fspan>\n\n\u003C!-- Status weak colors -->\n\u003Cspan class=\"n-color-status-neutral-weak\">.n-color-status-neutral-weak\u003C\u002Fspan>\n\u003Cdiv class=\"n-color-status-warning-weak\">.n-color-status-warning-weak\u003C\u002Fdiv>\n\u003Cspan class=\"n-color-status-highlight-weak\">.n-color-status-highlight-weak\u003C\u002Fspan>\n\u003Cdiv class=\"n-color-status-danger-weak\">.n-color-status-danger-weak\u003C\u002Fdiv>\n\u003Cdiv class=\"n-color-status-success-weak\">.n-color-status-success-weak\u003C\u002Fdiv>\n\u003Cspan class=\"n-color-status-info-weak\">.n-color-status-info-weak\u003C\u002Fspan>\n\n\u003C!-- Surface colors -->\n\u003Cdiv class=\"n-color-surface\">.n-color-surface\u003C\u002Fdiv>\n\u003Cdiv class=\"n-color-surface-raised\">.n-color-surface-raised\u003C\u002Fdiv>\n\u003Cdiv class=\"n-color-surface-lowered\">.n-color-surface-lowered\u003C\u002Fdiv>\n\u003Cdiv class=\"n-color-nav-surface\">.n-color-nav-surface\u003C\u002Fdiv>\n\n\u003C!-- Background color -->\n\u003Cdiv class=\"n-color-background\">.n-color-background\u003C\u002Fdiv>\n\n\u003C!-- Button colors -->\n\u003Cdiv class=\"n-color-button\">.n-color-button\u003C\u002Fdiv>\n\u003Cdiv class=\"n-color-button-hover\">.n-color-button-hover\u003C\u002Fdiv>\n\n\u003C!-- Active color -->\n\u003Cdiv class=\"n-color-active\">.n-color-active\u003C\u002Fdiv>\n",{"type":2361,"name":705,"html":2380},"\u003C!-- Default border -->\n\u003Cdiv class=\"n-border-is\">.n-border-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-ie\">.n-border-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-bs\">.n-border-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-be\">.n-border-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-b\">.n-border-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-i\">.n-border-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border\">.n-border\u003C\u002Fdiv>\n\n\u003C!-- Strong border -->\n\u003Cdiv class=\"n-border-strong-is\">.n-border-strong-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-ie\">.n-border-strong-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-bs\">.n-border-strong-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-be\">.n-border-strong-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-b\">.n-border-strong-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-i\">.n-border-strong-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong\">.n-border-strong\u003C\u002Fdiv>\n\n\u003C!-- Hover border -->\n\u003Cdiv class=\"n-border-hover-is\">.n-border-hover-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-ie\">.n-border-hover-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-bs\">.n-border-hover-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-be\">.n-border-hover-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-b\">.n-border-hover-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-i\">.n-border-hover-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover\">.n-border-hover\u003C\u002Fdiv>\n\n\u003C!-- Default dashed border -->\n\u003Cdiv class=\"n-border-d-is\">.n-border-d-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d-ie\">.n-border-d-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d-bs\">.n-border-d-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d-be\">.n-border-d-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d-b\">.n-border-d-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d-i\">.n-border-d-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-d\">.n-border-d\u003C\u002Fdiv>\n\n\u003C!-- Strong dashed border -->\n\u003Cdiv class=\"n-border-strong-d-is\">.n-border-strong-d-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d-ie\">.n-border-strong-d-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d-bs\">.n-border-strong-d-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d-be\">.n-border-strong-d-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d-b\">.n-border-strong-d-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d-i\">.n-border-strong-d-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-strong-d\">.n-border-strong-d\u003C\u002Fdiv>\n\n\u003C!-- Hover dashed border -->\n\u003Cdiv class=\"n-border-hover-d-is\">.n-border-hover-d-is\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d-ie\">.n-border-hover-d-ie\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d-bs\">.n-border-hover-d-bs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d-be\">.n-border-hover-d-be\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d-b\">.n-border-hover-d-b\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d-i\">.n-border-hover-d-i\u003C\u002Fdiv>\n\u003Cdiv class=\"n-border-hover-d\">.n-border-hover-d\u003C\u002Fdiv>\n",{"type":2361,"name":728,"html":2382},"\u003Cdiv class=\"n-padding-m n-border-radius-sharp\">.n-border-radius-sharp\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-border-radius-s\">.n-border-radius-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-border-radius\">.n-border-radius\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-border-radius-pill\">.n-border-radius-pill\u003C\u002Fdiv>\n\u003Cdiv\n  class=\"n-padding-m n-stack-horizontal n-border-radius-circle\"\n  style=\"max-inline-size: max-content; aspect-ratio: 1\"\n>\n  \u003Cspan class=\"n-center\">.n-border-radius-circle\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",{"type":2361,"name":751,"html":2384},"\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow\">.n-box-shadow\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow-header\">.n-box-shadow-header\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow-card\">.n-box-shadow-card\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow-nav\">.n-box-shadow-nav\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow-popout\">.n-box-shadow-popout\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m n-color-surface n-box-shadow-modal\">.n-box-shadow-modal\u003C\u002Fdiv>\n",{"type":2361,"name":783,"html":2386},"\u003C!-- Icon color -->\n\u003Csvg class=\"n-color-icon\" viewBox=\"0 0 100 100\">\n  \u003Ccircle fill=\"currentColor\" cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Icon hover color -->\n\u003Csvg class=\"n-color-icon-hover\" viewBox=\"0 0 100 100\">\n  \u003Ccircle fill=\"currentColor\" cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Small icon -->\n\u003Csvg class=\"n-size-icon-s\" viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Medium icon -->\n\u003Csvg class=\"n-size-icon-m\" viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n\n\u003C!-- Large icon -->\n\u003Csvg class=\"n-size-icon-l\" viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" \u002F>\n\u003C\u002Fsvg>\n",{"type":2361,"name":953,"html":2388},"\u003C!-- Default vertical stack -->\n\u003Csection class=\"n-stack\">\n  \u003Cdiv>.n-stack\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with XS size gap -->\n\u003Csection class=\"n-stack n-gap-xs\">\n  \u003Cdiv>.n-stack .n-gap-xs\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-xs\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with S size gap -->\n\u003Csection class=\"n-stack n-gap-s\">\n  \u003Cdiv>.n-stack .n-gap-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with M size gap (the default) -->\n\u003Csection class=\"n-stack\">\n  \u003Cdiv>.n-stack .n-gap-m\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-m\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with L size gap -->\n\u003Csection class=\"n-stack n-gap-l\">\n  \u003Cdiv>.n-stack .n-gap-l\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-l\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with XL size gap -->\n\u003Csection class=\"n-stack n-gap-xl\">\n  \u003Cdiv>.n-stack .n-gap-xl\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-xl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with XXL size gap -->\n\u003Csection class=\"n-stack n-gap-xxl\">\n  \u003Cdiv>.n-stack .n-gap-xxl\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-xxl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack with no gap -->\n\u003Csection class=\"n-stack n-gap-none\">\n  \u003Cdiv>.n-stack .n-gap-none\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-gap-none\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with vertical centering (the default) -->\n\u003Csection class=\"n-stack-horizontal\">\n  \u003Cdiv>.n-stack-horizontal\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal\u003Cbr \u002F>.n-stack-horizontal\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack that is vertically aligned to start -->\n\u003Csection class=\"n-stack-horizontal-s\">\n  \u003Cdiv>.n-stack-horizontal-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal-s\u003Cbr \u002F>.n-stack-horizontal-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack that is vertically aligned to end -->\n\u003Csection class=\"n-stack-horizontal-e\">\n  \u003Cdiv>.n-stack-horizontal-e\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal-e\u003Cbr \u002F>.n-stack-horizontal-e\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with XS size gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-xs\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with S size gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-s\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with M size gap (the default) -->\n\u003Csection class=\"n-stack-horizontal\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-m\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-m\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with L size gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-l\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-l\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-l\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with XL size gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-xl\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-xl\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-xl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with XXL size gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-xxl\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-xxl\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-xxl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack with no gap -->\n\u003Csection class=\"n-stack-horizontal n-gap-none\">\n  \u003Cdiv>.n-stack-horizontal .n-gap-none\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-gap-none\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with no wrap -->\n\u003Csection class=\"n-stack-horizontal n-stack-no-wrap\">\n  \u003Cdiv>.n-stack-horizontal .n-stack-no-wrap\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-stack-no-wrap\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack that is horizontally aligned to center -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-center\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-center\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-center\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack that is horizontally aligned to end -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-end\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-end\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-end\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack that is horizontally spaced between -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-between\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-between\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-between\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack that is horizontally spaced evenly -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-evenly\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-evenly\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-evenly\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack that is horizontally spaced around -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-around\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-around\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-around\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack that is vertically aligned to the baseline -->\n\u003Csection class=\"n-stack-horizontal n-items-baseline\">\n  \u003Cdiv class=\"n-font-size-s\">.n-stack-horizontal .n-items-baseline\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-items-baseline\u003Cbr \u002F>.n-stack-horizontal .n-items-baseline\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Horizontal stack that is vertically aligned to stretch -->\n\u003Csection class=\"n-stack-horizontal n-items-stretch\">\n  \u003Cdiv>.n-stack-horizontal .n-items-stretch\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-items-stretch\u003Cbr \u002F>.n-stack-horizontal .n-items-stretch\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack that is vertically aligned to center -->\n\u003Csection class=\"n-stack n-justify-center\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack .n-justify-center\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-justify-center\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Vertical stack that is vertically aligned to end -->\n\u003Csection class=\"n-stack n-justify-end\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack .n-justify-end\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-justify-end\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Vertical stack that is vertically spaced between -->\n\n\u003Csection class=\"n-stack n-justify-between\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack .n-justify-between\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-justify-between\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Vertical stack that is vertically spaced evenly -->\n\n\u003Csection class=\"n-stack n-justify-evenly\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack .n-justify-evenly\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-justify-evenly\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Vertical stack that is vertically spaced around -->\n\n\u003Csection class=\"n-stack n-justify-around\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack .n-justify-around\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-justify-around\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Vertical stack that is horizontally aligned to start -->\n\u003Csection class=\"n-stack n-items-start\">\n  \u003Cdiv>.n-stack .n-items-start\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-items-start\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- Vertical stack that is horizontally aligned to end -->\n\u003Csection class=\"n-stack n-items-end\">\n  \u003Cdiv>.n-stack .n-items-end\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack .n-items-end\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack that is horizontally spaced around and vertically aligned to end -->\n\n\u003Csection class=\"n-stack-horizontal n-justify-around n-items-end\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv>.n-stack-horizontal .n-justify-around .n-items-end\u003C\u002Fdiv>\n  \u003Cdiv>.n-stack-horizontal .n-justify-around .n-items-end\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with items that are flexed to 1 -->\n\u003Csection class=\"n-stack-horizontal\">\n  \u003Cdiv class=\"n-flex-1\">.n-flex-1\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-flex-1\">.n-flex-1\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Horizontal stack with items that are flexed to auto -->\n\u003Csection class=\"n-stack-horizontal\">\n  \u003Cdiv class=\"n-flex-auto\">.n-flex-auto\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-flex-auto\">.n-flex-auto (with very long content)\u003C\u002Fdiv>\n\u003C\u002Fsection>\n",{"type":2361,"name":1014,"html":2390},"\u003C!-- Default 12 column grid -->\n\u003Csection class=\"n-grid\">\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with 8 columns -->\n\u003Csection class=\"n-grid-8\">\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-8\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with 6 columns -->\n\u003Csection class=\"n-grid-6\">\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-6\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with 4 columns -->\n\u003Csection class=\"n-grid-4\">\n  \u003Cdiv>.n-grid-4\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-4\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-4\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-4\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with 3 columns -->\n\u003Csection class=\"n-grid-3\">\n  \u003Cdiv>.n-grid-3\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with 2 columns -->\n\u003Csection class=\"n-grid-2\">\n  \u003Cdiv>.n-grid-2\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XS size gap -->\n\u003Csection class=\"n-grid-2 n-gap-xs\">\n  \u003Cdiv>.n-grid-2 .n-gap-xs\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2 .n-gap-xs\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with S size gap -->\n\u003Csection class=\"n-grid-2 n-gap-s\">\n  \u003Cdiv>.n-grid-2 .n-gap-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2 .n-gap-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with M size gap (the default) -->\n\u003Csection class=\"n-grid-2\">\n  \u003Cdiv>.n-grid-2\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with L size gap -->\n\u003Csection class=\"n-grid-2 n-gap-l\">\n  \u003Cdiv>.n-grid-2 .n-gap-l\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2 .n-gap-l\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XL size gap -->\n\u003Csection class=\"n-grid-2 n-gap-xl\">\n  \u003Cdiv>.n-grid-2 .n-gap-xl\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2 .n-gap-xl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XXL size gap -->\n\u003Csection class=\"n-grid-2 n-gap-xxl\">\n  \u003Cdiv>.n-grid-2 .n-gap-xxl\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-2 .n-gap-xxl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with no gap -->\n\u003Csection class=\"n-grid-2 n-gap-none\">\n  \u003Cdiv>.n-grid-none .n-gap-none\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-none .n-gap-none\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XL container -->\n\u003Csection class=\"n-grid-3 n-container-xl\">\n  \u003Cdiv>.n-grid-3 .n-container-xl\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xl\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xl\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with L container (the default) -->\n\u003Csection class=\"n-grid-3 n-container\">\n  \u003Cdiv>.n-grid-3 .n-container\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with M container -->\n\u003Csection class=\"n-grid-3 n-container-m\">\n  \u003Cdiv>.n-grid-3 .n-container-m\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-m\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-m\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with S container -->\n\u003Csection class=\"n-grid-3 n-container-s\">\n  \u003Cdiv>.n-grid-3 .n-container-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-s\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-s\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XS container -->\n\u003Csection class=\"n-grid-3 n-container-xs\">\n  \u003Cdiv>.n-grid-3 .n-container-xs\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xs\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xs\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with XXS container -->\n\u003Csection class=\"n-grid-3 n-container-xxs\">\n  \u003Cdiv>.n-grid-3 .n-container-xxs\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xxs\u003C\u002Fdiv>\n  \u003Cdiv>.n-grid-3 .n-container-xxs\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr \u002F>\n\n\u003C!-- Grid with custom container -->\n\u003Csection class=\"n-grid-3\" style=\"block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv class=\"n-grid-center-i\">.n-grid-center-i\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-grid-center-b\">.n-grid-center-b\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-grid-center\">.n-grid-center\u003C\u002Fdiv>\n\u003C\u002Fsection>\n",{"type":2361,"name":1162,"html":2392},"\u003C!-- Margin inline start (left) -->\n\u003Cdiv class=\"n-margin-is-xs\">.n-margin-is-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-s\">.n-margin-is-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-m\">.n-margin-is-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-l\">.n-margin-is-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-xl\">.n-margin-is-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-xxl\">.n-margin-is-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin inline end (right) -->\n\u003Cdiv class=\"n-margin-ie-xs\">.n-margin-ie-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-s\">.n-margin-ie-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-m\">.n-margin-ie-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-l\">.n-margin-ie-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-xl\">.n-margin-ie-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-xxl\">.n-margin-ie-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin block start (top) -->\n\u003Cdiv class=\"n-margin-bs-xs\">.n-margin-bs-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-bs-s\">.n-margin-bs-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-bs-m\">.n-margin-bs-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-bs-l\">.n-margin-bs-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-bs-xl\">.n-margin-bs-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-bs-xxl\">.n-margin-bs-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin block end (bottom) -->\n\u003Cdiv class=\"n-margin-be-xs\">.n-margin-be-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-be-s\">.n-margin-be-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-be-m\">.n-margin-be-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-be-l\">.n-margin-be-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-be-xl\">.n-margin-be-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-be-xxl\">.n-margin-be-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin inline (left and right) -->\n\u003Cdiv class=\"n-margin-i-xs\">.n-margin-i-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-i-s\">.n-margin-i-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-i-m\">.n-margin-i-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-i-l\">.n-margin-i-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-i-xl\">.n-margin-i-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-i-xxl\">.n-margin-i-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin block (top and bottom) -->\n\u003Cdiv class=\"n-margin-b-xs\">.n-margin-b-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-b-s\">.n-margin-b-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-b-m\">.n-margin-b-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-b-l\">.n-margin-b-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-b-xl\">.n-margin-b-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-b-xxl\">.n-margin-b-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin all sides -->\n\u003Cdiv class=\"n-margin-xs\">.n-margin-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-s\">.n-margin-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-m\">.n-margin-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-l\">.n-margin-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-xl\">.n-margin-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-xxl\">.n-margin-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Margin auto -->\n\u003Cdiv class=\"n-margin-i-auto\">.n-margin-i-auto\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-is-auto\">.n-margin-is-auto\u003C\u002Fdiv>\n\u003Cdiv class=\"n-margin-ie-auto\">.n-margin-ie-auto\u003C\u002Fdiv>\n\n\u003Csection style=\"display: flex; flex-direction: column; block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv class=\"n-margin-b-auto\">.n-margin-b-auto\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-margin-bs-auto\">.n-margin-bs-auto\u003C\u002Fdiv>\n  \u003Cdiv class=\"n-margin-be-auto\">.n-margin-be-auto\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection style=\"display: flex; flex-direction: column; block-size: calc(var(--n-size-icon-xxl) * 3)\">\n  \u003Cdiv class=\"n-margin-auto\">.n-margin-auto\u003C\u002Fdiv>\n\u003C\u002Fsection>\n",{"type":2361,"name":1187,"html":2394},"\u003C!-- Padding inline start (left) -->\n\u003Cdiv class=\"n-padding-is-xs\">.n-padding-is-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-is-s\">.n-padding-is-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-is-m\">.n-padding-is-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-is-l\">.n-padding-is-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-is-xl\">.n-padding-is-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-is-xxl\">.n-padding-is-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding inline end (right) -->\n\u003Cdiv class=\"n-padding-ie-xs\">.n-padding-ie-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-ie-s\">.n-padding-ie-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-ie-m\">.n-padding-ie-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-ie-l\">.n-padding-ie-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-ie-xl\">.n-padding-ie-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-ie-xxl\">.n-padding-ie-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding block start (top) -->\n\u003Cdiv class=\"n-padding-bs-xs\">.n-padding-bs-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-bs-s\">.n-padding-bs-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-bs-m\">.n-padding-bs-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-bs-l\">.n-padding-bs-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-bs-xl\">.n-padding-bs-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-bs-xxl\">.n-padding-bs-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding block end (bottom) -->\n\u003Cdiv class=\"n-padding-be-xs\">.n-padding-be-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-be-s\">.n-padding-be-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-be-m\">.n-padding-be-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-be-l\">.n-padding-be-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-be-xl\">.n-padding-be-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-be-xxl\">.n-padding-be-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding inline (left and right) -->\n\u003Cdiv class=\"n-padding-i-xs\">.n-padding-i-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-i-s\">.n-padding-i-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-i-m\">.n-padding-i-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-i-l\">.n-padding-i-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-i-xl\">.n-padding-i-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-i-xxl\">.n-padding-i-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding block (top and bottom) -->\n\u003Cdiv class=\"n-padding-b-xs\">.n-padding-b-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-b-s\">.n-padding-b-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-b-m\">.n-padding-b-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-b-l\">.n-padding-b-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-b-xl\">.n-padding-b-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-b-xxl\">.n-padding-b-xxl\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n\u003C!-- Padding all sides -->\n\u003Cdiv class=\"n-padding-xs\">.n-padding-xs\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-s\">.n-padding-s\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-m\">.n-padding-m\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-l\">.n-padding-l\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-xl\">.n-padding-xl\u003C\u002Fdiv>\n\u003Cdiv class=\"n-padding-xxl\">.n-padding-xxl\u003C\u002Fdiv>\n",{"components":2396,"css":2399,"themes":2402},{"url":2397,"version":2398},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F5.0.0\u002Findex.js","5.0.0",{"url":2400,"version":2401},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F5.2.0\u002Fnord.min.css","5.2.0",{"nord":2403,"nordDark":2405,"vet":2407,"vetDark":2409},{"url":2404},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord.css",{"url":2406},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord-dark.css",{"url":2408},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet.css",{"url":2410},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet-dark.css",{"type":2361,"name":1214,"html":2412},"\u003C!-- Navigation header icon helpers -->\n\u003Cdiv class=\"n-stack n-stack-horizontal n-gap-s\">\n  \u003Cspan class=\"n-clinic-icon\">N\u003C\u002Fspan>\n  \u003Cspan class=\"n-clinic-icon\" style=\"--n-clinic-icon-color: var(--n-color-status-success)\">O\u003C\u002Fspan>\n  \u003Cspan class=\"n-clinic-icon\" style=\"--n-clinic-icon-color: var(--n-color-status-highlight)\">R\u003C\u002Fspan>\n  \u003Cspan class=\"n-clinic-icon\" style=\"--n-clinic-icon-color: var(--n-color-status-danger)\">D\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Divider -->\n\u003Chr class=\"n-divider\" \u002F>\n\n\u003C!-- Form helpers -->\n\u003Cdiv class=\"n-stack n-gap-s\">\n  \u003Clabel class=\"n-label\" for=\"input\">Label\u003C\u002Flabel>\n  \u003Cdiv id=\"hint\" class=\"n-hint\">Hint is a way to provide additional information\u003C\u002Fdiv>\n  \u003Cinput id=\"input\" class=\"n-input\" aria-describedby=\"hint\" placeholder=\"Placeholder text\" \u002F>\n\u003C\u002Fdiv>\n\n\u003C!-- Divider -->\n\u003Chr class=\"n-divider\" \u002F>\n\n\u003C!-- Form error helpers -->\n\u003Cdiv class=\"n-stack n-gap-s\">\n  \u003Clabel class=\"n-label\" for=\"input2\">Label\u003C\u002Flabel>\n  \u003Cinput id=\"input2\" class=\"n-input\" aria-invalid=\"true\" aria-describedby=\"error\" value=\"Value\" \u002F>\n  \u003Cdiv class=\"n-error\" id=\"error\" role=\"alert\">This field is required\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Sometimes you need to style a wrapper element around an \u003Cinput> e.g. when using 3rd party libraries -->\n\u003C!-- In those cases you can add `n-input` to the wrapper, and use `n-input-invalid` to style the field as invalid -->\n\u003Cdiv class=\"n-stack n-gap-s\">\n  \u003Clabel class=\"n-label\" for=\"input3\">Label\u003C\u002Flabel>\n  \u003Cdiv class=\"n-input n-input-invalid\">\n    \u003Cinput\n      id=\"input3\"\n      aria-invalid=\"true\"\n      aria-describedby=\"error3\"\n      value=\"Value\"\n      style=\"border: none; background: transparent; outline: none; display: block; width: 100%\"\n    \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"n-error\" id=\"error3\" role=\"alert\">This field is required\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Divider -->\n\u003Chr class=\"n-divider\" \u002F>\n\n\u003C!-- Counter -->\n\u003Cdiv class=\"n-stack n-stack-horizontal n-gap-s n-color-accent n-color-text-on-accent n-padding-s n-border-radius\">\n  \u003Cspan>Label\u003C\u002Fspan>\n  \u003Cspan class=\"n-counter\">12\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Divider -->\n\u003Chr class=\"n-divider\" \u002F>\n\n\u003C!-- Single line truncation -->\n\u003Cspan class=\"n-truncate\" style=\"max-width: 200px\">\n  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps\n  over the lazy dog.\n\u003C\u002Fspan>\n\n\u003C!-- Two line truncation -->\n\u003Cspan class=\"n-truncate-2\" style=\"max-width: 200px\">\n  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps\n  over the lazy dog.\n\u003C\u002Fspan>\n\n\u003C!-- Three line truncation -->\n\u003Cspan class=\"n-truncate-3\" style=\"max-width: 200px\">\n  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps\n  over the lazy dog.\n\u003C\u002Fspan>\n\n\u003C!-- Text alignment start -->\n\u003Cp class=\"n-align-start\">.n-align-start\u003C\u002Fp>\n\n\u003C!-- Text alignment center -->\n\u003Cp class=\"n-align-center\">.n-align-center\u003C\u002Fp>\n\n\u003C!-- Text alignment end -->\n\u003Cp class=\"n-align-end\">.n-align-end\u003C\u002Fp>\n\n\u003C!-- Divider -->\n\u003Chr class=\"n-divider\" \u002F>\n\n\u003C!-- Inline size full -->\n\u003C!-- Useful when you need an element to fill its container's width, especially inside constrained containers or flex layouts -->\n\u003Cdiv\n  style=\"\n    max-width: 400px;\n    border: 1px solid var(--n-color-border);\n    padding: var(--n-space-m);\n    border-radius: var(--n-border-radius-s);\n    box-sizing: border-box;\n  \"\n>\n  \u003Clabel class=\"n-label\" for=\"input4\">Input without full width\u003C\u002Flabel>\n  \u003Cinput\n    id=\"input4\"\n    class=\"n-input n-margin-bs-s n-margin-be-m\"\n    placeholder=\"Default width\"\n    style=\"box-sizing: border-box\"\n  \u002F>\n\n  \u003Clabel class=\"n-label\" for=\"input5\">Input with .n-inline-size-full\u003C\u002Flabel>\n  \u003Cinput\n    id=\"input5\"\n    class=\"n-input n-inline-size-full n-margin-bs-s\"\n    placeholder=\"Fills container width\"\n    style=\"box-sizing: border-box\"\n  \u002F>\n\u003C\u002Fdiv>\n",[2414,2416,2418,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541],{"path":2415,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Faccordion",{"path":2417,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Faside",{"path":2419,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Fautocomplete","2026-07-06",{"path":2422,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Favatar",{"path":2424,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fbadge",{"path":2426,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fbanner",{"path":2428,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fbutton",{"path":2430,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fbutton-group",{"path":2432,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fcalendar",{"path":2434,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fcard",{"path":2436,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fcheckbox",{"path":2438,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fcollapsible",{"path":2440,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Fcombobox",{"path":2442,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fcommand-menu",{"path":2444,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fdate-picker",{"path":2446,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Fdate-range-picker",{"path":2448,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fdivider",{"path":2450,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fdrawer",{"path":2452,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fdropdown",{"path":2454,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fempty-state",{"path":2456,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Ffield",{"path":2458,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ffieldset",{"path":2460,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Ffilter-bar",{"path":2462,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ffilter-date-range",{"path":2464,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ffilter-dropdown",{"path":2466,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ffooter",{"path":2468,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fheader",{"path":2470,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ficon",{"path":2472,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Finput",{"path":2474,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fitem",{"path":2476,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fkbd",{"path":2478,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Flayout",{"path":2480,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fmessage",{"path":2482,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fmeter",{"path":2484,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fmodal",{"path":2486,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fnavigation",{"path":2488,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fnotification",{"path":2490,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Fnumber-field",{"path":2492,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Fotp-field",{"path":2494,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Foutline",{"path":2496,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fpagination",{"path":2498,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fpopout",{"path":2500,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fprogress",{"path":2502,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fprogress-bar",{"path":2504,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fqrcode",{"path":2506,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fradio",{"path":2508,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Frange",{"path":2510,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Fscroll-area",{"path":2512,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fsegmented-control",{"path":2514,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Fselect",{"path":2516,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fskeleton",{"path":2518,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fspinner",{"path":2520,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fstack",{"path":2522,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftab",{"path":2524,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftable",{"path":2526,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftag",{"path":2528,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Ftextarea",{"path":2530,"isNew":1388,"updated":2420},"\u002Fcomponent-docs\u002Ftime-picker",{"path":2532,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftoast",{"path":2534,"isNew":1384,"updated":2420},"\u002Fcomponent-docs\u002Ftoggle",{"path":2536,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftooltip",{"path":2538,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Ftop-bar",{"path":2540,"isNew":1388,"updated":1386},"\u002Fcomponent-docs\u002Ftruncate",{"path":2542,"isNew":1384,"updated":1386},"\u002Fcomponent-docs\u002Fvisually-hidden",1783350315045]