CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="no-js"> <head> <base href="https://protocol.mozilla.org/components/detail/split--default"> <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>Split: Default | 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/components/detail/split--default"></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/components/detail/split--default"></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/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://protocol.mozilla.org/components/detail/split--default" 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/components/detail/split--default&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="Pen" data-behaviour="pen" id="pen-c9eeca530141115a0972aaca2dcdffc5"> <div class="Pen-panel Pen-header"> <h1 class="Pen-title"><a class="Pen-previewLink" href="https://protocol-mozilla-org.translate.goog/components/preview/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank" title="Preview"> Split: Default <button type="button" class="Pen-previewButton">full view <svg fill="#000000" height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" /> <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z" /> </svg></button> </a></h1> <div class="Pen-utils"> <form class="Pen-bidi-controls"> <fieldset><label><abbr title="Left to Right">LTR</abbr>: <input class="Pen-bidi-toggle" type="radio" value="ltr" name="preview-c9eeca530141115a0972aaca2dcdffc5" checked></label> <label><abbr title="Right to Left">RTL</abbr>: <input class="Pen-bidi-toggle" type="radio" value="rtl" name="preview-c9eeca530141115a0972aaca2dcdffc5"></label> </fieldset> </form><span class="Pen-preview-size" data-role="preview-size"></span> </div> </div> <div class="Pen-panel Pen-preview Preview" data-behaviour="preview" id="preview-c9eeca530141115a0972aaca2dcdffc5"> <div class="Preview-wrapper" data-role="resizer"> <div class="Preview-resizer"><iframe class="Preview-iframe" data-role="window" src="../preview/split--default.html" style="" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes"> </iframe> </div> <div class="Preview-handle" data-role="resize-handle"></div> <div class="Preview-overlay"></div> </div> </div> <div class="Pen-handle Pen-handle--browser" data-role="resize-handle"></div> <div class="Pen-panel Pen-info" data-role="info"> <div class="Browser" data-behaviour="browser" id="browser-c9eeca530141115a0972aaca2dcdffc5"> <div class="Browser-controls"> <ul class="Browser-tabs"> <li class="Browser-tab Browser-tab--notes is-active " data-role="tab"><a href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#browser-c9eeca530141115a0972aaca2dcdffc5-panel-notes"> Notes </a></li> <li class="Browser-tab Browser-tab--html" data-role="tab"><a href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#browser-c9eeca530141115a0972aaca2dcdffc5-panel-html"> HTML </a></li> </ul> </div> <div class="Browser-panel Browser-notes" data-role="tab-panel" id="browser-c9eeca530141115a0972aaca2dcdffc5-panel-notes"> <div class="Prose Prose--condensed"> <p>This is a full-width page section with text on one side and a single piece of media (an image or video) on the other, hence “split” into two columns. It’s highly customizable with a lot of optional classes to support different layout variations.</p> <ul> <li>No default typography styles are applied to the body text; use other components or CSS for text styling.</li> <li>The body and media will stack in small viewports, switching to the two-column split layout in larger viewports.</li> <li>You can choose your preferred source order, with the media before or after the body, to optimize how you’d like it to stack in small viewports.</li> <li>Set the maximum content width by adding a class to the outermost containing block (<code>mzp-c-split</code>): <ul> <li><code>mzp-t-content-md</code></li> <li><code>mzp-t-content-lg</code></li> <li><code>mzp-t-content-xl</code></li> <li>Note the lack of a “small” option. Content in two columns in a narrow container is usually a bad idea so we’re not providing it.</li> </ul></li> <li>The Split is an even 50/50 by default, but you can adjust the body width (the part with the text) to make a 33/66 proportion. Add one of these classes to the outermost container (<code>mzp-c-split</code>): <ul> <li><code>mzp-l-split-body-narrow</code> - body is one third, media is two thirds.</li> <li><code>mzp-l-split-body-wide</code> - body is two thirds, media is one third.</li> <li>Note that the wide and narrow body variants only take effect in larger viewports; it will be 50/50 in medium viewports (mostly to preserve readable line lengths). It stacks in small viewports, as normal.</li> </ul></li> <li>The orientation of the body and media changes automatically in right-to-left languages. By default, the body is on the left in left-to-right languages on the right in RTL. You can reverse the layout explicitly with a class on the main container (<code>mzp-c-split</code>): <ul> <li><code>mzp-l-split-reversed</code></li> <li>A reversed layout will <em>also</em> reverse automatically in right-to-left languages.</li> </ul></li> <li>Align the body, horizontally and vertically (it’s aligned left by default in LTR, and vertically centered). Apply these classes to the body container (<code>mzp-c-split-body</code>): <ul> <li><code>mzp-l-split-h-center</code> - horizontally centered.</li> <li><code>mzp-l-split-h-end</code> - aligned right in left-to-right languages, left in right-to-left.</li> <li><code>mzp-l-split-v-start</code> - vertically aligned to the top.</li> <li><code>mzp-l-split-v-end</code> - vertically aligned to the bottom.</li> </ul></li> <li>Align the media in different positions, horizontally and vertically (it’s aligned left by default on LTR, and vertically centered). Apply these classes to the media container (<code>mzp-c-split-media</code>): <ul> <li><code>mzp-l-split-h-center</code> - horizontally centered.</li> <li><code>mzp-l-split-h-end</code> - aligned right in left-to-right languages, left in right-to-left.</li> <li><code>mzp-l-split-v-start</code> - vertically aligned to the top.</li> <li><code>mzp-l-split-v-end</code> - vertically aligned to the bottom.</li> <li>Note that the media can only be positioned horizontally if it does <em>not</em> have a sizing class added, such as <code>mzp-l-split-media-overflow</code> or <code>mzp-l-split-media-constrain-height</code></li> </ul></li> <li>You can control the behavior of the media with a class on the media container (<code>mzp-c-split-media</code>): <ul> <li><code>mzp-l-split-media-overflow</code> - the image can be larger than the Split container and will “bleed” past the edges. This means some of the image will be hidden, so choose images wisely.</li> <li><code>mzp-l-split-media-constrain-height</code> - the image will scale to fit the height of the container, which depends on the amount of content in the body.</li> </ul></li> <li>The media can “pop” out of the container, protruding past the top and bottom edges. Apply these classes to the outer container (<code>mzp-c-split</code>): <ul> <li><code>mzp-l-split-pop-top</code> - protrude from the top.</li> <li><code>mzp-l-split-pop-bottom</code> - protrude from the bottom.</li> <li><code>mzp-l-split-pop</code> - both.</li> </ul></li> <li>Choose how to treat the Split on small screens. Apply these classes to the outer container (<code>mzp-c-split</code>): <ul> <li><code>mzp-l-split-center-on-sm-md</code> - content is centered on small to medium screens.</li> <li><code>mzp-l-split-hide-media-on-sm-md</code> - media is hidden on small to medium screens.</li> </ul></li> </ul> <h3 id="no-nos">No-nos:</h3> <p><strong>Note:</strong> This component is intended to be a full-width section of a page, with an outer container that spans the width of the viewport and generous spacing above and below. Split has an inner container to define its content width, so don’t place Split inside another <code>mzp-l-content</code> <a href="https://protocol-mozilla-org.translate.goog/components/detail/content-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">container</a>. The nested spacing will get weird.</p> </div> </div> <div class="Browser-panel Browser-code is-active" data-role="tab-panel" id="browser-c9eeca530141115a0972aaca2dcdffc5-panel-html"><code class="Code Code--lang-html hljs"> <pre><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-split "</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-split-container"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-split-body "</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-u-title-md"</span>></span>Lorem ipsum dolor sit amet<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Call to action<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> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-split-media "</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-split-media-asset"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../img/image-16-9.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"../../img/image-16-9-high-res.jpg 2x"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">section</span>></span></pre></code> </div> </div> </div> </div> </div> </div> <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar"> <nav class="Navigation in-variants-panel" 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" 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 is-current" data-state="current" 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 is-visible" 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 is-visible" 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 is-current" data-state="current" 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>