CINXE.COM
Color | Mozilla Protocol
<!doctype html> <html lang="en" dir="ltr" class="no-js"> <head> <base href="https://protocol.mozilla.org/docs/fundamentals/color"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> window.frctl = { env: 'static' }; </script> <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script> <link rel="shortcut icon" href="../../theme/favicon.png" type="image/png"> <style> :root { } </style> <link rel="stylesheet" href="../../themes/mandelbrot/css/black.css?cachebust=1.10.3" type="text/css"> <link rel="stylesheet" href="../../theme/css/theme.css?cachebust=1.10.3" type="text/css"> <link rel="stylesheet" href="../../themes/mandelbrot/css/highlight.css?cachebust=1.10.3" type="text/css"> <title>Color | Mozilla Protocol</title> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="fr"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=corsproxy" data-sourceurl="https://protocol.mozilla.org/docs/fundamentals/color"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://protocol.mozilla.org/docs/fundamentals/color"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=navigationui" data-environment="prod" data-proxy-url="https://protocol-mozilla-org.translate.goog" data-proxy-full-url="https://protocol-mozilla-org.translate.goog/docs/fundamentals/color?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://protocol.mozilla.org/docs/fundamentals/color" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://protocol.mozilla.org/docs/fundamentals/color&anno=2" data-client="tr"></script> <div class="Frame" id="frame"> <div class="Frame-header"> <div class="Header"><button class="Header-button Header-navToggle" data-action="toggle-sidebar" aria-label="Toggle menu" aria-controls="navigation"> <div class="Header-navToggleIcon Header-navToggleIcon--open"> <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" /> <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z" /> </svg> </div> <div class="Header-navToggleIcon Header-navToggleIcon--closed"> <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" /> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /> </svg> </div></button> <a class="Header-title" data-pjax href="https://protocol-mozilla-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> Mozilla Protocol </a> <ul class="Header-menu"> <li class="Header-version">19.1.0</li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mozilla/protocol" title="Protocol on Github"> <img src="../../theme/img/github.svg" height="30" alt=""> </a></li> </ul> </div> </div> <div class="Frame-body" data-role="body"> <div class="Frame-panel Frame-panel--main" data-role="main"> <div class="Frame-inner" id="pjax-container"> <div class="Document"> <div class="Document-header"> <h1 class="Document-title">Color</h1> <div class="Status Status--tag"><label class="Status-label" style="background-color: darkorange; border-color: darkorange;">Draft</label> </div> </div> <div class="Document-content"> <div class="Prose"> <p>Colors are defined as named tokens so they can be consistent throughout Protocol. When using these colors in Sass, use the token variable rather than the hex value. Avoid using colors outside this palette unless you have a good reason.</p> <h2 class="docs-palette-title">Green</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e3fff3" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-05</code></li> <li><code class="language-scss">#e3fff3</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#d1ffee" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-10</code></li> <li><code class="language-scss">#d1ffee</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#b3ffe3" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-20</code></li> <li><code class="language-scss">#b3ffe3</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#88ffd1" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-30</code></li> <li><code class="language-scss">#88ffd1</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#54ffbd" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-40</code></li> <li><code class="language-scss">#54ffbd</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#3fe1b0" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-50</code></li> <li><code class="language-scss">#3fe1b0</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#2ac3a2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-60</code></li> <li><code class="language-scss">#2ac3a2</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#008787" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-70</code></li> <li><code class="language-scss">#008787</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#005e5e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-80</code></li> <li><code class="language-scss">#005e5e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#08403f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Green 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-green-90</code></li> <li><code class="language-scss">#08403f</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Blue</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#aaf2ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-05</code></li> <li><code class="language-scss">#aaf2ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#80ebff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-10</code></li> <li><code class="language-scss">#80ebff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#00ddff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-20</code></li> <li><code class="language-scss">#00ddff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#00b3f4" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-30</code></li> <li><code class="language-scss">#00b3f4</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#0090ed" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-40</code></li> <li><code class="language-scss">#0090ed</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#0060df" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-50</code></li> <li><code class="language-scss">#0060df</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#0250bb" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-60</code></li> <li><code class="language-scss">#0250bb</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#054096" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-70</code></li> <li><code class="language-scss">#054096</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#073072" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-80</code></li> <li><code class="language-scss">#073072</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#09204d" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Blue 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-blue-90</code></li> <li><code class="language-scss">#09204d</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Violet</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e7dfff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-05</code></li> <li><code class="language-scss">#e7dfff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#d9bfff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-10</code></li> <li><code class="language-scss">#d9bfff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#cb9eff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-20</code></li> <li><code class="language-scss">#cb9eff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#c689ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-30</code></li> <li><code class="language-scss">#c689ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ab71ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-40</code></li> <li><code class="language-scss">#ab71ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#9059ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-50</code></li> <li><code class="language-scss">#9059ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#7542e5" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-60</code></li> <li><code class="language-scss">#7542e5</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#592acb" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-70</code></li> <li><code class="language-scss">#592acb</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#45278d" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-80</code></li> <li><code class="language-scss">#45278d</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#321c64" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Violet 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-violet-90</code></li> <li><code class="language-scss">#321c64</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Purple</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f7e2ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-05</code></li> <li><code class="language-scss">#f7e2ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f6b8ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-10</code></li> <li><code class="language-scss">#f6b8ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f68fff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-20</code></li> <li><code class="language-scss">#f68fff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f770ff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-30</code></li> <li><code class="language-scss">#f770ff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#d74cf0" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-40</code></li> <li><code class="language-scss">#d74cf0</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#b833e1" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-50</code></li> <li><code class="language-scss">#b833e1</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#952bb9" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-60</code></li> <li><code class="language-scss">#952bb9</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#722291" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-70</code></li> <li><code class="language-scss">#722291</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#4e1a69" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-80</code></li> <li><code class="language-scss">#4e1a69</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#2b1141" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Purple 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-purple-90</code></li> <li><code class="language-scss">#2b1141</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Pink</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffdef0" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-05</code></li> <li><code class="language-scss">#ffdef0</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffb4db" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-10</code></li> <li><code class="language-scss">#ffb4db</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff8ac5" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-20</code></li> <li><code class="language-scss">#ff8ac5</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff6bba" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-30</code></li> <li><code class="language-scss">#ff6bba</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff4aa2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-40</code></li> <li><code class="language-scss">#ff4aa2</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff298a" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-50</code></li> <li><code class="language-scss">#ff298a</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e31587" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-60</code></li> <li><code class="language-scss">#e31587</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#c60084" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-70</code></li> <li><code class="language-scss">#c60084</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#7f145b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-80</code></li> <li><code class="language-scss">#7f145b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#50134b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Pink 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-pink-90</code></li> <li><code class="language-scss">#50134b</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Red</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffdfe7" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-05</code></li> <li><code class="language-scss">#ffdfe7</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffbdc5" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-10</code></li> <li><code class="language-scss">#ffbdc5</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff9aa2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-20</code></li> <li><code class="language-scss">#ff9aa2</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff848b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-30</code></li> <li><code class="language-scss">#ff848b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff6a75" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-40</code></li> <li><code class="language-scss">#ff6a75</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff4f5e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-50</code></li> <li><code class="language-scss">#ff4f5e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e22850" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-60</code></li> <li><code class="language-scss">#e22850</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#c50042" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-70</code></li> <li><code class="language-scss">#c50042</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#810220" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-80</code></li> <li><code class="language-scss">#810220</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#440306" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Red 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-red-90</code></li> <li><code class="language-scss">#440306</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Orange</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#fff4de" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-05</code></li> <li><code class="language-scss">#fff4de</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffd5b2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-10</code></li> <li><code class="language-scss">#ffd5b2</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffb587" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-20</code></li> <li><code class="language-scss">#ffb587</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffa266" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-30</code></li> <li><code class="language-scss">#ffa266</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff8a50" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-40</code></li> <li><code class="language-scss">#ff8a50</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff7139" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-50</code></li> <li><code class="language-scss">#ff7139</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e25920" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-60</code></li> <li><code class="language-scss">#e25920</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#cc3d00" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-70</code></li> <li><code class="language-scss">#cc3d00</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#9e280b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-80</code></li> <li><code class="language-scss">#9e280b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#7c1504" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Orange 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-orange-90</code></li> <li><code class="language-scss">#7c1504</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Yellow</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffffcc" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-05</code></li> <li><code class="language-scss">#ffffcc</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffff98" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-10</code></li> <li><code class="language-scss">#ffff98</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffea80" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-20</code></li> <li><code class="language-scss">#ffea80</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffd567" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-30</code></li> <li><code class="language-scss">#ffd567</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffbd4f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-40</code></li> <li><code class="language-scss">#ffbd4f</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffa436" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-50</code></li> <li><code class="language-scss">#ffa436</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e27f2e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-60</code></li> <li><code class="language-scss">#e27f2e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#c45a27" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-70</code></li> <li><code class="language-scss">#c45a27</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#a7341f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-80</code></li> <li><code class="language-scss">#a7341f</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#960e18" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Yellow 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-yellow-90</code></li> <li><code class="language-scss">#960e18</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Light Gray</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffffff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-05</code></li> <li><code class="language-scss">#ffffff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f9f9fb" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-10</code></li> <li><code class="language-scss">#f9f9fb</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f0f0f4" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-20</code></li> <li><code class="language-scss">#f0f0f4</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e0e0e6" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-30</code></li> <li><code class="language-scss">#e0e0e6</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#cfcfd8" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-40</code></li> <li><code class="language-scss">#cfcfd8</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#bfbfc9" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-50</code></li> <li><code class="language-scss">#bfbfc9</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#afafba" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-60</code></li> <li><code class="language-scss">#afafba</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#9f9fad" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-70</code></li> <li><code class="language-scss">#9f9fad</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#8f8f9e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-80</code></li> <li><code class="language-scss">#8f8f9e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#80808f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Light Gray 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-light-gray-90</code></li> <li><code class="language-scss">#80808f</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Dark Gray</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#5b5b66" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-05</code></li> <li><code class="language-scss">#5b5b66</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#52525e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-10</code></li> <li><code class="language-scss">#52525e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#4a4a55" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-20</code></li> <li><code class="language-scss">#4a4a55</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#42414d" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-30</code></li> <li><code class="language-scss">#42414d</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#3a3944" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-40</code></li> <li><code class="language-scss">#3a3944</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#32313c" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-50</code></li> <li><code class="language-scss">#32313c</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#2b2a33" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-60</code></li> <li><code class="language-scss">#2b2a33</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#23222b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-70</code></li> <li><code class="language-scss">#23222b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#1c1b22" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-80</code></li> <li><code class="language-scss">#1c1b22</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#15141a" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Dark Gray 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-dark-gray-90</code></li> <li><code class="language-scss">#15141a</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Marketing Gray</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#f9f9fa" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-10</code></li> <li><code class="language-scss">#f9f9fa</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ededf0" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-20</code></li> <li><code class="language-scss">#ededf0</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#cdcdd4" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-30</code></li> <li><code class="language-scss">#cdcdd4</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#b1b1bc" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-40</code></li> <li><code class="language-scss">#b1b1bc</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#9595a2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-50</code></li> <li><code class="language-scss">#9595a2</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#7a7a8b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-60</code></li> <li><code class="language-scss">#7a7a8b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#5e5e72" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-70</code></li> <li><code class="language-scss">#5e5e72</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#42425a" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-80</code></li> <li><code class="language-scss">#42425a</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#1f2033" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-90</code></li> <li><code class="language-scss">#1f2033</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#20123a" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Marketing Gray 99</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-marketing-gray-99</code></li> <li><code class="language-scss">#20123a</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Ink</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#393473" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 05</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-05</code></li> <li><code class="language-scss">#393473</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#342f6d" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 10</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-10</code></li> <li><code class="language-scss">#342f6d</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#312a64" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 20</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-20</code></li> <li><code class="language-scss">#312a64</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#2e255d" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 30</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-30</code></li> <li><code class="language-scss">#2e255d</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#2b2156" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 40</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-40</code></li> <li><code class="language-scss">#2b2156</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#291d4f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 50</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-50</code></li> <li><code class="language-scss">#291d4f</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#271948" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 60</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-60</code></li> <li><code class="language-scss">#271948</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#241541" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 70</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-70</code></li> <li><code class="language-scss">#241541</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#20123a" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 80</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-80</code></li> <li><code class="language-scss">#20123a</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#1d1133" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Ink 90</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-ink-90</code></li> <li><code class="language-scss">#1d1133</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Utility Colors</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#000000" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Black</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-black</code></li> <li><code class="language-scss">#000000</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ffffff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">White</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-white</code></li> <li><code class="language-scss">#ffffff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#0060df" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Link</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-link</code></li> <li><code class="language-scss">#0060df</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#0250bb" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Link:Hover</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-link-hover</code></li> <li><code class="language-scss">#0250bb</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#b833e1" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Link:Visited</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-link-visited</code></li> <li><code class="language-scss">#b833e1</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#952bb9" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Link:Visited:Hover</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-link-visited-hover</code></li> <li><code class="language-scss">#952bb9</code></li> </ul> </figcaption> </figure> </section> <h2 class="docs-palette-title">Mozilla Brand Colors</h2> <section class="docs-swatch-gallery"> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#00ffff" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Neon Blue</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-neon-blue</code></li> <li><code class="language-scss">#00ffff</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#fff44f" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Lemon Yellow</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-lemon-yellow</code></li> <li><code class="language-scss">#fff44f</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#ff4f5e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Warm Red</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-warm-red</code></li> <li><code class="language-scss">#ff4f5e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#54ffbd" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Neon Green</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-neon-green</code></li> <li><code class="language-scss">#54ffbd</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#6e008b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Dark Purple</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-dark-purple</code></li> <li><code class="language-scss">#6e008b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#005e5e" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Dark Green</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-dark-green</code></li> <li><code class="language-scss">#005e5e</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#00458b" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Dark Blue</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-dark-blue</code></li> <li><code class="language-scss">#00458b</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#959595" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Dark Gray</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-dark-gray</code></li> <li><code class="language-scss">#959595</code></li> </ul> </figcaption> </figure> <figure class="docs-swatch"> <svg class="docs-swatch-image" width="64" height="64"><rect fill="#e7e5e2" width="100%" height="100%" stroke="#000" stroke-opacity=".1" stroke-width="2" rx="6" ry="6" /> </svg> <figcaption> <h4 class="docs-swatch-name">Mozilla Light Gray</h4> <ul class="docs-swatch-values"> <li><code class="language-scss">$color-moz-light-gray</code></li> <li><code class="language-scss">#e7e5e2</code></li> </ul> </figcaption> </figure> </section> </div> </div> </div> </div> </div> <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar"> <nav class="Navigation" data-behaviour="navigation"> <div class="Navigation-panel Navigation-panel--main" data-role="main-panel" id="navigation"> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-docs"> <div class="Tree-header"> <h3 class="Tree-title">documentation</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-fundamentals"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-fundamentals-items"> Fundamentals </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-fundamentals-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="principles" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/principles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Design Principles</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="brand-themes" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/brand-themes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Brand Themes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="typography" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/typography?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Typography</span> </a></li> <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="color" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/color?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Color</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="design-tokens" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/design-tokens?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Design Tokens</span> </a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-usage"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-usage-items"> Usage </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-usage-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="usage" data-pjax data-role="tree-link" data-test="overview" href="https://protocol-mozilla-org.translate.goog/docs/usage/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="usage" data-pjax data-role="tree-link" data-test="framework" href="https://protocol-mozilla-org.translate.goog/docs/usage/framework?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Protocol CSS</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-contributing"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-contributing-items"> Contributing </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-contributing-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="overview" href="https://protocol-mozilla-org.translate.goog/docs/contributing/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="naming" href="https://protocol-mozilla-org.translate.goog/docs/contributing/naming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Naming Convention</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="css-guide" href="https://protocol-mozilla-org.translate.goog/docs/contributing/css-guide?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>CSS Guide</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle data-pjax data-role="tree-link" data-test="404" href="https://protocol-mozilla-org.translate.goog/docs/404?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>404</span> </a></li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-components"> <div class="Tree-header"> <h3 class="Tree-title">components</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="article" data-pjax data-role="tree-link" data-test="article" href="https://protocol-mozilla-org.translate.goog/components/detail/article?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Article</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-basic-elements"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-basic-elements-items"> Basic Elements </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-basic-elements-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="blockquote" data-pjax data-role="tree-link" data-test="blockquote" href="https://protocol-mozilla-org.translate.goog/components/detail/blockquote?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Blockquote</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details" data-pjax data-role="tree-link" data-test="details" href="https://protocol-mozilla-org.translate.goog/components/detail/details?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Details</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="headings" data-pjax data-role="tree-link" data-test="headings" href="https://protocol-mozilla-org.translate.goog/components/detail/headings?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Headings</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links" href="https://protocol-mozilla-org.translate.goog/components/detail/links--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Links</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Lists</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="paragraphs" data-pjax data-role="tree-link" data-test="paragraphs" href="https://protocol-mozilla-org.translate.goog/components/detail/paragraphs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Paragraphs</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="tables" data-pjax data-role="tree-link" data-test="tables" href="https://protocol-mozilla-org.translate.goog/components/detail/tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Tables</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="billboard" data-pjax data-role="tree-link" data-test="billboard" href="https://protocol-mozilla-org.translate.goog/components/detail/billboard?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Billboard</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-branding"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-branding-items"> Branding </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-branding-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Logo</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Wordmark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Zap</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="breadcrumb" data-pjax data-role="tree-link" data-test="breadcrumb" href="https://protocol-mozilla-org.translate.goog/components/detail/breadcrumb?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Breadcrumb</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Button</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Callout</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card" href="https://protocol-mozilla-org.translate.goog/components/detail/card--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Card</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Details Component</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Download Button</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="emphasis-box" data-pjax data-role="tree-link" data-test="emphasis-box" href="https://protocol-mozilla-org.translate.goog/components/detail/emphasis-box?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Emphasis Box</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Feature Card</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-footer"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-footer-items"> Footer </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-footer-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="footer" data-pjax data-role="tree-link" data-test="footer" href="https://protocol-mozilla-org.translate.goog/components/detail/footer?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Footer</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-basic" data-pjax data-role="tree-link" data-test="example-basic" href="https://protocol-mozilla-org.translate.goog/components/detail/example-basic?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Basic</span> </a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-forms"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-forms-items"> Forms </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-forms-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input" href="https://protocol-mozilla-org.translate.goog/components/detail/input--text?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Input</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select" href="https://protocol-mozilla-org.translate.goog/components/detail/select--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Select</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="checkboxes" data-pjax data-role="tree-link" data-test="checkboxes" href="https://protocol-mozilla-org.translate.goog/components/detail/checkboxes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Checkboxes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="radio-buttons" data-pjax data-role="tree-link" data-test="radio-buttons" href="https://protocol-mozilla-org.translate.goog/components/detail/radio-buttons?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Radio Buttons</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="textarea" data-pjax data-role="tree-link" data-test="textarea" href="https://protocol-mozilla-org.translate.goog/components/detail/textarea?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Textarea</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field-notes" data-pjax data-role="tree-link" data-test="field-notes" href="https://protocol-mozilla-org.translate.goog/components/detail/field-notes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field Notes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="titles" data-pjax data-role="tree-link" data-test="titles" href="https://protocol-mozilla-org.translate.goog/components/detail/titles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Titles</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field" data-pjax data-role="tree-link" data-test="field" href="https://protocol-mozilla-org.translate.goog/components/detail/field?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="choices" data-pjax data-role="tree-link" data-test="choices" href="https://protocol-mozilla-org.translate.goog/components/detail/choices?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Choices</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="error-messages" data-pjax data-role="tree-link" data-test="error-messages" href="https://protocol-mozilla-org.translate.goog/components/detail/error-messages?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error Messages</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="error-list" data-pjax data-role="tree-link" data-test="error-list" href="https://protocol-mozilla-org.translate.goog/components/detail/error-list?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error List</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="form-header" data-pjax data-role="tree-link" data-test="form-header" href="https://protocol-mozilla-org.translate.goog/components/detail/form-header?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Header and Footer</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field-set" data-pjax data-role="tree-link" data-test="field-set" href="https://protocol-mozilla-org.translate.goog/components/detail/field-set?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field Set</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Button Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-form" data-pjax data-role="tree-link" data-test="example-form" href="https://protocol-mozilla-org.translate.goog/components/detail/example-form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Form</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="language-switcher" data-pjax data-role="tree-link" data-test="language-switcher" href="https://protocol-mozilla-org.translate.goog/components/detail/language-switcher?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Language Switcher</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-layout"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-layout-items"> Layout </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-layout-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Content Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Columns</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Card Layout</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-components-collection-main-with-sidebar"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-main-with-sidebar-items"> Main With Sidebar </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-main-with-sidebar-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Main With Sidebar</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-sidebar-menu" data-pjax data-role="tree-link" data-test="example-sidebar-menu" href="https://protocol-mozilla-org.translate.goog/components/detail/example-sidebar-menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Sidebar Menu</span> </a></li> </ul></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu List</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="modal" data-pjax data-role="tree-link" data-test="modal" href="https://protocol-mozilla-org.translate.goog/components/detail/modal?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Modal</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-navigation"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-navigation-items"> Navigation </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-navigation-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Navigation</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu" data-pjax data-role="tree-link" data-test="menu" href="https://protocol-mozilla-org.translate.goog/components/detail/menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-item" data-pjax data-role="tree-link" data-test="menu-item" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-item?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu Item</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Newsletter</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Notification Bar</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Picto</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="section-heading" data-pjax data-role="tree-link" data-test="section-heading" href="https://protocol-mozilla-org.translate.goog/components/detail/section-heading?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Section Heading</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sidebar-menu" data-pjax data-role="tree-link" data-test="sidebar-menu" href="https://protocol-mozilla-org.translate.goog/components/detail/sidebar-menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sidebar Menu</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Split</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky Promo</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="video" data-pjax data-role="tree-link" data-test="video" href="https://protocol-mozilla-org.translate.goog/components/detail/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Video</span> </a></li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree"> <div class="Tree-header"> <h3 class="Tree-title">Information</h3> </div> <dl class="Tree-aside"> <div> <dt class="Tree-asideTerm"> Built on: </dt> <dd class="Tree-asideDescription"><time datetime="2024-04-04T23:38:30.598Z"> Apr 4, 2024 </time> </dd> </div> </dl> </div> </div> </div> <div class="Navigation-panel Navigation-panel--variants" data-role="variant-panel"> <div class="Navigation-backButtonWrapper"><button class="Navigation-backButton" data-role="back" type="button"> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z" /> </svg> Back </button> </div> <div class="Navigation-group" data-role="variant-group" data-component="links"> <div class="Tree" data-behaviour="tree" id="tree-links-variants"> <div class="Tree-header"> <h3 class="Tree-title">Links Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links--default" href="https://protocol-mozilla-org.translate.goog/components/detail/links--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links--call-to-action" href="https://protocol-mozilla-org.translate.goog/components/detail/links--call-to-action?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Call To Action</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="lists"> <div class="Tree" data-behaviour="tree" id="tree-lists-variants"> <div class="Tree-header"> <h3 class="Tree-title">Lists Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists--default" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists--inline" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--inline?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Inline</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="logo"> <div class="Tree" data-behaviour="tree" id="tree-logo-variants"> <div class="Tree-header"> <h3 class="Tree-title">Logo Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--default" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--centered-on-mobile" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--centered-on-mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered On Mobile</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--products" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--products?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Products</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--sizes" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--sizes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sizes</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="wordmark"> <div class="Tree" data-behaviour="tree" id="tree-wordmark-variants"> <div class="Tree-header"> <h3 class="Tree-title">Wordmark Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--default" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--centered-on-mobile" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--centered-on-mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered On Mobile</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--products" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--products?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Products</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--sizes" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--sizes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sizes</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="zap"> <div class="Tree" data-behaviour="tree" id="tree-zap-variants"> <div class="Tree-header"> <h3 class="Tree-title">Zap Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap--default" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap--all-styles" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--all-styles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>All Styles</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="button"> <div class="Tree" data-behaviour="tree" id="tree-button-variants"> <div class="Tree-header"> <h3 class="Tree-title">Button Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--primary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Primary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--primary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Primary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--secondary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--secondary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product-secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product-secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product Secondary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product-secondary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product-secondary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product Secondary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--neutral" href="https://protocol-mozilla-org.translate.goog/components/detail/button--neutral?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Neutral</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--neutral-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--neutral-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Neutral Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-small" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-medium" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-medium?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Medium</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-large" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-extra-large" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-extra-large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Extra Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/button--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--with-icon" href="https://protocol-mozilla-org.translate.goog/components/detail/button--with-icon?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>With Icon</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="callout"> <div class="Tree" data-behaviour="tree" id="tree-callout-variants"> <div class="Tree-header"> <h3 class="Tree-title">Callout Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--default" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--content-width" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--content-width?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Content Width</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--compact" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--compact?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Compact</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--example" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--example?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="card"> <div class="Tree" data-behaviour="tree" id="tree-card-variants"> <div class="Tree-header"> <h3 class="Tree-title">Card Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/card--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--extra-small" href="https://protocol-mozilla-org.translate.goog/components/detail/card--extra-small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Extra Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--small" href="https://protocol-mozilla-org.translate.goog/components/detail/card--small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--medium" href="https://protocol-mozilla-org.translate.goog/components/detail/card--medium?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Medium</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--large" href="https://protocol-mozilla-org.translate.goog/components/detail/card--large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/card--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="details-component"> <div class="Tree" data-behaviour="tree" id="tree-details-component-variants"> <div class="Tree-header"> <h3 class="Tree-title">Details Component Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component--default" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component--custom" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--custom?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Custom</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="download-button"> <div class="Tree" data-behaviour="tree" id="tree-download-button-variants"> <div class="Tree-header"> <h3 class="Tree-title">Download Button Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button--default" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button--secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="feature-card"> <div class="Tree" data-behaviour="tree" id="tree-feature-card-variants"> <div class="Tree-header"> <h3 class="Tree-title">Feature Card Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--default" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--left-half" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--left-half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Left Half</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--right-half" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--right-half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Right Half</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--left-third" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--left-third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Left Third</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--right-third" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--right-third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Right Third</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="input"> <div class="Tree" data-behaviour="tree" id="tree-input-variants"> <div class="Tree-header"> <h3 class="Tree-title">Input Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--text" href="https://protocol-mozilla-org.translate.goog/components/detail/input--text?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Text</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--date" href="https://protocol-mozilla-org.translate.goog/components/detail/input--date?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Date</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--email" href="https://protocol-mozilla-org.translate.goog/components/detail/input--email?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Email</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--placeholder" href="https://protocol-mozilla-org.translate.goog/components/detail/input--placeholder?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Placeholder</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--password" href="https://protocol-mozilla-org.translate.goog/components/detail/input--password?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Password</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--file" href="https://protocol-mozilla-org.translate.goog/components/detail/input--file?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>File</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--search" href="https://protocol-mozilla-org.translate.goog/components/detail/input--search?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Search</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/input--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="select"> <div class="Tree" data-behaviour="tree" id="tree-select-variants"> <div class="Tree-header"> <h3 class="Tree-title">Select Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select--default" href="https://protocol-mozilla-org.translate.goog/components/detail/select--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/select--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="button-container"> <div class="Tree" data-behaviour="tree" id="tree-button-container-variants"> <div class="Tree-header"> <h3 class="Tree-title">Button Container Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--default" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--end-aligned" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--end-aligned?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>End Aligned</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--center-aligned" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--center-aligned?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Center Aligned</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--stretched" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--stretched?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Stretched</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="content-container"> <div class="Tree" data-behaviour="tree" id="tree-content-container-variants"> <div class="Tree-header"> <h3 class="Tree-title">Content Container Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--default" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--small-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--small-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Small Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--medium-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--medium-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Medium Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--large-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--large-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Large Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--extra-large-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--extra-large-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Extra Large Container</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="columns"> <div class="Tree" data-behaviour="tree" id="tree-columns-variants"> <div class="Tree-header"> <h3 class="Tree-title">Columns Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--two" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--two?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Two</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--three" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--three?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Three</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--four" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--four?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Four</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="card-layout"> <div class="Tree" data-behaviour="tree" id="tree-card-layout-variants"> <div class="Tree-header"> <h3 class="Tree-title">Card Layout Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--half" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Half</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--third" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Third</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--quarter" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--quarter?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Quarter</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--hero" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--hero?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Hero</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="main-with-sidebar"> <div class="Tree" data-behaviour="tree" id="tree-main-with-sidebar-variants"> <div class="Tree-header"> <h3 class="Tree-title">Main With Sidebar Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar--default" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar--sidebar-right" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--sidebar-right?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sidebar Right</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="menu-list"> <div class="Tree" data-behaviour="tree" id="tree-menu-list-variants"> <div class="Tree-header"> <h3 class="Tree-title">Menu List Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list--default" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list--download" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--download?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Download</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="navigation"> <div class="Tree" data-behaviour="tree" id="tree-navigation-variants"> <div class="Tree-header"> <h3 class="Tree-title">Navigation Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation--default" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation--firefox" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--firefox?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Firefox</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="newsletter"> <div class="Tree" data-behaviour="tree" id="tree-newsletter-variants"> <div class="Tree-header"> <h3 class="Tree-title">Newsletter Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--default" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--errors" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--errors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Errors</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--success" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--success?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Success</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="notification-bar"> <div class="Tree" data-behaviour="tree" id="tree-notification-bar-variants"> <div class="Tree-header"> <h3 class="Tree-title">Notification Bar Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--default" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--success" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--success?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Success</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--warning" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Warning</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--error" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--error?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--click" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--click?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Click</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--scripted" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--scripted?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Scripted</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--sticky" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--sticky?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="picto"> <div class="Tree" data-behaviour="tree" id="tree-picto-variants"> <div class="Tree-header"> <h3 class="Tree-title">Picto Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--default" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--side" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Side</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="split"> <div class="Tree" data-behaviour="tree" id="tree-split-variants"> <div class="Tree-header"> <h3 class="Tree-title">Split Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--default" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--reversed" href="https://protocol-mozilla-org.translate.goog/components/detail/split--reversed?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Reversed</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--narrow-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--narrow-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Narrow Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--wide-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--wide-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Wide Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--background" href="https://protocol-mozilla-org.translate.goog/components/detail/split--background?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Background</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-overflow" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-overflow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Overflow</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--constrained-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--constrained-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Constrained Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--pop-out-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--pop-out-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Pop Out Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--body-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--body-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Body Alignment</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Alignment</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="sticky-promo"> <div class="Tree" data-behaviour="tree" id="tree-sticky-promo-variants"> <div class="Tree-header"> <h3 class="Tree-title">Sticky Promo Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--default" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> </ul> </div> </div> </div> </nav> </div> </div> </div> <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.10.3"></script> <script src="../../theme/js/bidi.js"></script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>