CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="no-js"> <head> <base href="https://protocol.mozilla.org/docs/contributing/naming"> <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>Naming Convention | 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/contributing/naming"></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/contributing/naming"></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/contributing/naming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://protocol.mozilla.org/docs/contributing/naming" 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/contributing/naming&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">Naming Convention</h1> </div> <div class="Document-content"> <div class="Prose"> <p>For ease of integration and to avoid conflicts with other sites, frameworks, and libraries, most classes in Protocol are prefixed with our global namespace <code>.mzp-</code> for “Mozilla Protocol”.</p> <p>After that, we follow a <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://smacss.com/book/categorizing">SMACSS</a>-based naming convention with a set of prefixes to put rules into a few different categories:</p> <ul> <li><code>c-</code> for component names. Expect a lot of this one, e.g. <code>.mzp-c-card</code>, <code>.mzp-c-button</code>.</li> <li><code>t-</code> for theme styles, when a component has one or more alternative styles, e.g. <code>.mzp-t-dark</code>, <code>.mzp-t-product-firefox</code>.</li> <li><code>l-</code> for layout-related styles, e.g. <code>.mzp-l-content</code>, <code>.mzp-l-grid-third</code>. These are essentially presentational names, mostly used for container elements.</li> <li><code>u-</code> for utility styles, which have a broad scope and can be powerful overrides, e.g. <code>.mzp-u-inline</code>, <code>.mzp-u-title-md</code>. These are presentational so should be rare. Prefer mixins in a style sheet over classes in HTML.</li> <li><code>qa-</code> used as selector hooks for tests (unit tests, integration tests, etc.). These classes are not meant as styling hooks; no CSS should be applied to any <code>qa-</code> classes!</li> <li><code>is-</code> to indicate a current state, e.g. <code>.mzp-is-active</code>, <code>.mzp-is-collapsed</code> (typically assigned by JS and not hard-coded).</li> <li><code>has-</code> to indicate that a component contains some other component, when the parent gets some styling to accommodate the child, e.g. <code>.mzp-has-submenu</code>, <code>.mzp-has-image</code>.</li> <li><code>js-</code> used as a behavior hook for JavaScript, e.g. <code>.mzp-js-sticky</code>, <code>.mzp-js-collapsible</code>, <code>.mzp-js-toggle</code>. Indicates potential for a change of state and usually shouldn’t have any styling.</li> <li><code>a-</code> for CSS animation names, e.g. <code>mzp-a-fade-in</code>, <code>mzp-a-slide-from-right</code>.</li> </ul> <p>Our names are all lowercase and hyphen-separated or “kebab-case,” e.g. <code>.mzp-c-card</code>, <code>.mzp-c-card-title</code>. This brings with it the potential for long kebabs of multipart, hyphenated names. Names should be as short as possible and as long as necessary. Clarity is key. If we find our names getting obscenely long and confusing we may need to revise our convention but we’re trying it this way first.</p> <p>Example:</p> <pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-card mzp-has-image"</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-card-image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/static/img/card-image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-card-title"</span>></span>Card Title<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-card-desc"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, pri illum munere mollis at, amet senserit te vix, sint porro mei eu.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-card-cta"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-cta-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Learn more<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> <p>Component names should be semantically meaningful, descriptive of the element’s content, purpose, or function, not only its presentation.</p> <pre><code class="hljs language-scss"><span class="hljs-comment">// NO - Presentational</span> <span class="hljs-selector-class">.mzp-c-outline</span> { ... } <span class="hljs-selector-class">.mzp-c-button-blue</span> { ... } <span class="hljs-comment">// YES - Meaningful</span> <span class="hljs-selector-class">.mzp-c-card</span> { ... } <span class="hljs-selector-class">.mzp-c-button-product</span> { ... }</code></pre> <p>Notable exceptions are the handful of layout and utility classes (prefixed by <code>l-</code> and <code>u-</code>) which you should only use when necessary and practical. In most cases there will be an equivalent SCSS mixin that may be preferable to adding presentational classes in your markup.</p> <h3 id="sizes">Sizes</h3> <p>We use a “T-shirt” convention when we need to describe sizes, e.g. “lg” for large and “sm” for small. In this t-shirt scale system, the default should be the medium “md” size and you can scale up or down from there.</p> <pre><code class="hljs language-scss"><span class="hljs-selector-class">.mzp-t-size-2xl</span> { ... } <span class="hljs-selector-class">.mzp-t-size-xl</span> { ... } <span class="hljs-selector-class">.mzp-t-size-lg</span> { ... } <span class="hljs-selector-class">.mzp-t-size-md</span> { ... } <span class="hljs-selector-class">.mzp-t-size-sm</span> { ... } <span class="hljs-selector-class">.mzp-t-size-xs</span> { ... } <span class="hljs-selector-class">.mzp-t-size-2xs</span> { ... }</code></pre> <p>Note that when we need multiple Xes we opt for a numeral. This avoids confusion or ambuguity in the event we need to reference some extreme size. “5xl” is more readable than “xxxxxl”.</p> <h3 id="resources">Resources</h3> <ul> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://smacss.com/book/">Scalable and Modular Architechture for CSS (SMACSS) - Jonathan Snook</a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=http://bradfrost.com/blog/post/css-architecture-for-design-systems/">CSS Architecture for Design Systems - Brad Frost</a></li> </ul> </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" 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 is-current" data-state="current" 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>