<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
	<meta http-equiv="Content-Security-Policy" script-src='unsafe-inline';>

	<title>One Design</title>

	<meta name="robots" content="noindex">
	<meta name="description" content="One design guide that can be reused by all teams in order to create a solid experience">
	

	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132337208-1"></script>
	<script>
		var host = window.location.hostname;
		if(host != "localhost"){
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'UA-132337208-1');
		}
		
	</script>

	<link rel="canonical" href="/sitemap.xml">
	<link rel='shortcut icon' type='image/x-icon' href="/assets/img/favicon.ico">

	<link rel="stylesheet" href="/assets/css/ox.min.css">
	<link rel="stylesheet" href="/assets/css/docs.min.css">
</head>


<body class="dox-layout--vertical ">
	<input type="checkbox" class="dox-toggle-navigation" id="toggle-navigation" tabindex="2" />

	<header class="dox-layout__header" role="banner">
	<div class="dox-header-container">
		<a href="/" class="ox-header__logo" tabindex="1">
			<img src="https://ox.qone.mateco.eu/assets/img/logo/mateco.svg" alt="Mateco" class="ox-header__logo__img"/>
			<span class="ox-header__site-name ox-header__site-name--with-border">OX</span>
		</a>
		<label for="toggle-navigation" tabindex="0" class="ox-hamburger" role="button" aria-label="Toggle navigation">
	<span class="ox-hamburger__line ox-hamburger__line--top" role="none presentation"></span>
	<span class="ox-hamburger__line ox-hamburger__line--middle" role="none presentation"></span>
	<span class="ox-hamburger__line ox-hamburger__line--bottom" role="none presentation"></span>
</label>
	</div>
</header>

	<div class="dox-layout__primary-navigation-wrapper">
	<nav role="navigation" class="ox-navigation-container">
		<label for="toggle-navigation" class="ox-navigation-container__close"><span class="ox-icon ox-icon--close ox-icon--small"></span></label>
		<ul class="ox-navigation ox-navigation--grow" role="tree">
				<li class="ox-navigation__item" role="treeitem">
					<div class="ox-form__group dox-search">
							<form action="/search" method="get">
								<div class="ox-form__input-group ox-form__input-group--small ox-form__input-group--prepend">
									<input type="search" id="search-box" name="query" class="ox-form__field ox-form__field--small" placeholder="Search..." />
									<label for="search-box" class="ox-form__input-group__icon" role="presentation"><span class="ox-icon  ox-icon--search"></span></label>
								</div>
							</form>
						</div>
				</li>
			
			<li class="ox-navigation__item" role="treeitem"  >

				
				<a href="/foundations/design-principles" class="ox-navigation__item__link">Foundations</a>
				

				
				<ul class="ox-navigation__subnav" role="group">
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/foundations/design-principles" class="ox-navigation__item__link">Design principles</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/foundations/custom-properties" class="ox-navigation__item__link">Custom properties</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/foundations/colors" class="ox-navigation__item__link">Colors</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/foundations/typography" class="ox-navigation__item__link">Typography</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/foundations/icons" class="ox-navigation__item__link">Icons</a>
						
					</li>
					
				</ul>
				
			</li>
			
			<li class="ox-navigation__item" role="treeitem"  >

				
				<a href="/components/badges" class="ox-navigation__item__link">Components</a>
				

				
				<ul class="ox-navigation__subnav" role="group">
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/badges" class="ox-navigation__item__link">Badges</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/buttons" class="ox-navigation__item__link">Buttons</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/cards" class="ox-navigation__item__link">Cards</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/drop-menu" class="ox-navigation__item__link">Drop menu</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/filters" class="ox-navigation__item__link">Filters</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/forms/input-fields" class="ox-navigation__item__link">Forms</a>
						
						<ul class="ox-navigation__subsubnav" role="group">
							
							<li role="treeitem" class="ox-navigation__item" >
								<a href="/components/forms/input-fields" class="ox-navigation__item__link">Input fields</a>
							</li>
							
							<li role="treeitem" class="ox-navigation__item" >
								<a href="/components/forms/selection-controls" class="ox-navigation__item__link">Selection controls</a>
							</li>
							
							<li role="treeitem" class="ox-navigation__item" >
								<a href="/components/forms/file-upload" class="ox-navigation__item__link">File upload</a>
							</li>
							
							<li role="treeitem" class="ox-navigation__item" >
								<a href="/components/forms/taglist" class="ox-navigation__item__link">Taglist</a>
							</li>
							
							<li role="treeitem" class="ox-navigation__item" >
								<a href="/components/forms/filterable-dropdown" class="ox-navigation__item__link">Filterable dropdown</a>
							</li>
							
						</ul>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/header-nav" class="ox-navigation__item__link">Header & Navigation</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/links" class="ox-navigation__item__link">Links</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/lists" class="ox-navigation__item__link">Lists</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/loader" class="ox-navigation__item__link">Loader</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/modals" class="ox-navigation__item__link">Modals</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/navigation" class="ox-navigation__item__link">Navigation</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/notifications" class="ox-navigation__item__link">Notifications</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/pagination" class="ox-navigation__item__link">Pagination</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/popover" class="ox-navigation__item__link">Popover</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/progress-nav" class="ox-navigation__item__link">Progress navigation</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/tables" class="ox-navigation__item__link">Tables</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/toast" class="ox-navigation__item__link">Toast</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/components/tooltips" class="ox-navigation__item__link">Tooltips</a>
						
					</li>
					
				</ul>
				
			</li>
			
			<li class="ox-navigation__item" role="treeitem"  >

				
				<a href="/layouts/grid" class="ox-navigation__item__link">Layouts</a>
				

				
				<ul class="ox-navigation__subnav" role="group">
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/layouts/grid" class="ox-navigation__item__link">Grid</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/layouts/form" class="ox-navigation__item__link">Form</a>
						
					</li>
					
					<li role="treeitem" class="ox-navigation__item" >
						<a href="/layouts/page" class="ox-navigation__item__link">Page</a>
						
					</li>
					
				</ul>
				
			</li>
			
		</ul>
	</nav>
</div>


	<div class="ox-layout__main">
		<div class="ox-layout__main__intro">
			<div class="ox-container">
				

				
				

				<div class="ox-anchor-list">
					

				</div>
			</div>
		</div>

		<main role="main" class="ox-layout__main__content">
			<div class="ox-container">
				<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>daily</changefreq>
		<priority>1.0</priority>
	</url>
	
	
	<url>
		<loc>/components/badges/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/buttons/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/cards/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/foundations/colors/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/foundations/custom-properties/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/datepicker/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/foundations/design-principles/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/drop-menu/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/file-upload/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/filterable-dropdown/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/filters/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/form/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/grid/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/header-nav/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/horizontal-secondarynav/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/horizontal-sticky/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/horizontal/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/foundations/icons/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/authentication/idp/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/input-fields/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/links/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/lists/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/loader/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/main-fullwidth/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/main-secondarynav-fullwidth/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/main-secondarynav/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/main/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/modals/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/navigation/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/none/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/notifications/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/pagination/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/popover/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/progress-nav/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/search/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/selection-controls/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/tables/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/forms/taglist/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/toast/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/components/tooltips/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/foundations/typography/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/vertical-secondarynav/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/vertical-sticky/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
	
	<url>
		<loc>/layouts/page-layouts/vertical/</loc>
		<lastmod>2024-09-25T07:45:10+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.7</priority>
	</url>
	
	
</urlset>

			</div>
		</main>
		<footer role="footer" class="ox-layout__footer">
			<div class="ox-container">
				<p class="ox-text--centered"><a href="https://policy.qone.mateco.eu/cookie?opco=mateco&lang=en" class="ox-link ox-link--small">Cookie policy</a> | <a href="https://policy.qone.mateco.eu/privacy?opco=mateco&lang=en"  class="ox-link ox-link--small">Privacy policy</a></p>
			</div>
		</footer>
	</div>

	<script defer>
		const copyToClipboard = str => {
			const el = document.createElement('textarea');  // Create a <textarea> element
			el.value = str.trim();                                 // Set its value to the string that you want copied
			el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
			el.style.position = 'absolute';
			el.style.left = '-9999px';                      // Move outside the screen to make it invisible
			document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
			const selected =
				document.getSelection().rangeCount > 0        // Check if there is any content selected previously
					? document.getSelection().getRangeAt(0)     // Store selection if found
					: false;                                    // Mark as false to know no selection existed before
			el.select();                                    // Select the <textarea> content
			document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
			document.body.removeChild(el);                  // Remove the <textarea> element
			if (selected) {                                 // If a selection existed before copying
				document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
				document.getSelection().addRange(selected);   // Restore the original selection
			}
		};

		const stripDoxClasses = element => {
			const copyElement = element.cloneNode(true);
				const elementsWithDoxClasses = copyElement.querySelectorAll("[class*=dox-]");
				elementsWithDoxClasses.forEach(e => {
					const classes = [... e.classList];
					classes.forEach(className => {
						if(className.startsWith("dox-")) {
							e.classList.remove(className)
						}
					})
				});
				return stripComments(copyElement.innerHTML);
		}

		const stripComments = html => {
			return html.replace(/\s\t<\!--.*?-->/g, "");
		}

		const copyButtons = document.getElementsByClassName('dox-example__code__copy');
		for(const btn of copyButtons) {
			btn.addEventListener('click', (event) => {
				const element = event.currentTarget.parentElement.parentElement.getElementsByClassName('dox-example__content__to-copy')[0];
				const html = stripDoxClasses(element);
				copyToClipboard(html);
				const dataset = event.currentTarget.dataset;
				dataset.tooltip = "Copied!";
				setTimeout(() => {
					dataset.tooltip = "Copy code";
				}, 2000) // reset text after 2s
			})
		}
		</script>

		<script>
  window.onUsersnapCXLoad = function(api) {
    api.init();
  }
  var script = document.createElement('script');
  script.async = 1;
  script.src = 'https://widget.usersnap.com/load/5e04701f-80d9-4431-8ac8-f61a7aa9fd8e?onload=onUsersnapCXLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>
</body>

</html>
