CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="no-js"> <head> <base href="https://protocol.mozilla.org/docs/usage/overview"> <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>Using Protocol on Your Website | 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.gi7GHc2tCQ4.O/am=DAY/d=1/rs=AN8SPfr-m6dGte1r4pe7Y_TjuCeg5HQuqQ/m=corsproxy" data-sourceurl="https://protocol.mozilla.org/docs/usage/overview"></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.gi7GHc2tCQ4.O/am=DAY/d=1/exm=corsproxy/ed=1/rs=AN8SPfr-m6dGte1r4pe7Y_TjuCeg5HQuqQ/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://protocol.mozilla.org/docs/usage/overview"></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.gi7GHc2tCQ4.O/am=DAY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfr-m6dGte1r4pe7Y_TjuCeg5HQuqQ/m=navigationui" data-environment="prod" data-proxy-url="https://protocol-mozilla-org.translate.goog" data-proxy-full-url="https://protocol-mozilla-org.translate.goog/docs/usage/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://protocol.mozilla.org/docs/usage/overview" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://protocol.mozilla.org/docs/usage/overview&anno=2" data-client="tr"></script> <div class="Frame" id="frame"> <div class="Frame-header"> <div class="Header"><button class="Header-button Header-navToggle" data-action="toggle-sidebar" aria-label="Toggle menu" aria-controls="navigation"> <div class="Header-navToggleIcon Header-navToggleIcon--open"> <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" /> <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z" /> </svg> </div> <div class="Header-navToggleIcon Header-navToggleIcon--closed"> <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" /> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /> </svg> </div></button> <a class="Header-title" data-pjax href="https://protocol-mozilla-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> Mozilla Protocol </a> <ul class="Header-menu"> <li class="Header-version">19.1.0</li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mozilla/protocol" title="Protocol on Github"> <img src="../../theme/img/github.svg" height="30" alt=""> </a></li> </ul> </div> </div> <div class="Frame-body" data-role="body"> <div class="Frame-panel Frame-panel--main" data-role="main"> <div class="Frame-inner" id="pjax-container"> <div class="Document"> <div class="Document-header"> <h1 class="Document-title">Using Protocol on Your Website</h1> <div class="Status Status--tag"><label class="Status-label" style="background-color: darkorange; border-color: darkorange;">Draft</label> </div> </div> <div class="Document-content"> <div class="Prose"> <p>Protocol is built on the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://nodejs.org/">Node.js</a> platform and published as an <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.npmjs.com/package/@mozilla-protocol/core">NPM package</a>, so be sure to have both installed before proceeding.</p> <h2 id="installation">Installation</h2> <p>To use Protocol in your website with minimal fuss you can install the core package directly from NPM:</p> <pre><code class="hljs"><span class="hljs-built_in">npm</span> install @mozilla-protocol/core --save</code></pre> <p>Alternatively, you can also <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mozilla/protocol/releases/latest">download the latest release</a> from GitHub.</p> <p>Once installed, the relevant CSS, JavaScript, and asset files will be available in your project under <code>./node_modules/@mozilla-protocol/core/</code>.</p> <p>The core CSS file is bundled as <code>protocol.css</code>, which contains styling for things such as basic elements and typography, as well as some global components like navigation and a footer. Other component and layout CSS is bundled as <code>protocol-components.css</code> for convenience.</p> <p>However, these pre-compiled CSS files include the <em>entire</em> pattern library, which may be a lot more than you need need. We recommend compiling your own styles from the source Sass files, also included in the published package. That allows you to configure Protocol to include just the styles and components you need for each page of your website.</p> <h2 id="compiling-protocol">Compiling Protocol</h2> <p>Styling is written in Sass using the SCSS syntax. Protocol styles are fragmented into separate <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://sass-lang.com/guide%23topic-4">Sass partials</a> so you can import just the parts you need and keep your CSS files light. You can do this on a per-page basis so each page gets its own stylesheet for just the components needed on that page. Or you can take a hybrid approach with a global stylesheet for general styling and common components as well as separate, per-page stylesheets for components and page-specific styling as needed.</p> <p>The <code>protocol.scss</code> file is an example of a global Protocol-based stylesheet. It sets a few common variables and imports fonts and base styles. Modify your own version of that file to configure Protocol for your site.</p> </div> </div> </div> </div> </div> <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar"> <nav class="Navigation" data-behaviour="navigation"> <div class="Navigation-panel Navigation-panel--main" data-role="main-panel" id="navigation"> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-docs"> <div class="Tree-header"> <h3 class="Tree-title">documentation</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-fundamentals"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-fundamentals-items"> Fundamentals </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-fundamentals-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="principles" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/principles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Design Principles</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="brand-themes" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/brand-themes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Brand Themes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="typography" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/typography?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Typography</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="color" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/color?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Color</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="fundamentals" data-pjax data-role="tree-link" data-test="design-tokens" href="https://protocol-mozilla-org.translate.goog/docs/fundamentals/design-tokens?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Design Tokens</span> </a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-usage"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-usage-items"> Usage </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-usage-items"> <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item"><a class="Tree-entityLink" data-handle="usage" data-pjax data-role="tree-link" data-test="overview" href="https://protocol-mozilla-org.translate.goog/docs/usage/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="usage" data-pjax data-role="tree-link" data-test="framework" href="https://protocol-mozilla-org.translate.goog/docs/usage/framework?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Protocol CSS</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: darkorange;" title="Draft"></span> </div> </div></a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-contributing"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-contributing-items"> Contributing </button> <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-contributing-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="overview" href="https://protocol-mozilla-org.translate.goog/docs/contributing/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="naming" href="https://protocol-mozilla-org.translate.goog/docs/contributing/naming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Naming Convention</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="contributing" data-pjax data-role="tree-link" data-test="css-guide" href="https://protocol-mozilla-org.translate.goog/docs/contributing/css-guide?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>CSS Guide</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle data-pjax data-role="tree-link" data-test="404" href="https://protocol-mozilla-org.translate.goog/docs/404?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>404</span> </a></li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-components"> <div class="Tree-header"> <h3 class="Tree-title">components</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="article" data-pjax data-role="tree-link" data-test="article" href="https://protocol-mozilla-org.translate.goog/components/detail/article?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Article</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-basic-elements"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-basic-elements-items"> Basic Elements </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-basic-elements-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="blockquote" data-pjax data-role="tree-link" data-test="blockquote" href="https://protocol-mozilla-org.translate.goog/components/detail/blockquote?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Blockquote</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details" data-pjax data-role="tree-link" data-test="details" href="https://protocol-mozilla-org.translate.goog/components/detail/details?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Details</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="headings" data-pjax data-role="tree-link" data-test="headings" href="https://protocol-mozilla-org.translate.goog/components/detail/headings?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Headings</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links" href="https://protocol-mozilla-org.translate.goog/components/detail/links--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Links</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Lists</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="paragraphs" data-pjax data-role="tree-link" data-test="paragraphs" href="https://protocol-mozilla-org.translate.goog/components/detail/paragraphs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Paragraphs</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="tables" data-pjax data-role="tree-link" data-test="tables" href="https://protocol-mozilla-org.translate.goog/components/detail/tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Tables</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="billboard" data-pjax data-role="tree-link" data-test="billboard" href="https://protocol-mozilla-org.translate.goog/components/detail/billboard?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Billboard</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-branding"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-branding-items"> Branding </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-branding-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Logo</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Wordmark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Zap</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="breadcrumb" data-pjax data-role="tree-link" data-test="breadcrumb" href="https://protocol-mozilla-org.translate.goog/components/detail/breadcrumb?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Breadcrumb</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Button</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Callout</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card" href="https://protocol-mozilla-org.translate.goog/components/detail/card--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Card</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Details Component</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Download Button</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="emphasis-box" data-pjax data-role="tree-link" data-test="emphasis-box" href="https://protocol-mozilla-org.translate.goog/components/detail/emphasis-box?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Emphasis Box</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Feature Card</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-footer"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-footer-items"> Footer </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-footer-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="footer" data-pjax data-role="tree-link" data-test="footer" href="https://protocol-mozilla-org.translate.goog/components/detail/footer?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Footer</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-basic" data-pjax data-role="tree-link" data-test="example-basic" href="https://protocol-mozilla-org.translate.goog/components/detail/example-basic?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Basic</span> </a></li> </ul></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-forms"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-forms-items"> Forms </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-forms-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input" href="https://protocol-mozilla-org.translate.goog/components/detail/input--text?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Input</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select" href="https://protocol-mozilla-org.translate.goog/components/detail/select--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Select</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="checkboxes" data-pjax data-role="tree-link" data-test="checkboxes" href="https://protocol-mozilla-org.translate.goog/components/detail/checkboxes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Checkboxes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="radio-buttons" data-pjax data-role="tree-link" data-test="radio-buttons" href="https://protocol-mozilla-org.translate.goog/components/detail/radio-buttons?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Radio Buttons</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="textarea" data-pjax data-role="tree-link" data-test="textarea" href="https://protocol-mozilla-org.translate.goog/components/detail/textarea?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Textarea</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field-notes" data-pjax data-role="tree-link" data-test="field-notes" href="https://protocol-mozilla-org.translate.goog/components/detail/field-notes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field Notes</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="titles" data-pjax data-role="tree-link" data-test="titles" href="https://protocol-mozilla-org.translate.goog/components/detail/titles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Titles</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field" data-pjax data-role="tree-link" data-test="field" href="https://protocol-mozilla-org.translate.goog/components/detail/field?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="choices" data-pjax data-role="tree-link" data-test="choices" href="https://protocol-mozilla-org.translate.goog/components/detail/choices?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Choices</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="error-messages" data-pjax data-role="tree-link" data-test="error-messages" href="https://protocol-mozilla-org.translate.goog/components/detail/error-messages?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error Messages</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="error-list" data-pjax data-role="tree-link" data-test="error-list" href="https://protocol-mozilla-org.translate.goog/components/detail/error-list?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error List</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="form-header" data-pjax data-role="tree-link" data-test="form-header" href="https://protocol-mozilla-org.translate.goog/components/detail/form-header?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Header and Footer</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="field-set" data-pjax data-role="tree-link" data-test="field-set" href="https://protocol-mozilla-org.translate.goog/components/detail/field-set?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Field Set</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Button Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-form" data-pjax data-role="tree-link" data-test="example-form" href="https://protocol-mozilla-org.translate.goog/components/detail/example-form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Form</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="language-switcher" data-pjax data-role="tree-link" data-test="language-switcher" href="https://protocol-mozilla-org.translate.goog/components/detail/language-switcher?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Language Switcher</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-layout"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-layout-items"> Layout </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-layout-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Content Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Columns</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Card Layout</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-components-collection-main-with-sidebar"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-main-with-sidebar-items"> Main With Sidebar </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-main-with-sidebar-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Main With Sidebar</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="example-sidebar-menu" data-pjax data-role="tree-link" data-test="example-sidebar-menu" href="https://protocol-mozilla-org.translate.goog/components/detail/example-sidebar-menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example Sidebar Menu</span> </a></li> </ul></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu List</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="modal" data-pjax data-role="tree-link" data-test="modal" href="https://protocol-mozilla-org.translate.goog/components/detail/modal?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Modal</span> </a></li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-navigation"><button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-navigation-items"> Navigation </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-navigation-items"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Navigation</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu" data-pjax data-role="tree-link" data-test="menu" href="https://protocol-mozilla-org.translate.goog/components/detail/menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-item" data-pjax data-role="tree-link" data-test="menu-item" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-item?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Menu Item</span> </a></li> </ul></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Newsletter</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Notification Bar</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Picto</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="section-heading" data-pjax data-role="tree-link" data-test="section-heading" href="https://protocol-mozilla-org.translate.goog/components/detail/section-heading?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Section Heading</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sidebar-menu" data-pjax data-role="tree-link" data-test="sidebar-menu" href="https://protocol-mozilla-org.translate.goog/components/detail/sidebar-menu?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sidebar Menu</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Split</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky Promo</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="video" data-pjax data-role="tree-link" data-test="video" href="https://protocol-mozilla-org.translate.goog/components/detail/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Video</span> </a></li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree"> <div class="Tree-header"> <h3 class="Tree-title">Information</h3> </div> <dl class="Tree-aside"> <div> <dt class="Tree-asideTerm"> Built on: </dt> <dd class="Tree-asideDescription"><time datetime="2024-04-04T23:38:30.598Z"> Apr 4, 2024 </time> </dd> </div> </dl> </div> </div> </div> <div class="Navigation-panel Navigation-panel--variants" data-role="variant-panel"> <div class="Navigation-backButtonWrapper"><button class="Navigation-backButton" data-role="back" type="button"> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.41421 12L12.7071 18.2929C13.0976 18.6834 13.0976 19.3166 12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z" /> </svg> Back </button> </div> <div class="Navigation-group" data-role="variant-group" data-component="links"> <div class="Tree" data-behaviour="tree" id="tree-links-variants"> <div class="Tree-header"> <h3 class="Tree-title">Links Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links--default" href="https://protocol-mozilla-org.translate.goog/components/detail/links--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="links" data-pjax data-role="tree-link" data-test="links--call-to-action" href="https://protocol-mozilla-org.translate.goog/components/detail/links--call-to-action?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Call To Action</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="lists"> <div class="Tree" data-behaviour="tree" id="tree-lists-variants"> <div class="Tree-header"> <h3 class="Tree-title">Lists Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists--default" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="lists" data-pjax data-role="tree-link" data-test="lists--inline" href="https://protocol-mozilla-org.translate.goog/components/detail/lists--inline?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Inline</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="logo"> <div class="Tree" data-behaviour="tree" id="tree-logo-variants"> <div class="Tree-header"> <h3 class="Tree-title">Logo Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--default" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--centered-on-mobile" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--centered-on-mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered On Mobile</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--products" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--products?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Products</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="logo" data-pjax data-role="tree-link" data-test="logo--sizes" href="https://protocol-mozilla-org.translate.goog/components/detail/logo--sizes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sizes</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="wordmark"> <div class="Tree" data-behaviour="tree" id="tree-wordmark-variants"> <div class="Tree-header"> <h3 class="Tree-title">Wordmark Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--default" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--centered-on-mobile" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--centered-on-mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered On Mobile</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--products" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--products?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Products</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="wordmark" data-pjax data-role="tree-link" data-test="wordmark--sizes" href="https://protocol-mozilla-org.translate.goog/components/detail/wordmark--sizes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sizes</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="zap"> <div class="Tree" data-behaviour="tree" id="tree-zap-variants"> <div class="Tree-header"> <h3 class="Tree-title">Zap Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap--default" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="zap" data-pjax data-role="tree-link" data-test="zap--all-styles" href="https://protocol-mozilla-org.translate.goog/components/detail/zap--all-styles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>All Styles</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="button"> <div class="Tree" data-behaviour="tree" id="tree-button-variants"> <div class="Tree-header"> <h3 class="Tree-title">Button Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--primary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Primary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--primary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--primary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Primary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--secondary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--secondary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product-secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product-secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product Secondary</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--product-secondary-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--product-secondary-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Product Secondary Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--neutral" href="https://protocol-mozilla-org.translate.goog/components/detail/button--neutral?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Neutral</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--neutral-dark" href="https://protocol-mozilla-org.translate.goog/components/detail/button--neutral-dark?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Neutral Dark</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-small" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-medium" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-medium?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Medium</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-large" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--size-extra-large" href="https://protocol-mozilla-org.translate.goog/components/detail/button--size-extra-large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Size Extra Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/button--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button" data-pjax data-role="tree-link" data-test="button--with-icon" href="https://protocol-mozilla-org.translate.goog/components/detail/button--with-icon?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>With Icon</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="callout"> <div class="Tree" data-behaviour="tree" id="tree-callout-variants"> <div class="Tree-header"> <h3 class="Tree-title">Callout Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--default" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--content-width" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--content-width?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Content Width</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--compact" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--compact?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Compact</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="callout" data-pjax data-role="tree-link" data-test="callout--example" href="https://protocol-mozilla-org.translate.goog/components/detail/callout--example?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Example</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="card"> <div class="Tree" data-behaviour="tree" id="tree-card-variants"> <div class="Tree-header"> <h3 class="Tree-title">Card Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/card--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--extra-small" href="https://protocol-mozilla-org.translate.goog/components/detail/card--extra-small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Extra Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--small" href="https://protocol-mozilla-org.translate.goog/components/detail/card--small?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Small</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--medium" href="https://protocol-mozilla-org.translate.goog/components/detail/card--medium?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Medium</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--large" href="https://protocol-mozilla-org.translate.goog/components/detail/card--large?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Large</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card" data-pjax data-role="tree-link" data-test="card--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/card--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="details-component"> <div class="Tree" data-behaviour="tree" id="tree-details-component-variants"> <div class="Tree-header"> <h3 class="Tree-title">Details Component Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component--default" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="details-component" data-pjax data-role="tree-link" data-test="details-component--custom" href="https://protocol-mozilla-org.translate.goog/components/detail/details-component--custom?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Custom</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="download-button"> <div class="Tree" data-behaviour="tree" id="tree-download-button-variants"> <div class="Tree-header"> <h3 class="Tree-title">Download Button Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button--default" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="download-button" data-pjax data-role="tree-link" data-test="download-button--secondary" href="https://protocol-mozilla-org.translate.goog/components/detail/download-button--secondary?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Secondary</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="feature-card"> <div class="Tree" data-behaviour="tree" id="tree-feature-card-variants"> <div class="Tree-header"> <h3 class="Tree-title">Feature Card Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--default" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--left-half" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--left-half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Left Half</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--right-half" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--right-half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Right Half</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--left-third" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--left-third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Left Third</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="feature-card" data-pjax data-role="tree-link" data-test="feature-card--right-third" href="https://protocol-mozilla-org.translate.goog/components/detail/feature-card--right-third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Right Third</span> <div class="Status Status--unlabelled"> <div class="Status-dots"><span class="Status-dot" style="border-color: firebrick;" title="Deprecated"></span> </div> </div></a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="input"> <div class="Tree" data-behaviour="tree" id="tree-input-variants"> <div class="Tree-header"> <h3 class="Tree-title">Input Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--text" href="https://protocol-mozilla-org.translate.goog/components/detail/input--text?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Text</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--date" href="https://protocol-mozilla-org.translate.goog/components/detail/input--date?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Date</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--email" href="https://protocol-mozilla-org.translate.goog/components/detail/input--email?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Email</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--placeholder" href="https://protocol-mozilla-org.translate.goog/components/detail/input--placeholder?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Placeholder</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--password" href="https://protocol-mozilla-org.translate.goog/components/detail/input--password?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Password</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--file" href="https://protocol-mozilla-org.translate.goog/components/detail/input--file?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>File</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--search" href="https://protocol-mozilla-org.translate.goog/components/detail/input--search?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Search</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="input" data-pjax data-role="tree-link" data-test="input--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/input--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="select"> <div class="Tree" data-behaviour="tree" id="tree-select-variants"> <div class="Tree-header"> <h3 class="Tree-title">Select Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select--default" href="https://protocol-mozilla-org.translate.goog/components/detail/select--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="select" data-pjax data-role="tree-link" data-test="select--disabled" href="https://protocol-mozilla-org.translate.goog/components/detail/select--disabled?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Disabled</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="button-container"> <div class="Tree" data-behaviour="tree" id="tree-button-container-variants"> <div class="Tree-header"> <h3 class="Tree-title">Button Container Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--default" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--end-aligned" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--end-aligned?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>End Aligned</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--center-aligned" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--center-aligned?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Center Aligned</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="button-container" data-pjax data-role="tree-link" data-test="button-container--stretched" href="https://protocol-mozilla-org.translate.goog/components/detail/button-container--stretched?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Stretched</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="content-container"> <div class="Tree" data-behaviour="tree" id="tree-content-container-variants"> <div class="Tree-header"> <h3 class="Tree-title">Content Container Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--default" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--small-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--small-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Small Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--medium-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--medium-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Medium Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--large-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--large-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Large Container</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="content-container" data-pjax data-role="tree-link" data-test="content-container--extra-large-container" href="https://protocol-mozilla-org.translate.goog/components/detail/content-container--extra-large-container?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Extra Large Container</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="columns"> <div class="Tree" data-behaviour="tree" id="tree-columns-variants"> <div class="Tree-header"> <h3 class="Tree-title">Columns Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--two" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--two?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Two</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--three" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--three?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Three</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="columns" data-pjax data-role="tree-link" data-test="columns--four" href="https://protocol-mozilla-org.translate.goog/components/detail/columns--four?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Four</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="card-layout"> <div class="Tree" data-behaviour="tree" id="tree-card-layout-variants"> <div class="Tree-header"> <h3 class="Tree-title">Card Layout Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--overview" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Overview</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--half" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--half?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Half</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--third" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--third?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Third</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--quarter" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--quarter?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Quarter</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="card-layout" data-pjax data-role="tree-link" data-test="card-layout--hero" href="https://protocol-mozilla-org.translate.goog/components/detail/card-layout--hero?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Hero</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="main-with-sidebar"> <div class="Tree" data-behaviour="tree" id="tree-main-with-sidebar-variants"> <div class="Tree-header"> <h3 class="Tree-title">Main With Sidebar Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar--default" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="main-with-sidebar" data-pjax data-role="tree-link" data-test="main-with-sidebar--sidebar-right" href="https://protocol-mozilla-org.translate.goog/components/detail/main-with-sidebar--sidebar-right?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sidebar Right</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="menu-list"> <div class="Tree" data-behaviour="tree" id="tree-menu-list-variants"> <div class="Tree-header"> <h3 class="Tree-title">Menu List Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list--default" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="menu-list" data-pjax data-role="tree-link" data-test="menu-list--download" href="https://protocol-mozilla-org.translate.goog/components/detail/menu-list--download?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Download</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="navigation"> <div class="Tree" data-behaviour="tree" id="tree-navigation-variants"> <div class="Tree-header"> <h3 class="Tree-title">Navigation Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation--default" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="navigation" data-pjax data-role="tree-link" data-test="navigation--firefox" href="https://protocol-mozilla-org.translate.goog/components/detail/navigation--firefox?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Firefox</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="newsletter"> <div class="Tree" data-behaviour="tree" id="tree-newsletter-variants"> <div class="Tree-header"> <h3 class="Tree-title">Newsletter Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--default" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--errors" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--errors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Errors</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="newsletter" data-pjax data-role="tree-link" data-test="newsletter--success" href="https://protocol-mozilla-org.translate.goog/components/detail/newsletter--success?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Success</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="notification-bar"> <div class="Tree" data-behaviour="tree" id="tree-notification-bar-variants"> <div class="Tree-header"> <h3 class="Tree-title">Notification Bar Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--default" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--success" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--success?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Success</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--warning" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--warning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Warning</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--error" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--error?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Error</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--click" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--click?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Click</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--scripted" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--scripted?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Scripted</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="notification-bar" data-pjax data-role="tree-link" data-test="notification-bar--sticky" href="https://protocol-mozilla-org.translate.goog/components/detail/notification-bar--sticky?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Sticky</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="picto"> <div class="Tree" data-behaviour="tree" id="tree-picto-variants"> <div class="Tree-header"> <h3 class="Tree-title">Picto Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--default" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--centered" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--centered?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Centered</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="picto" data-pjax data-role="tree-link" data-test="picto--side" href="https://protocol-mozilla-org.translate.goog/components/detail/picto--side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Side</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="split"> <div class="Tree" data-behaviour="tree" id="tree-split-variants"> <div class="Tree-header"> <h3 class="Tree-title">Split Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--default" href="https://protocol-mozilla-org.translate.goog/components/detail/split--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--reversed" href="https://protocol-mozilla-org.translate.goog/components/detail/split--reversed?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Reversed</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--narrow-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--narrow-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Narrow Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--wide-body" href="https://protocol-mozilla-org.translate.goog/components/detail/split--wide-body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Wide Body</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--background" href="https://protocol-mozilla-org.translate.goog/components/detail/split--background?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Background</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-overflow" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-overflow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Overflow</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--constrained-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--constrained-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Constrained Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--pop-out-media" href="https://protocol-mozilla-org.translate.goog/components/detail/split--pop-out-media?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Pop Out Media</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--body-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--body-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Body Alignment</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="split" data-pjax data-role="tree-link" data-test="split--media-alignment" href="https://protocol-mozilla-org.translate.goog/components/detail/split--media-alignment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Media Alignment</span> </a></li> </ul> </div> </div> <div class="Navigation-group" data-role="variant-group" data-component="sticky-promo"> <div class="Tree" data-behaviour="tree" id="tree-sticky-promo-variants"> <div class="Tree-header"> <h3 class="Tree-title">Sticky Promo Variants</h3><button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z" /><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z" /> </svg></button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--default" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--default?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Default</span> </a></li> <li class="Tree-item Tree-entity" data-role="item"><a class="Tree-entityLink" data-handle="sticky-promo" data-pjax data-role="tree-link" data-test="sticky-promo--dark-theme" href="https://protocol-mozilla-org.translate.goog/components/detail/sticky-promo--dark-theme?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"> <span>Dark Theme</span> </a></li> </ul> </div> </div> </div> </nav> </div> </div> </div> <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.10.3"></script> <script src="../../theme/js/bidi.js"></script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>