CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="no-js"> <head> <base href="https://protocol.mozilla.org/components/detail/notification-bar--warning"> <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>Notification Bar: Warning | 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/notification-bar--warning"></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/notification-bar--warning"></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/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://protocol.mozilla.org/components/detail/notification-bar--warning" 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/notification-bar--warning&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-8186d33944d3c9bb697dbac20d7f791f"> <div class="Pen-panel Pen-header"> <h1 class="Pen-title"><a class="Pen-previewLink" href="https://protocol-mozilla-org.translate.goog/components/preview/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank" title="Preview"> Notification Bar: Warning <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-8186d33944d3c9bb697dbac20d7f791f" checked></label> <label><abbr title="Right to Left">RTL</abbr>: <input class="Pen-bidi-toggle" type="radio" value="rtl" name="preview-8186d33944d3c9bb697dbac20d7f791f"></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-8186d33944d3c9bb697dbac20d7f791f"> <div class="Preview-wrapper" data-role="resizer"> <div class="Preview-resizer"><iframe class="Preview-iframe" data-role="window" src="../preview/notification-bar--warning.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-8186d33944d3c9bb697dbac20d7f791f"> <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/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#browser-8186d33944d3c9bb697dbac20d7f791f-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/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#browser-8186d33944d3c9bb697dbac20d7f791f-panel-html"> HTML </a></li> </ul> </div> <div class="Browser-panel Browser-notes" data-role="tab-panel" id="browser-8186d33944d3c9bb697dbac20d7f791f-panel-notes"> <div class="Prose Prose--condensed"> <p>Use the class <code>mzp-t-warning</code> for a cautionary notification, to indicate something may be risky but the user can choose to proceed. This example also features a close button (the button isn鈥檛 functional, it鈥檚 just for demonstration).</p> </div> </div> <div class="Browser-panel Browser-code is-active" data-role="tab-panel" id="browser-8186d33944d3c9bb697dbac20d7f791f-panel-html"><code class="Code Code--lang-html hljs"> <pre><span class="hljs-tag"><<span class="hljs-name">aside</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-notification-bar mzp-t-warning"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mzp-c-notification-bar-button"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>Close notification<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Warning! It's dangerous to go alone.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">aside</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 is-current" data-state="current" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Notification Bar</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Picto</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="section-heading" data-pjax data-role="tree-link" data-test="section-heading" href="https://protocol-mozilla-org.translate.goog/components/detail/section-heading?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Section Heading</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sidebar-menu" data-pjax data-role="tree-link" data-test="sidebar-menu" href="https://protocol-mozilla-org.translate.goog/components/detail/sidebar-menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sidebar Menu</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Split</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky Promo</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="video" data-pjax data-role="tree-link" data-test="video" href="https://protocol-mozilla-org.translate.goog/components/detail/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Video</span> </a></li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree"> <div class="Tree-header"> <h3 class="Tree-title">Information</h3> </div> <dl class="Tree-aside"> <div> <dt class="Tree-asideTerm"> Built on: </dt> <dd class="Tree-asideDescription"><time datetime="2024-04-04T23:38:30.598Z"> Apr 4, 2024 </time> </dd> </div> </dl> </div> </div> </div> <div class="Navigation-panel Navigation-panel--variants 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 is-visible" 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 is-current" data-state="current" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--warning" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Warning</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--error" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--error?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--click" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--click?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Click</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--scripted" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--scripted?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Scripted</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--sticky" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--sticky?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="picto"> <div class="Tree" data-behaviour="tree" id="tree-picto-variants"> <div class="Tree-header"> <h3 class="Tree-title">Picto Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--default" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--side" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Side</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="split"> <div class="Tree" data-behaviour="tree" id="tree-split-variants"> <div class="Tree-header"> <h3 class="Tree-title">Split Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--default" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--reversed" href="https://protocol-mozilla-org.translate.goog/components/detail/split--reversed?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Reversed</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--narrow-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--narrow-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Narrow Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--wide-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--wide-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Wide Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--background" href="https://protocol-mozilla-org.translate.goog/components/detail/split--background?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Background</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-overflow" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-overflow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Overflow</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--constrained-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--constrained-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Constrained Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--pop-out-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--pop-out-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Pop Out Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--body-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--body-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Body Alignment</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Alignment</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="sticky-promo"> <div class="Tree" data-behaviour="tree" id="tree-sticky-promo-variants"> <div class="Tree-header"> <h3 class="Tree-title">Sticky Promo Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--default" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> </ul> </div> </div> </div> </nav> </div> </div> </div> <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.10.3"></script> <script src="../../theme/js/bidi.js"></script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>