CINXE.COM

<!doctype html> <html lang="en" dir="ltr"> <head> <title>ComboStrap Heading</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://combostrap.com/_media/favicon.ico?fetcher=raw&tseed=1743853218" rel="shortcut icon"/><link type="image/png" href="https://combostrap.com/_media/favicon-32x32.png?fetcher=raw&tseed=1743853218" rel="icon" sizes="32x32"/><link type="image/png" href="https://combostrap.com/_media/favicon-16x16.png?fetcher=raw&tseed=1743853218" rel="icon" sizes="16x16"/><link type="image/png" href="https://combostrap.com/_media/apple-touch-icon.png?fetcher=raster&tseed=1743853218" rel="apple-touch-icon" sizes="180x180"/><meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="heading,content,docs"/> <meta property="og:url" content="https://combostrap.com/content/combostrap-heading-8ehow19j"/> <meta name="apple-mobile-web-app-title" content="ComboStrap"/> <meta name="application-name" content="ComboStrap"/> <meta http-equiv="content-security-policy" content="block-all-mixed-content"/> <meta name="description" content="A description for the search page result engine"/> <meta property="og:description" content="A description for the search page result engine"/> <meta property="og:title" content="ComboStrap Heading"/> <meta property="og:description" content="A description for the search page result engine"/> <meta property="og:site_name" content="ComboStrap"/> <meta property="article:published_time" content="2025-04-05T11:40:23+0000"/> <meta property="article:modified_time" content="2025-04-05T11:40:18+0000"/> <meta property="og:type" content="article"/> <meta property="og:image:width" content="527"/> <meta property="og:image:height" content="273"/> <meta property="og:image:type" content="image/png"/> <meta property="og:image" content="https://combostrap.com/_media/logo-facebook.png?fetcher=raster&tseed=1743853218"/> <meta property="fb:app_id" content="486120022012342"/> <meta property="og:locale" content="en_US_POSIX"/> <meta name="generator" content="ComboStrap v1.25.3 (2024-05-13)"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="ComboStrap Heading"/> <meta name="twitter:creator" content="@combostrapweb"/> <meta name="twitter:creator:id" content="1283330969332842497"/> <meta name="twitter:description" content="A description for the search page result engine"/> <meta name="twitter:site" content="@combostrapweb"/> <meta name="twitter:site:id" content="1283330969332842497"/> <meta name="twitter:image" content="https://combostrap.com/_media/docs/content/undraw_add_content_re_vgqa.png?fetcher=raster&tseed=1743853218"/> <meta name="twitter:image:alt" content="Undraw Add Content Re Vgqa"/> <meta name="twitter:dnt" content="on"/> <meta name="twitter:widgets:csp" content="on"/> <meta name="twitter:widgets:theme" content="light"/> <meta name="twitter:widgets:border-color" content="#55acee"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="ComboStrap"/> <link rel="start" href="/"/> <link rel="contents" href="/docs/content/heading?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=docs:content"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/docs/content/heading"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/docs/content/heading"/> <link rel="canonical" href="https://combostrap.com/content/combostrap-heading-8ehow19j"/> <link rel="me" href="https://twitter.com/combostrapweb"/> <link class="snippet-prism-cs" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.css" crossorigin="anonymous" integrity="sha256-kK4/JIYJUKI4Zdg9ZQ7FYyRIqeWPfYKi5QZHO2n/lJI=" rel="stylesheet"/> <link class="snippet-prism-cs" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/command-line/prism-command-line.css" crossorigin="anonymous" integrity="sha256-UvoA9bIYCYQkCMTYG5p2LM8ZpJmnC4G8k0oIc89nuQA=" rel="stylesheet"/> <link class="snippet-prism-cs" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-highlight/prism-line-highlight.min.css" crossorigin="anonymous" integrity="sha512-nXlJLUeqPMp1Q3+Bd8Qds8tXeRVQscMscwysJm821C++9w6WtsFbJjPenZ8cQVMXyqSAismveQJc0C1splFDCA==" rel="stylesheet"/> <link class="snippet-prism-cs" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.css" crossorigin="anonymous" integrity="sha256-ye8BkHf2lHXUtqZ18U0KI3xjJ1Yv7P8lvdKBt9xmVJM=" rel="stylesheet"/> <link class="snippet-prism-cs" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" crossorigin="anonymous" integrity="sha256-ko4j5rn874LF8dHwW29/xabhh8YBleWfvxb8nQce4Fc=" rel="stylesheet"/> <link class="snippet-bootstrap-cs" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" rel="stylesheet"/>  <script class="snippet-bootstrap-cs" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" defer=""></script> <script class="snippet-bootstrap-cs" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha256-d+FygkWgwt59CFkWPuCB4RE6p1/WiUYCy16w1+c5vKk=" defer=""></script> <script src="/lib/exe/jquery.php?tseed=f0349b609f9b91a485af8fd8ecd4aea4" defer="">/*<![CDATA[*/ /*!]]>*/</script> <script >/*<![CDATA[*/var NS='docs:content';var JSINFO = {"navigation":"anonymous","move_renameokay":false,"move_allowrename":false,"id":"docs:content:heading","namespace":"docs:content","ACT":"show","useHeadingNavigation":1,"useHeadingContent":1}; /*!]]>*/</script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=d9a3749a19b804e4c4419a2b75f037f2&wcacc=public" defer="">/*<![CDATA[*/ /*!]]>*/</script> <script type="application/combo+cache+json">/*<![CDATA[*/{":docs:content:heading":{"metadata":{"result":true,"mtime":"2025-04-05T22:59:38+00:00","file":":3:36bc117492ba8665ead6ad47f5f343d2.metadata"},"i":{"result":true,"mtime":"2025-04-05T12:06:10+00:00","file":":3:36bc117492ba8665ead6ad47f5f343d2.i"},"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":3:36bc117492ba8665ead6ad47f5f343d2.xhtml","dependency":[]}},":slot_header":{"metadata":{"result":true,"mtime":"2025-04-05T11:42:18+00:00","file":":c:ce6649d65bb96aca6675dfcba60d47d0.metadata"},"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":c:ce6649d65bb96aca6675dfcba60d47d0.xhtml","dependency":[]},"snippet.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":c:ce6649d65bb96aca6675dfcba60d47d0.snippet.json"},"i":{"result":true,"mtime":"2025-04-05T11:41:45+00:00","file":":c:ce6649d65bb96aca6675dfcba60d47d0.i"}},":slot_footer":{"metadata":{"result":true,"mtime":"2025-04-05T21:55:38+00:00","file":":6:6f63758e7a296f156da10ff6c539b055.metadata"},"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":6:6f63758e7a296f156da10ff6c539b055.xhtml","dependency":[]},"snippet.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":6:6f63758e7a296f156da10ff6c539b055.snippet.json"},"i":{"result":true,"mtime":"2025-04-05T11:41:45+00:00","file":":6:6f63758e7a296f156da10ff6c539b055.i"}},":slot:main-header.md":{"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":2:225e73808bee2322cd80b769bcd62db9.xhtml","dependency":["requested_page","page_primary_meta"]},"deps.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":e:efb698901375b6b37dbb473d04482323.deps.json"},"i":{"result":true,"mtime":"2025-04-05T11:42:22+00:00","file":":e:efb698901375b6b37dbb473d04482323.i"}},":slot_main_footer":{"metadata":{"result":true,"mtime":"2025-04-05T11:42:22+00:00","file":":b:b5c4d4f1399184cdc631b8b05987ca24.metadata"},"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":4:478a1cfcbb729beb2742976c08535b01.xhtml","dependency":["backlinks","requested_page"]},"deps.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":b:b5c4d4f1399184cdc631b8b05987ca24.deps.json"},"i":{"result":true,"mtime":"2025-04-05T11:42:22+00:00","file":":b:b5c4d4f1399184cdc631b8b05987ca24.i"}},":docs:sidebar":{"metadata":{"result":true,"mtime":"2025-04-05T11:42:22+00:00","file":":c:c96cbda290a539e35a38eef73c79416e.metadata"},"xhtml":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":a:a81accd6a8bed7d3df3d91544663b39b.xhtml","dependency":["page_primary_meta","page_system","requested_namespace"]},"snippet.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":a:a81accd6a8bed7d3df3d91544663b39b.snippet.json"},"deps.json":{"result":false,"mtime":"2025-04-05T22:59:38+00:00","file":":c:c96cbda290a539e35a38eef73c79416e.deps.json"},"i":{"result":true,"mtime":"2025-04-05T11:42:22+00:00","file":":c:c96cbda290a539e35a38eef73c79416e.i"}}} /*!]]>*/</script> <script type="application/ld+json">/*<![CDATA[*/{ "@context": "https://schema.org", "@type": "Article", "url": "https://combostrap.com/content/combostrap-heading-8ehow19j", "headline": "ComboStrap Heading", "datePublished": "2025-04-05T11:40:23+00:00", "dateModified": "2025-04-05T11:40:18+00:00", "publisher": { "@type": "Organization", "name": "ComboStrap", "logo": { "@type": "ImageObject", "url": "https://combostrap.com/_media/apple-touch-icon.png?fetcher=raster&tseed=1743853218" } }, "speakable": { "@type": "SpeakableSpecification", "xpath": [ "/html/head/title", "/html/head/meta[@name='description']/@content" ] } } /*!]]>*/</script> <script class="snippet-outline-anchor-cs" src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" crossorigin="anonymous" integrity="sha256-LGOWMG4g6/zc0chji4hZP1d8RxR2bPvXMzl/7oPZqjs=" defer=""></script> <script class="snippet-outline-anchor-cs">/*<![CDATA[*//* global anchors */ document.addEventListener('DOMContentLoaded', () => { anchors.options = { placement: 'right', icon: '#', class: 'anchor-cs', visible: "hover" }; anchors .add(".outline-heading") .add("main section > h2") .add("main section > h3") .add("main section > h4") .add("main section > h5") .add("main section > h6") }); /*!]]>*/</script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js" crossorigin="anonymous" integrity="sha256-vlRYHThwdq55dA+n1BKQRzzLwFtH9VINdSI68+5JhpU=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js" crossorigin="anonymous" integrity="sha256-FyIVdIHL0+ppj4Q4Ft05K3wyCsYikpHIDGI7dcaBalU=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js" crossorigin="anonymous" integrity="sha256-gBzABGbXfQYYnyr8xmDFjx6KGO9dBYuypG1QBjO76pY=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" crossorigin="anonymous" integrity="sha512-pUNGXbOrc+Y3dm5z2ZN7JYQ/2Tq0jppMDOUsN4sQHVJ9AUQpaeERCUfYYBAnaRB9r8d4gtPKMWICNhm3tRr4Fg==" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-language/prism-show-language.min.js" crossorigin="anonymous" integrity="sha256-Z3GTw2RIadLG7KyP/OYB+aAxVYzvg2PByKzYrJlA1EM=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/command-line/prism-command-line.min.js" crossorigin="anonymous" integrity="sha256-9WlakH0Upf3N8DDteHlbeKCHxSsljby+G9ucUCQNiU0=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-highlight/prism-line-highlight.min.js" crossorigin="anonymous" integrity="sha512-O5GVPBZIURR9MuNiCjSa1wNTL3w91tojKlgCXmOjWDT5a3+9Ms+wGsTkBO93PI3anfdajkJD0sJiS6qdQq7jRA==" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js" crossorigin="anonymous" integrity="sha256-K837BwIyiXo5k/9fCYgqUyA14bN4/Ve9P2SIT0KmZD0=" defer=""></script> <script class="snippet-prism-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/download-button/prism-download-button.min.js" crossorigin="anonymous" integrity="sha256-CQyVQ5ejeTshlzOS/eCiry40br9f4fQ9jb5e4qPl7ZA=" defer=""></script> <script class="snippet-prism-cs">/*<![CDATA[*/window.addEventListener('load', (event) => { Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, }); }); window.addEventListener('load', (event) => { Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, }); }); window.addEventListener('load', (event) => { Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, }); }); window.addEventListener('load', (event) => { Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, }); }); window.addEventListener('load', (event) => { Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-trailing': true, 'remove-indent': true, 'left-trim': true, 'right-trim': true, }); }); /*!]]>*/</script> <script class="snippet-prism-autoloader-cs" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" defer=""></script> <script class="snippet-webcode-cs">/*<![CDATA[*/let WEBCODE = (function () { /** * Adjust the height of an iframe to his content * @param iframeElement */ let adjustHeightToFitContent = function (iframeElement) { let htmlIFrameElement = iframeElement.contentWindow.document.querySelector("html"); let calculatedHeight = htmlIFrameElement.offsetHeight; let defaultHtmlElementHeight = 150; if (calculatedHeight === defaultHtmlElementHeight) { // body and not html because html has a default minimal height of 150 calculatedHeight = iframeElement.contentWindow.document.querySelector("body").offsetHeight; // After setting the height, there is a recalculation and the padding of a descendant phrasing content element // may ends up in the html element. The below code corrects that requestAnimationFrame(function () { if (calculatedHeight !== htmlIFrameElement.offsetHeight) { iframeElement.height = htmlIFrameElement.offsetHeight; } }); } iframeElement.height = calculatedHeight; } return {adjustHeightToFitContent: adjustHeightToFitContent} })(); window.addEventListener('load', function () { const IframeObserver = new MutationObserver(function (mutationList) { mutationList .filter(mutation => { // in a iframe, you need to test against the browsing content, not // mutation.target instanceof HTMLElement but ... return mutation.target instanceof mutation.target.ownerDocument.defaultView.HTMLElement }) .forEach((mutation) => { let iframe = mutation.target.ownerDocument.defaultView.frameElement; WEBCODE.adjustHeightToFitContent(iframe); }); }) document.querySelectorAll("iframe.webcode-cs").forEach(iframe => { // if height is not set manually const height = iframe.getAttribute('height'); if (height === null) { // Set the height of the iframe to be the height of the internal iframe WEBCODE.adjustHeightToFitContent(iframe); IframeObserver.observe(iframe.contentWindow.document, {attributes: true, childList: true, subtree: true}); } }); }); /*!]]>*/</script> <script class="snippet-menubar-fixed-top-cs">/*<![CDATA[*/(function IIFE() { let bodyElementWasChanged = false; let fixedMenuSelector = `.navbar[data-type="fixed-top"]`; /** * anchor scroll: * Add the target style before anchor navigation * otherwise the content is below the menubar */ window.addEventListener("DOMContentLoaded", function () { let fixedNavbar = document.querySelector(fixedMenuSelector) if (fixedNavbar == null) { return; } let offsetHeight = fixedNavbar.offsetHeight; // correct direct navigation via fragment to heading let style = document.createElement("style"); style.classList.add("menubar-fixed-top") // textContent and not innerText (it adds br elements) style.textContent = `:target { scroll-margin-top: ${offsetHeight}px; }`; document.head.appendChild(style); }) /** * We do the work after the first scroll * to prevent a bad cls (content layout shift) metrics * from Google search */ window.addEventListener("scroll", function () { if (bodyElementWasChanged) { return; } // Case on mobile when the menu is expanded // in this case, we don't calculate the offset // otherwise it would take the height of the menu bar let activeElement = document.activeElement; if( activeElement.classList.contains('navbar-toggler') && activeElement.getAttribute("aria-expanded")==="true" ){ return; } bodyElementWasChanged = true; /** * The request animation frame is there to * update the class on the navbar and the padding on the * body at the same time to not have any layout shift */ window.requestAnimationFrame(function () { let fixedNavbar = document.querySelector(fixedMenuSelector) if (fixedNavbar == null) { return; } let offsetHeight = fixedNavbar.offsetHeight; fixedNavbar.classList.add("fixed-top") // correct body padding document.body.style.setProperty("padding-top", offsetHeight + "px"); }); }); })(); /*!]]>*/</script> <script class="snippet-tooltip-cs">/*<![CDATA[*/window.addEventListener('load', function () { let namespace = "-bs" let version = 5; if (typeof jQuery != 'undefined' && typeof jQuery.fn.tooltip.constructor.VERSION !== 'undefined') { version = parseInt(jQuery.fn.tooltip.Constructor.VERSION.substr(0, 1), 10); if (version < 5) { namespace = ""; } jQuery(`[data${namespace}-toggle="tooltip"]`).tooltip(); } else if (typeof bootstrap.Tooltip.VERSION !== 'undefined') { version = parseInt(bootstrap.Tooltip.VERSION.substr(0, 1), 10); if (version < 5) { namespace = ""; } document.querySelectorAll(`[data${namespace}-toggle="tooltip"]`).forEach(el => new bootstrap.Tooltip(el)); } }); /*!]]>*/</script> <script class="snippet-combo-debounce-cs">/*<![CDATA[*/// noinspection ES6ConvertVarToLetConst window.combos = (function (module){ /** * * @param callBack - the function to debounce * @param interval - in ms * @param leadingExecution - if true, the execution happens before the interval * @returns {(function(): void)|*} */ module.debounce = function (callBack, interval, leadingExecution = false) { // the schedule identifier, if it's not null/undefined, a callBack function was scheduled let timerId; return function () { // Does the previous run has schedule a run let wasFunctionScheduled = (typeof timerId === 'number'); // Delete the previous run (if timerId is null, it does nothing) clearTimeout(timerId); // Capture the environment (this and argument) and wraps the callback function let funcToDebounceThis = this, funcToDebounceArgs = arguments; let funcToSchedule = function () { // Reset/delete the schedule clearTimeout(timerId); timerId = null; // trailing execution happens at the end of the interval if (!leadingExecution) { // Call the original function with apply callBack.apply(funcToDebounceThis, funcToDebounceArgs); } } // Schedule a new execution at each execution timerId = setTimeout(funcToSchedule, interval); // Leading execution if (!wasFunctionScheduled && leadingExecution) callBack.apply(funcToDebounceThis, funcToDebounceArgs); } } return module; }(window.combos || {})); /*!]]>*/</script> <script class="snippet-combo-search-box-cs" src="/_media/snippet/js/combo-search-box.js?drive=combo&fetcher=raw&tseed=1743853155" crossorigin="anonymous" defer=""></script> <script class="snippet-search-cs">/*<![CDATA[*/window.addEventListener('load', function () { let getSuggestedPagesAsAnchor = async function (searchTerm) { let formData = new URLSearchParams(); formData.append('call', 'combo'); formData.append('fetcher', 'page-search'); formData.append('q', searchTerm); let response = await fetch(DOKU_BASE + 'lib/exe/ajax.php', { method: "POST", body: formData, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, }); let htmlSuggestedPages = await response.json(); if (!Array.isArray(htmlSuggestedPages)) { throw Error("The received suggest pages are not in a json array format"); } let divContainer = document.createElement('div'); for (let suggestPage of htmlSuggestedPages) { // Trim to never return a text node of whitespace as the result divContainer.insertAdjacentHTML('beforeend',suggestPage.trim()) } return [...divContainer.childNodes]; } combos.searchBox .create("internal-search-box", getSuggestedPagesAsAnchor) .init(); }); var DOKU_BASE='/'; /*!]]>*/</script> <script class="snippet-combo-cs" src="/_media/library/combo/combo.min.js?drive=combo&fetcher=raw&tseed=1743853155" crossorigin="anonymous" defer=""></script> <script class="snippet-lightbox-cs">/*<![CDATA[*/ window.addEventListener("DOMContentLoaded", function () { document.querySelectorAll(".lightbox-cs").forEach((lightBoxAnchor) => { let drag = false; lightBoxAnchor.addEventListener('mousedown', () => drag = false); lightBoxAnchor.addEventListener('mousemove', () => drag = true); /** * Click is an event that appears after mouseup */ let startX; let startY; let delta = 6; lightBoxAnchor.addEventListener("click", async function (event) { // we open the lightbox on mouseup event.preventDefault(); }); lightBoxAnchor.addEventListener("mousedown", async function (event) { // capture the position to see if it's a drag or a click startX = event.pageX; startY = event.pageY; }); lightBoxAnchor.addEventListener("mouseup", event => { const diffX = Math.abs(event.pageX - startX); const diffY = Math.abs(event.pageY - startY); if (diffX < delta && diffY < delta) { // A click openLightbox(); } }); let openLightbox = function () { const combo = /** @type {import('combo.d.ts')} */ (window.combo); let lightBoxId = combo.Html.toHtmlId(`combo-lightbox`); let lightBoxModel = combo.Modal.getOrCreate(lightBoxId); let src = lightBoxAnchor.getAttribute("href"); let img = lightBoxAnchor.querySelector("img"); let alt = "Image"; if (img !== null && img.hasAttribute("alt")) { alt = img.getAttribute("alt"); } let namespace = "-bs" const bootstrap = /** @type {import('bootstrap.d.ts')} */ (window.bootstrap); let bsVersion = parseInt(bootstrap.Modal.VERSION.substring(0, 1), 10); if (bsVersion < 5) { namespace = ""; } let svgStyle = "max-height:95vh;max-width:95vw"; if (src.match(/svg/i) !== null) { // a svg does not show without width // because the intrinsic svg can be tiny, we put a min with svgStyle += ';width: 100%;min-width: 75vw' } let dataDismissAttribute = `data${namespace}-dismiss`; let html = ` <button type="button" class="lightbox-close-cs" ${dataDismissAttribute}="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <img src="${src}" alt="${alt}" style="${svgStyle}"/> ` lightBoxModel .resetIfBuild() .centered() .addDialogStyle("max-width", "fit-content") .addBody(html) .addBodyStyle("padding", "0") .noFooter() .show(); } }); }); /*!]]>*/</script> <script class="snippet-subscribe-cs">/*<![CDATA[*/window.addEventListener('load', function () { (function (combo) { 'use strict'; let componentName = "subscribe"; const subscribeComponentSelector = `.${componentName}-cs`; const forms = document.querySelectorAll(`${subscribeComponentSelector} form`); Array.from(forms).forEach(form => { form.addEventListener('submit', async (event) => { event.preventDefault(); event.stopPropagation(); if (form.checkValidity()) { let url = new URL(form.getAttribute("action")); let formData = new FormData(form); let response = await fetch(url, { body: formData, method: "post", }); /** * Modal */ let idResultModal = combo.Html.createRandomIdWithPrefix(componentName); let modal = combo.Modal.getOrCreate(idResultModal); const button = event.target; let componentElement = button.closest(subscribeComponentSelector); modal.setPlacementBottomToElement(componentElement); let message; try { let data = await response.json(); message = data.message; } catch (e) { // in case of network error } if (response.status !== 200) { modal.setHeader("Error"); if (typeof message === 'undefined') { message = "Sorry. The server seems to be down."; } } else { let header = form.getAttribute("data-success-header"); if (header === null) { header = "Hurray!"; } modal.setHeader(header); message = form.getAttribute("data-success-content"); if (message === null) { message = "A validation email has been send. <br>Check your mailbox and click on the validation link.<br>If you don't find our email, check your spambox."; } } modal .addBody(message) .show(); } }, false); }); })(combo); }); /*!]]>*/</script> <script class="snippet-combo-loader-cs">/*<![CDATA[*/// noinspection ES6ConvertVarToLetConst var combos = (function (module) { module.loader = { loadExternalScript: function (src, integrity, clazz, callback) { let script = document.createElement('script'); script.src = src; // Set the location of the script script.integrity = integrity; script.crossOrigin = "anonymous"; script.referrerPolicy = "no-referrer"; script.classList.add(clazz); script.addEventListener("load", callback); let head = document.querySelector("head"); head.appendChild(script); }, loadExternalStylesheet: function (href, integrity, clazz, callback) { let link = document.createElement('link'); link.rel = "stylesheet" link.href = href; link.integrity = integrity; link.crossOrigin = "anonymous"; link.classList.add(clazz); let head = document.querySelector("head"); head.appendChild(link); link.addEventListener("load", callback); } }; return module; })(combos || {}); /*!]]>*/</script> <script class="snippet-carrousel-cs" src="/_media/snippet/js/carrousel.js?drive=combo&fetcher=raw&tseed=1743853155" crossorigin="anonymous" defer=""></script> <script class="snippet-sharer-cs" src="https://cdn.jsdelivr.net/npm/sharer.js@0.5.0/sharer.min.js" crossorigin="anonymous" integrity="sha256-AqqY/JJCWPQwZFY/mAhlvxjC5/880Q331aOmargQVLU=" defer=""></script> <script class="snippet-page-explorer-tree-cs">/*<![CDATA[*/// Because we may redirect a canonical, the URL cannot be used to discover the id window.addEventListener("load", function () { let currentId = JSINFO["id"]; let currentIdParts = currentId.split(":").filter(el => el.length !== 0); document.querySelectorAll(".page-explorer-tree-cs").forEach(element => { let baseId = element.dataset.wikiId; let baseParts = baseId.split(":").filter(el => el.length !== 0); let processedIdArray = []; for (const [index, currentPart] of currentIdParts.entries()) { processedIdArray.push(currentPart); if (index < baseParts.length) { if (currentPart === baseParts[index]) { continue; } } let processedId = processedIdArray.join(":") if (index < currentIdParts.length - 1) { let button = element.querySelector(`button[data-wiki-id='${processedId}']`); if (button != null) { button.click(); } } else { let link = element.querySelector(`a[data-wiki-id='${processedId}']`); if (link != null) { link.classList.add("active"); } } } }); }); /*!]]>*/</script> <script class="snippet-template-cs">/*<![CDATA[*//** * Move the side slot in the toc area * on media larger than 992 */ window.addEventListener("load", function () { let mediaListener = function (mediaQuery) { let side = document.getElementById("main-side"); if (side === null) { // may be deleted if it does not exist return; } if (mediaQuery.matches) { if (side.parentElement.getAttribute("id") !== "main-toc") { let toc = document.getElementById("main-toc"); toc.appendChild(side); } } else { if (side.previousElementSibling.getAttribute("id") !== "main-content") { let mainContent = document.getElementById("main-content"); mainContent.insertAdjacentElement('afterend', side) } } } let minWidthMediaQuery = window.matchMedia('(min-width:992px)'); mediaListener(minWidthMediaQuery); minWidthMediaQuery.addEventListener("change", mediaListener); }); /*!]]>*/</script>  <style class="snippet-outline-cs">.outline-heading-cs { background-color: inherit; /* The content will go outside of the parent The border will stop to the end of the content */ /*noinspection CssInvalidPropertyValue*/ /* The content may become so long that it goes outside the parent max width prevent it */ max-width: 100%; text-decoration: underline #8cacbb solid; color: #000; font-weight: bold; } section.outline-level-3-cs, section.outline-level-4-cs, section.outline-level-5-cs, section.outline-level-6-cs { margin-left: 15px; } /* No margin left on small screen */ @media (min-width: 0px) and (max-width: 576px) { .outline-section-cs { margin-left: 0 !important; } } .outline-section-cs, .outline-header-cs { position: relative; } </style> <style class="snippet-outline-heading-numbering-cs">#main-content { counter-reset: h2; } #main-content > h2.outline-heading-cs { counter-increment: h2 1; counter-reset: h3 h4 h5 h6;} #main-content > h3.outline-heading-cs { counter-increment: h3 1; counter-reset: h4 h5 h6;} #main-content > h4.outline-heading-cs { counter-increment: h4 1; counter-reset: h5 h6;} #main-content > h5.outline-heading-cs { counter-increment: h5 1; counter-reset: h6;} #main-content > h6.outline-heading-cs { counter-increment: h6 1; } #main-content section.outline-level-2-cs { counter-increment: h2; counter-reset: h3 h4 h5 h6;} #main-content section.outline-level-3-cs { counter-increment: h3; counter-reset: h4 h5 h6;} #main-content section.outline-level-4-cs { counter-increment: h4; counter-reset: h5 h6;} #main-content section.outline-level-5-cs { counter-increment: h5; counter-reset: h6;} #main-content h2.outline-heading-cs::before { content: "" counter(h2, decimal) " - \A"; } #main-content h3.outline-heading-cs::before { content: "" counter(h2, decimal) "." counter(h3,decimal) " - \A"; } #main-content h4.outline-heading-cs::before { content: "" counter(h2, decimal) "." counter(h3,decimal) "." counter(h4,decimal) " - \A"; } #main-content h5.outline-heading-cs::before { content: "" counter(h2, decimal) "." counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) " - \A"; } #main-content h6.outline-heading-cs::before { content: "" counter(h2, decimal) "." counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) "." counter(h6,decimal) " - \A"; }</style> <style class="snippet-heading-cs">h1, h2, h3, h4, h5, h6 { /** same as p */ margin-bottom: 1rem; } </style> <style class="snippet-link-cs">a.link-external:not(.btn):not(.nav-link):not(.dropdown-item) { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABdklEQVR4AWMgAVRo1zY3rGk41rC+rqvCBCJWBpPM4WoomLHtdtuv/t9Lfk263TtrQ0t7Oj9cbzZDc/W6s/8T7khD+P+F/8bv29PZlswJVVBu0vPuVZyNYHFZbmAqE1SR0cbjXR6pjGBO58am962Ta3e3ftqy6B5LCcMasOj7gInrm9jBzI4vTX+bfjT/7/4/p/w/zFXybUmt71u4wJzGfxP/t/xvA+KaP2XnQSKVFpWPav/U/6+HKJjz++OVJUDp1n9N/+r+19QyMCz1mPC/8X/X/26Igrn3GiUeL5n/v+F/8//6/9NOMTC0hDUDefP/L4MoOL6ickVeSQ1QqAGooPdBJE/lnloge/fhixBHftFd9bLkR83/+n/1QAXVP8qX1Pyv/L/s/12f/4xQNz8s3Pa/6X/Vvzqgour/5f/r/q//f2fmLy54WP7lfJN74eMSoKIyoNFz/5/+9ar+Px9aZL3Xfjvz7aO3/96+eLvsnSVE7CPhOAYA9nvIX0UoNU8AAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 0 center; padding: 0 0 0 18px; } a.link-mail:not(.btn):not(.nav-link):not(.dropdown-item) { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABOUlEQVR4AaXJMWoUUQDG8f/33ltldyZB3E2xaCAxIQREFKwD2lhb6QmsxMIL6BlU8AhCjmBADdqlWLyACKZKF7LZmUzmzXwiSMTKwl/7478Jng9OXa5fviRzwTS5/j40OcHo2fSofH10tUcXHVg9q54cj3kleOnRj/uHh3e+FVgCbK2drX/dn5xuogAD8uqnyfXZRi3J+tXN2uxj2WwkEgFw0vnW3srmwbU2K2uat2fvi/ObSbII0Kl3VL+9O975PPXEOwe7sb8dZXfqSGB6YWm89Wb+dF+jt+3K3ZoeYUDwwgOjK14wV7tHNXhYUvgEqzUhQeegZVcsSOYBRFeCIXN3ggBoiYYTJBOJIHmhhiWEEHzwl3ycIhjxm5y1nO8FYoJbj268A0D8ISAWj0HQyEOE+Zuwasy//ATU93+97E8p8AAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: 0 center; padding: 0 0 0 18px; } </style> <style class="snippet-anchor-cs">.link-primary { color: var(--bs-link-color) } .link-primary:hover { color: var(--bs-link-hover-color) } #page-main a { color: var(--bs-link-color) } #page-main a:hover { color: var(--bs-link-hover-color) } #page-footer a { color: var(--bs-link-color) } @media (prefers-reduced-motion: reduce) { .anchorjs-link { transition: none } } </style> <style class="snippet-note-cs">/* p and ul have a default bottom margin via the default browser stylesheet that makes the content not in the middle */ .note-cs p:last-child { margin-bottom: 0; } .note-cs ul:last-child { margin-bottom: 0; } </style> <style class="snippet-prism-cs">/* no margin at the bottom / to close to the next paragraph */ .code-toolbar { margin-bottom: 1rem } </style> <style class="snippet-webcode-cs">.webcode-wrapper{ position: relative; } .webcode-wrapper>.webcode-bar { position: absolute; top: .3em; right: .2em; transition: opacity .3s ease-in-out; } .webcode-wrapper>.webcode-bar .webcode-bar-item { display: inline-block; } .webcode-wrapper>.webcode-bar a, .webcode-wrapper>.webcode-bar button { color: #000000; font-size: .8em; padding: 0 .5em; background: #f5f2f0; background: rgba(224,224,224,.2); box-shadow: 0 2px 0 0 rgba(0,0,0,.2); border-radius: .5em; cursor: pointer; } .webcode-wrapper>.webcode-bar button { background: 0 0; border: 0; line-height: normal; overflow: visible; } .webcode-wrapper>.webcode-bar a:focus, .webcode-wrapper>.webcode-bar a:hover, .webcode-wrapper>.webcode-bar button:focus, .webcode-wrapper>.webcode-bar button:hover { text-decoration: none; color: black; } .webcode-cs .editbutton { display: none!important; } .webcode-cs { margin-bottom: 1rem; } /* Hack: The button is shown because we don't take over completly the table*/ .webcode-cs .editbutton_table{ display: none!important; } </style> <style class="snippet-brand-current-link-solid-cs">.brand-current-link-solid-cs { padding:0.375rem 0.375rem; vertical-align:middle; display:inline-block; color:#7611f7!important; }</style> <style class="snippet-dokuwiki-cs">/** * A stylesheet to fight the dokuwiki template css rules * * Reversing Bad height default: https://github.com/splitbrain/dokuwiki/issues/3690 * In all.css */ .svg-cs { height: auto; } .blockquote-cs { padding: initial } </style> <style class="snippet-tooltip-cs">.tooltip-inner { text-align:unset; } .tooltip-inner>p:last-child { margin-bottom: 0.25rem } .tooltip-inner>h1,.tooltip-inner>h2,.tooltip-inner>h3,.tooltip-inner>h4,.tooltip-inner>h5,.tooltip-inner>h6 { text-transform: capitalize; } /** same as abbr **/ span[data-bs-toggle="tooltip"] { text-decoration: underline dotted; } span[data-toggle="tooltip"] { text-decoration: underline dotted; } </style> <style class="snippet-shadow-cs">.shadow-md { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } [class*='shadow'] { transition: .2s; transition-property: color, box-shadow; } </style> <style class="snippet-bar-cs">.bar { position: relative; overflow: auto; margin: 0; width: 100%; display: block; border-radius: 0; /* not rounded */ } </style> <style class="snippet-hero-cs">@media (max-width:576px) { .hero-sm { padding: 1rem 1rem } .hero-md { padding: 2rem 1rem; } .hero-xl { padding: 4rem 1rem; } .hero-lg { padding: 3rem 1rem; } } @media (min-width: 576px) { .hero-sm { padding: 1rem 1rem } .hero-md { padding: 2rem 1rem; } .hero-lg { padding: 3rem 1rem; } .hero-xl { padding: 4rem 1rem; } } @media (min-width: 768px) { .hero-sm { padding: 2rem 1rem; } .hero-md { padding: 4rem 2rem; } .hero-lg { padding: 6rem 3rem; } .hero-xl { padding: 8rem 4rem; } } </style> <style class="snippet-display-none-if-empty-text-main-header-1-cs">#text-main-header-1:empty { display: none; }</style> <style class="snippet-lightbox-cs">.lightbox-close-cs { background-color: transparent; border: 0; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; position: absolute; right: 1.5rem; top: 1.5rem; } </style> <style class="snippet-subscribe-cs">.subscribe-cs form { display: flex; justify-content: center; height: 44px; } .subscribe-cs form input[type="email"] { border: 1px solid var(--bs-link-color); border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .subscribe-cs form input[type="email"]:focus { box-shadow: unset } .subscribe-cs form button { border: 1px solid var(--bs-link-color); border-top-left-radius: 0; border-bottom-left-radius: 0; background-color:var(--bs-link-color); } .subscribe-cs form button:hover { border: 1px solid var(--bs-link-color); background-color:var(--bs-link-color); } </style> <style class="snippet-carrousel-cs">.carrousel-cs { padding: 0; } @media (min-width: 576px) { .carrousel-cs { padding: 1rem; } } .glide__arrow--left{ left:-1rem; } .glide__arrow--right{ right:-1rem; } .glide__arrow { position: absolute; display: block; top: 50%; z-index: 2; color: white; text-transform: uppercase; padding: 9px 12px; background-color: transparent; border: none; text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); opacity: 1; cursor: pointer; transition: opacity 150ms ease, border 300ms ease-in-out; line-height: 1; } @media (min-width: 576px) { .glide__arrow { border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); border-radius: 4px; } } .glide__arrow:focus { outline: none; } .glide__arrow:hover { border-color: white; } .glide__bullets { list-style: none; position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translate(-50%, 0); } .glide__bullet { background-color: rgba(0, 0, 0, 0.3); width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 2px solid transparent; transition: all 300ms ease-in-out; cursor: pointer; line-height: 0; box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); margin: 0 0.25em; vertical-align: sub; } .glide__bullet--active { background-color: black; } .glide__bullet:hover { background-color: rgba(0, 0, 0, 0.3); } </style> <style class="snippet-card-cs">.card-cs { margin-bottom: 1rem; } /** Bootstrap has a margin bottom that is not welcome in a card **/ .card-cs > table { margin-bottom: 0; } /** No card-cs ui/li styling because it is also used for menu such as tabs if there is a list in the card, * there should be a more specific selection */ </style> <style class="snippet-share-twitter-button-solid-cs">.share-twitter-button-solid-cs { padding:0.375rem 0.375rem; background-color:#55acee; border-color:#55acee; color:#fff; } .share-twitter-button-solid-cs:hover, .share-twitter-button-solid-cs:active { background-color:#2795e9; border-color:#2795e9; color:#fff; }</style> <style class="snippet-share-facebook-button-solid-cs">.share-facebook-button-solid-cs { padding:0.375rem 0.375rem; background-color:#3b5998; border-color:#3b5998; color:#fff; } .share-facebook-button-solid-cs:hover, .share-facebook-button-solid-cs:active { background-color:#2d4373; border-color:#2d4373; color:#fff; }</style> <style class="snippet-share-hackernews-button-solid-cs">.share-hackernews-button-solid-cs { padding:0.375rem 0.375rem; background-color:#FF6600; border-color:#FF6600; color:#fff; } .share-hackernews-button-solid-cs:hover, .share-hackernews-button-solid-cs:active { background-color:#FB6200; border-color:#FB6200; color:#fff; }</style> <style class="snippet-share-email-button-solid-cs">.share-email-button-solid-cs { padding:0.375rem 0.375rem; background-color:#777777; border-color:#777777; color:#fff; } .share-email-button-solid-cs:hover, .share-email-button-solid-cs:active { background-color:#5e5e5e; border-color:#5e5e5e; color:#fff; }</style> <style class="snippet-share-whatsapp-button-solid-cs">.share-whatsapp-button-solid-cs { padding:0.375rem 0.375rem; background-color:#25D366; border-color:#25D366; color:#fff; } .share-whatsapp-button-solid-cs:hover, .share-whatsapp-button-solid-cs:active { background-color:#1DA851; border-color:#1DA851; color:#fff; }</style> <style class="snippet-share-telegram-button-solid-cs">.share-telegram-button-solid-cs { padding:0.375rem 0.375rem; background-color:#54A9EB; border-color:#54A9EB; color:#fff; } .share-telegram-button-solid-cs:hover, .share-telegram-button-solid-cs:active { background-color:#4B97D1; border-color:#4B97D1; color:#fff; }</style> <style class="snippet-follow-twitter-button-solid-cs">.follow-twitter-button-solid-cs { padding:0.375rem 0.375rem; background-color:#55acee; border-color:#55acee; color:#fff; } .follow-twitter-button-solid-cs:hover, .follow-twitter-button-solid-cs:active { background-color:#2795e9; border-color:#2795e9; color:#fff; }</style> <style class="snippet-follow-facebook-button-solid-cs">.follow-facebook-button-solid-cs { padding:0.375rem 0.375rem; background-color:#3b5998; border-color:#3b5998; color:#fff; } .follow-facebook-button-solid-cs:hover, .follow-facebook-button-solid-cs:active { background-color:#2d4373; border-color:#2d4373; color:#fff; }</style> <style class="snippet-brand-github-link-solid-cs">.brand-github-link-solid-cs { padding:0.375rem 0.375rem; vertical-align:middle; display:inline-block; color:#000000!important; } .brand-github-link-solid-cs:hover, .brand-github-link-solid-cs:active { color:#F4CAB1; }</style> <style class="snippet-page-explorer-tree-cs">.page-explorer-tree-cs { overflow: auto; font-weight: 600; padding-bottom: 1rem; padding-top: .25rem; padding-left: 1px; } .page-explorer-tree-cs ul { list-style: none; padding-left: 1rem; } .page-explorer-tree-cs > ul { padding-left: 0; } .page-explorer-tree-cs li { margin-bottom: .25rem; } .page-explorer-tree-cs img, .page-explorer-tree-cs svg { vertical-align: bottom; } /* Give space when the mouse is over the link */ .page-explorer-tree-cs a { padding: .1875rem .5rem; margin-top: .125rem; color: rgba(0, 0, 0, 0.65); text-decoration: none; align-items: center; display: inline-flex; font-weight: 400; } @media (max-width: 768px) { .page-explorer-tree-cs > ul { padding: 1.5rem .75rem; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef } } .page-explorer-tree-cs a { color: rgba(0, 0, 0, 0.65); text-decoration: none } .page-explorer-tree-cs .btn { padding: .25rem .5rem; font-weight: 600; color: rgba(0, 0, 0, 0.65); background-color: transparent; border: 0; display: inline-flex; text-align: left; } .page-explorer-tree-cs .btn:hover, .page-explorer-tree-cs .btn:focus { color: rgba(0, 0, 0, 0.85); background-color: rgba(121, 82, 179, 0.1) } .page-explorer-tree-cs .btn:focus { box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7) } .page-explorer-tree-cs .btn::before { width: 1.25em; line-height: 0; content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform 0.35s ease; transform-origin: .5em 50% } .page-explorer-tree-cs .btn[aria-expanded="true"] { color: rgba(0, 0, 0, 0.85) } .page-explorer-tree-cs .btn[aria-expanded="true"]::before { transform: rotate(90deg) } @media (prefers-reduced-motion: reduce) { .page-explorer-tree-cs .btn::before { transition: none } } .page-explorer-tree-cs a:hover, .page-explorer-tree-cs a:focus { color: rgba(0, 0, 0, 0.85); background-color: rgba(121, 82, 179, 0.1) } .page-explorer-tree-cs .active { font-weight: 600; color: rgba(0, 0, 0, 0.85) } </style> <style class="snippet-lqpp-cs">.low-quality-page-cs { text-decoration: none; } </style> <style class="snippet-template-cs">main > *, #page-core { min-width: 0; /** not auto */ } @media (min-width: 768px) { #page-core { display: grid; gap: 1.5rem; grid-template-areas: "page-side page-main"; grid-template-columns: minmax(min-content,1fr) 3fr; align-content: flex-start } #page-side { grid-area: page-side; } #page-main { grid-area: page-main; } } @media (min-width: 992px) { #page-core { grid-template-columns: minmax(min-content,1fr) 5fr; } main { grid-area: page-main; display: grid; grid-template-columns: [main] 7fr [side] minmax(auto,2fr); grid-auto-flow: row; gap: 1rem; grid-template-areas: unset; margin-left: 1rem; margin-right: 1rem; align-content: flex-start } #main-toc { grid-column: side; grid-row: 1 / span 5; position: sticky; top: 5rem; z-index: 2; height: calc(100vh - 5rem); overflow-y: auto; } #main-header { grid-column: main; } #main-content { grid-column: main; } #main-footer { grid-column: main; } #main-side { grid-area: unset; } } </style> <style class="snippet-dokuwiki-smiley-cs">/** Smiley */ img.smiley { max-height: 1.2em; } </style> <style> :root { --bs-primary: #7611f7; --bs-link-color: #624785; --bs-link-hover-color: #7a1ef1; --cs-primary-color-text: #624785; --cs-primary-color-text-hover: #7a1ef1; } .btn-primary { --bs-btn-bg: #7611f7; --bs-btn-border-color: #7611f7; } </style>  <style> .page-side-toggle:not(.collapsed) .page-side-expand { display: none; } .page-side-toggle .page-side-expand { display: inline-block; } .page-side-toggle:not(.collapsed) .page-side-collapse { display: inline-block; } .page-side-toggle .page-side-collapse { display: none; } #page-side-control { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 0.375rem 0.75rem; color: #6c757d; font-size: smaller; } </style> </head> <body class="dokuwiki mode_show tpl_dokuwiki position-relative combo-holy-cs"> <header id="page-header" class="d-print-none mb-3"> <nav class="navbar navbar-expand-md navbar-light" data-type="fixed-top" style="background-color:var(--bs-light)"> <div class="container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#7611f7" data-name="logo" width="30" height="30" class="svg-cs d-inline-block align-text-top svg-icon-cs"><path d="M3,1C1.89,1 1,1.89 1,3V14C1,15.11 1.89,16 3,16C4.33,16 7,16 7,16C7,16 7,18.67 7,20C7,21.11 7.89,22 9,22H20C21.11,22 22,21.11 22,20V9C22,7.89 21.11,7 20,7C18.67,7 16,7 16,7C16,7 16,4.33 16,3C16,1.89 15.11,1 14,1H3M3,3H14C14,4.33 14,7 14,7H9C7.89,7 7,7.89 7,9V14C7,14 4.33,14 3,14V3M9,9H14V14H9V9M16,9C16,9 18.67,9 20,9V20H9C9,18.67 9,16 9,16H14C15.11,16 16,15.11 16,14V9Z" class="logo-0"/></svg><a class="btn brand-current-link-solid-cs navbar-brand link-cs link-brand-cs" href="https://combostrap.com/" title="ComboStrap" accesskey="h" style="font-weight:700"> ComboStrap </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarcollapse" class="collapse navbar-collapse"><ul class="navbar-nav me-auto"> <li class="nav-item"><a class="link-internal nav-link text-secondary link-cs" data-bs-html="true" data-bs-placement="top" data-bs-toggle="tooltip" data-wiki-id="howto:getting_started:getting_started" href="/howto/how-to-get-started-with-combostrap-m3i8vga8" title="<h3>Get Started</h3> <p>This page helps you to get started with ComboStrap</p>">Get Started</a></li> <li class="nav-item"><a class="link-internal nav-link link-cs" data-bs-html="true" data-bs-placement="top" data-bs-toggle="tooltip" data-wiki-id="docs:docs" href="/the-combostrap-documentation-mqltri27" title="<h3>Docs</h3> <p>This section regroups all documentation of ComboStrap in one place.</p>">Docs</a></li> <li class="nav-item"><a class="link-internal nav-link text-secondary link-cs" data-bs-html="true" data-bs-placement="top" data-bs-toggle="tooltip" data-wiki-id="support" href="/where-to-get-information-help-xzqtp19g" title="<h3>Support</h3> <p>We are here to help, don't hesitate to mail us. This page shows you also all other support channel on how to build a great website.</p>">Contact</a></li> <li class="nav-item"><a class="link-internal nav-link link-cs" data-bs-html="true" data-bs-placement="top" data-bs-toggle="tooltip" data-wiki-id="howto:howto" href="/how-to-use-the-combostrap-platform-0oqwozv8" title="<h3>Howto</h3> <p>This section regroups all HowTo that show you how to do step by step</p>">HowTo</a></li> <li class="nav-item"><a class="link-internal nav-link link-cs" data-bs-html="true" data-bs-placement="top" data-bs-toggle="tooltip" data-wiki-id="themes" href="/themes-j34y24cw" title="<h3>Themes</h3> <p>Always one layouts that fits your needs Create your own theme Get always a featured image on your pages Adapt automatically to mobile phone Create powerful layout with the simple templating markup Apply custom HTML for advanced usage a list of more than 25 bootstrap stylesheet</p>">Themes</a></li> </ul> <a class="link-internal btn btn-primary me-2 mb-2 mt-2 mb-lg-0 mt-lg-0 shadow-md link-cs link-primary-cs" data-wiki-id="newsletter" href="/newsletter-ppmtxf72" title="The newsletters of ComboStrap: receive news, tips, and tricks on how to create a professional and remarkable experience for your readers." role="button" style="color:#fff;background-color:#7611f7;border-color:#7611f7">Subscribe</a><form id="dw__search" action="/start" accept-charset="utf-8" method="get" role="search" class="search-cs d-flex align-middle mb-0 " > <input type="hidden" name="do" value="search" /> <input type="hidden" name="id" value="docs:content:heading" /> <label class="visually-hidden" for="internal-search-box">Search Term</label> <input class="edit form-control" type="text" id="internal-search-box" name="q" placeholder="Search... (Alt+Shift+F)" autocomplete="off" accesskey="f" title="[F]"/> </form></div> </div></nav> </header> <div id="page-core" class="container position-relative"> <aside id="page-side" class="d-print-none"> <button id="page-side-control" class="btn page-side-toggle d-md-none collapsed mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#page-side-collapsable" aria-controls="page-side-collapsable" aria-expanded="false" aria-label="Toggle Page Side"> <span class="page-side-expand"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <title>Expand</title> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path> </svg> Expand Sidebar </span> <span class="page-side-collapse"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <title>Collapse</title> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path> </svg> Collapse Sidebar </span> </button> <div id="page-side-collapsable" class="collapse d-md-block"> <nav class="page-explorer-cs page-explorer-tree-cs" id="page-explorer-sidebar-1" data-wiki-id="docs:content:"> <ul> <li class="page-explorer-tree-home-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:content" href="/docs/combostrap-ui-inline-components-p6uook5o" title="Inline components are used inside a paragraph (ie in a line).">Content</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal low-quality-page-cs link-cs" data-pp-link="normal" data-pp-source="lqpp" data-wiki-id="docs:content:badge" href="/content/how-to-create-a-badge-with-combo-gkk4jppb" title="How to create a badge ? badge is a ComboStrap UI component that shows a small status descriptors such as: a count or a label badge follows the superset HTML syntax and can then be customized Full Qualified Syntax Short Syntax where: type defines the color rounded will give a look more rounded (Default: true)defaultBadgeAttributeconfiguration (LQPP)">Badge</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:button" href="/content/combostrap-ui-button-hpks7oxo" title="Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With spacing With the size attribute With colors You can also add hover animation. Float Zoom or where: typedefault stylingsizeskinelevationelevationbuttosuper set componentbuttocarmenubarprimarysecondarbranding colorButtosize attributski…">Button</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:cite" href="/content/combostrap-ui-cite-940iwyaj" title="The cite element will give credit to a portion of text. It can go anywhere but you put it mostly in a blockquote. Markup Output: You can style them. For instance, with a blue color Markup Output: With a blockquote Markup Output:">Cite</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal low-quality-page-cs link-cs" data-pp-link="normal" data-pp-source="lqpp" data-wiki-id="docs:content:footnote" href="/content/combostrap-footnotes-reference-fvlg78rd" title="A footnote is a syntax component that permits to add reference that will be added at the foot of the page. Footnotes are used most commonly to provide: references (bibliographic citations) to reliable sources, dokuwiki footnote syntaciteiframe (LQPP)">Footnote</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:heading" href="/content/combostrap-heading-8ehow19j" title="A description for the search page result engine">Heading</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal low-quality-page-cs link-cs" data-pp-link="normal" data-pp-source="lqpp" data-wiki-id="docs:content:highlight" href="/content/how-to-highlight-words-in-combostrap-lmce761v" title="This article shows you the highlighting syntax (LQPP)">Highlight</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:icon" href="/content/combostrap-icon-component-bvzs3sp5" title="An icon component that makes it easy to add icon to your pages">Icon</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:image" href="/content/how-to-use-the-image-tag-in-combostrap-yy0sap72" title="Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.">Image</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:inote" href="/content/combostrap-ui-inote-inline-note-vxzqo3pt" title="The inote is a note that can be added along side a text (ie inline). It gives emphasis on an ancillary text that adds context to the primary text. As a replacement, you could also use: a tooltip or a wiki:syntaxfootnote. A inote is a superset HTML component.">Inote</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:itext" href="/content/itext/applies-typographic-effect-to-characters-or-words-82ykx98a" title="itext is a component that applies typographic effect to characters or words such as boldness, font-size and more">Itext</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:link" href="/content/the-link-component-x0oocdu2" title="The link component permits to create hyperlinks between pages.">Links</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:page-image" href="/content/page-image-component/renders-the-illustrative-image-of-your-page-jq488r8a" title="Page-image is a component that renders the illustrative image of the page and is generally used in a fragment.">Page Image</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:raster" href="/content/raster-image-in-combostrap-jpg-png-cmhk4w1o" title="From lazy loading to automatic resizing, this page tells you how ComboStrap manages raster image">Raster</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:svg" href="/content/how-to-use-a-svg-in-combostrap-t0bzvu0u" title="ComboStrap supports natively SVG and allows you to use them as image, illustration and background">Svg</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:tooltip" href="/content/combostrap-ui-tooltip-autozdh6" title="A Tooltip displays informative text when users hover over, focus on, or tap an element.">Tooltip</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:typo" href="/content/typographic-effect-and-attributes-in-combostrap-gwy9gnqk" title="How to add typographic effect to your text">Typo</a></li><li class="page-explorer-tree-page-cs"><a class="link-internal link-cs" data-wiki-id="docs:content:vignette" href="/content/what-is-a-vignette-vefkd85s" title="A vignette is an illustrative image that is generated from: the page title, the page category the modified date the logo (if a raster logo is available) You can render a vignette with the page image component Example: Markup Output: You can use it with the page image as illustratif image in a list of pages If there is no image, this is the defaultsocial image">Vignette</a></li></ul></nav> </div> </aside> <main id="page-main"> <header id="main-header"> <p> <nav class="breadcrumb-cs breadcrumb-nav-cs" aria-label="Hierarchical breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a class="link-internal link-cs" data-wiki-id="start" href="/combostrap-create-your-web-footprint-that-lasts-forever-ji9tisp0" title="Advertise yourself, your documentation or your company with a product that makes a qualitative website design, creation and management, unique, easy and fun">Home</a></li><li class="breadcrumb-item"><a class="link-internal link-cs" data-wiki-id="docs:docs" href="/the-combostrap-documentation-mqltri27" title="This section regroups all documentation of ComboStrap in one place.">Docs</a></li><li class="breadcrumb-item"><a class="link-internal link-cs" data-wiki-id="docs:content:content" href="/docs/combostrap-ui-inline-components-p6uook5o" title="Inline components are used inside a paragraph (ie in a line).">Content</a></li><li class="breadcrumb-item active" aria-current="page">Heading</li></ol></nav> </p> <h1 class="h1 outline-heading-cs heading-cs heading-h1-cs" id="section">ComboStrap Heading</h1><p class="lead" id="text-main-header-1"></p> <p> <a class="lightbox-cs img-link-cs" href="/_media/docs/content/undraw_add_content_re_vgqa.png?fetcher=raw&tseed=1743853218"><img class="ancestor-cs img-fluid raster-cs raster-page-image-cs" srcset="/_media/docs/content/undraw_add_content_re_vgqa.png?fetcher=raster&h=152&ratio=21%3A9&tok=d051c1&tseed=1743853218&w=355 355w, /_media/docs/content/undraw_add_content_re_vgqa.png?fetcher=raster&h=238&ratio=21%3A9&tok=e29511&tseed=1743853218&w=556 556w, /_media/docs/content/undraw_add_content_re_vgqa.png?fetcher=raster&h=250&ratio=21%3A9&tok=86c71c&tseed=1743853218&w=583 583w" alt="Undraw Add Content Re Vgqa" height="250" width="583" sizes="(max-width: 375px) and (min-resolution:288dpi) 118px, (max-width: 375px) and (min-resolution:192dpi) 177px, (max-width: 375px) and (min-resolution:96dpi) 355px, (max-width: 576px) and (min-resolution:288dpi) 185px, (max-width: 576px) and (min-resolution:192dpi) 278px, (max-width: 576px) and (min-resolution:96dpi) 556px, 583px" style="max-height:250px;height:auto;max-width:583px;width:100%"/></a> </p> </header> <div id="main-content"> <h1 class="outline-heading-cs d-none heading-cs" id="section">ComboStrap UI - Heading</h1><h2 class="outline-heading-cs heading-cs" id="about">About</h2> <p> An <mark>heading</mark> has two different functions: </p> <ul> <li class="level1"><div class="li"> the first one is <mark>structural</mark> and generates the <a class="link-internal link-cs" data-wiki-id="docs:navigation:outline" href="/navigation/outline-heading-hierarchy-h2i7yk44" title="Configuration and usage of the outline in Combostrap">outline (structure of the document</a>). The table of content (<abbr title="Table of Contents">TOC</abbr>) is created from this structure.</div> </li> <li class="level1"><div class="li"> the second one is <mark>semantic</mark> and defines the title of a <a class="link-internal link-cs" data-wiki-id="docs:block:block" href="/docs/combostrap-ui-block-fcqvxaxe" title="A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can draw some border around it, that's a block. Blockquote: A block of text with a citationBoCard (teaserCodCommenConsolFilJumbotroLisMatNotRelateBaTexWebcode">block component</a>.</div> </li> </ul> <p> The rule is simple, when a heading is not in a <a class="link-internal link-cs" data-wiki-id="docs:component" href="/docs/combostrap-ui-components-lord0ca7" title="Components are the units of content creation for a page. Together, they create the content of the page.">component</a>, it's a <a class="link-internal link-cs" data-wiki-id="docs:navigation:outline" href="/navigation/outline-heading-hierarchy-h2i7yk44" title="Configuration and usage of the outline in Combostrap">outline heading</a>, otherwise, it's the <mark>title</mark> of the component. </p> <div class="alert alert-info note-cs note-info-cs" role="note"> <p> If you search the <mark>title</mark> of a <mark>page</mark>, see the page <a class="link-internal link-cs" data-wiki-id="docs:page:title" href="/page/page-title-set-by-combostrap-72dytnms" title="How to manage the title of a web page with ComboStrap ?">Page title (Set by Combostrap)</a> </p> </div><h2 class="outline-heading-cs heading-cs" id="syntax">Syntax</h2> <p> To define an heading, you can use the following <mark>heading</mark> syntax. </p> <h3 class="outline-heading-cs heading-cs" id="wiki">Wiki</h3> <p> The wiki heading start with 6 hashtag <mark>#</mark> characters for the level 1 (<a class="link-internal link-cs" data-wiki-id="docs:page:h1" href="/page/h1-a-shorter-version-of-the-title-s1rs9rln" title="The H1 is the text of the first header and can be used in template within a list of link. ">h1</a>) and goes down by one. </p> <p> The higher the level, the higher the visual emphasis. </p> <pre class="code-container-cs code-container-dw-cs" data-download-link="true" data-src="file.html"> <code class="language-html code-cs code-dw-cs">====== Headline Level 1 <icon name="bs:card-heading"/> ====== ===== Headline Level 2 ===== ==== Headline Level 3 ==== === Headline Level 4 === == Headline Level 5 ==</code> </pre> <div class="webcode-wrapper"><iframe class="col-sm-12 webcode-cs" name="Default" src="/lib/exe/ajax.php?call=combo&fetcher=markup&markup=%0A%3D%3D%3D%3D%3D%3D+Headline+Level+1+%3Cicon+name%3D%22bs%3Acard-heading%22%2F%3E+%3D%3D%3D%3D%3D%3D%0A%3D%3D%3D%3D%3D+Headline+Level+2+%3D%3D%3D%3D%3D%0A%3D%3D%3D%3D+Headline+Level+3+%3D%3D%3D%3D%0A%3D%3D%3D+Headline+Level+4+%3D%3D%3D%0A%3D%3D+Headline+Level+5+%3D%3D%0A&title=ComboStrap+WebCode+-+Markup+Renderer&tseed=1743853155" style="width:100%"></iframe></div> <p> To facilitate the writing, you can use the following keyboard shortcuts: </p> <ul> <li class="level1"><div class="li"> select the heading text</div> </li> <li class="level1 node"><div class="li"> and type one of the following <a class="link-internal link-cs" data-wiki-id="docs:utility:shortcut" href="/utility/combostrap-list-of-the-keyboard-shortcuts-access-key-bmb3kmoh" title="This article lists the most common keyboard shortcuts available">keyboard shortcuts</a>:</div> <ul> <li class="level3"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">alt+8</mark> for the same level than the previous heading</div> </li> <li class="level3"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">alt+9</mark> for a level lower than the previous heading</div> </li> <li class="level3"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">alt+0</mark> for a level higher than the previous heading</div> </li> </ul> </li> </ul> <h3 class="outline-heading-cs heading-cs" id="markdown">Markdown</h3> <p> The <a class="link-internal link-cs" data-wiki-id="docs:utility:markdown" href="/utility/markdown-syntax-supported-in-combostrap-g8b6x98d" title="This page lists all markdown syntax supported in ComboStrap ">markdown</a> atx heading start with 1 or more hashtag <mark class="highlightwiki-cs" style="background-color:#f6f0ff">#</mark> characters. </p> <ul> <li class="level1"><div class="li"> The level 1 heading (the title) starts with #,</div> </li> <li class="level1"><div class="li"> section headings with ##,</div> </li> <li class="level1"><div class="li"> subheads with ###,</div> </li> <li class="level1"><div class="li"> and so on.</div> </li> </ul> <p> This is: </p> <ul> <li class="level1"><div class="li"> the best syntax for writing because you just need to adds up the number of hashtag to get the wanted heading level.</div> </li> <li class="level1"><div class="li"> the worst syntax visually because a lower level will have more emphasis than an higher</div> </li> </ul> <pre class="code-container-cs code-container-marki-cs" data-download-link="true" data-src="file.html"> <code class="language-html code-cs code-marki-cs"># Headline Level 1 <icon name="bs:card-heading"/> ## Headline Level 2 <icon name="bs:card-heading"/> ### Headline Level 3 #### Headline Level 4 ##### Headline Level 5 ###### Headline Level 6</code> </pre> <div class="webcode-wrapper"><iframe class="col-sm-12 webcode-cs" name="Default" src="/lib/exe/ajax.php?call=combo&fetcher=markup&markup=%0A%23+Headline+Level+1+%3Cicon+name%3D%22bs%3Acard-heading%22%2F%3E%0A%23%23+Headline+Level+2+%3Cicon+name%3D%22bs%3Acard-heading%22%2F%3E%0A%23%23%23+Headline+Level+3%0A%23%23%23%23+Headline+Level+4%0A%23%23%23%23%23+Headline+Level+5%0A%23%23%23%23%23%23+Headline+Level+6%0A&title=ComboStrap+WebCode+-+Markup+Renderer&tseed=1743853155" style="width:100%;border:none"></iframe></div><h3 class="h3 outline-heading-cs heading-cs heading-h3-cs" id="marki">Marki</h3> <p> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">heading</mark> is a <a class="link-internal link-cs" data-wiki-id="docs:marki" href="/docs/combostrap-styling-marki-language-31meei51" title="ComboStrap implements in most of its components the marki language. It's a simplified version of the HTML language and follows the same rules. Below, we describe the , they all have in common. Every marki component follows this syntaxtyptype of componentnameX=valueXstyling attributeshtml attributestyling attributecolors attributeswidthheighMore ? See the styling attributesecurity concernclassstyle">marki syntax</a>. You can therefore apply all <a class="link-internal link-cs" data-wiki-id="docs:styling:styling" href="/docs/combostrap-ui-styling-it9uqfg1" title="Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet level - a stylesheet with custom rule to tune the styling precisely the - inline css customizationstandardadvancedComboStrapBootstraBootstracreate their own themlayout templatestandarDimensioAligSpacinColoElevatioFloaLanPositioClickablText aligLine SpacinOpaci…">styling attributes</a> (such as adding an <mark class="highlightwiki-cs" style="background-color:#f6f0ff">id</mark> if you want to specify your fragment) </p> <pre class="code-container-cs code-container-dw-cs" data-download-link="true" data-src="file.html"> <code class="language-html code-cs code-dw-cs"><heading type level=1-6> Heading </heading ></code> </pre> <p> where: </p> <ul> <li class="level1 node"><div class="li"> <a class="link-internal link-cs" data-wiki-id="docs:styling:type" href="/styling/combostrap-component-type-uv0jvagv" title="The component type attribute explained">type</a> is:</div> <ul> <li class="level3"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">h1</mark> to <mark class="highlightwiki-cs" style="background-color:#f6f0ff">h6</mark> for <abbr title="HyperText Markup Language">HTML</abbr> heading styling</div> </li> <li class="level3"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">d1</mark> to <mark class="highlightwiki-cs" style="background-color:#f6f0ff">d4</mark> for bigger heading display (used mostly in landing page)</div> </li> </ul> </li> <li class="level1"><div class="li"> <mark class="highlightwiki-cs" style="background-color:#f6f0ff">level</mark> is the heading level (ie 1 to 6, default to the number in the type)</div> </li> </ul> <p> Example: </p> <ul> <li class="level1"><div class="li"> <abbr title="HyperText Markup Language">HTML</abbr> Heading</div> </li> </ul> <pre class="code-container-cs code-container-dw-cs" data-download-link="true" data-src="file.html"> <code class="language-html code-cs code-dw-cs"><heading h1>Heading 1</heading> <heading h2>Heading 2</heading> <heading h3>Heading 3</heading> <heading h4>Heading 4</heading> <heading h5>Heading 5</heading> <heading h6>Heading 6</heading></code> </pre> <div class="webcode-wrapper"><iframe class="col-sm-12 webcode-cs" name="Type" src="/lib/exe/ajax.php?call=combo&fetcher=markup&markup=%0A%3Cheading+h1%3EHeading+1%3C%2Fheading%3E%0A%3Cheading+h2%3EHeading+2%3C%2Fheading%3E%0A%3Cheading+h3%3EHeading+3%3C%2Fheading%3E%0A%3Cheading+h4%3EHeading+4%3C%2Fheading%3E%0A%3Cheading+h5%3EHeading+5%3C%2Fheading%3E%0A%3Cheading+h6%3EHeading+6%3C%2Fheading%3E%0A&title=ComboStrap+WebCode+-+Markup+Renderer&tseed=1743853155" style="width:100%"></iframe></div><ul> <li class="level1"><div class="li"> Display Heading</div> </li> </ul> <pre class="code-container-cs code-container-dw-cs" data-download-link="true" data-src="file.html"> <code class="language-html code-cs code-dw-cs"><heading d1>Heading 1</heading> <heading d2>Heading 2</heading> <heading d3>Heading 3</heading> <heading d4>Heading 4</heading></code> </pre> <div class="webcode-wrapper"><iframe class="col-sm-12 webcode-cs" name="Type" src="/lib/exe/ajax.php?call=combo&fetcher=markup&markup=%0A%3Cheading+d1%3EHeading+1%3C%2Fheading%3E%0A%3Cheading+d2%3EHeading+2%3C%2Fheading%3E%0A%3Cheading+d3%3EHeading+3%3C%2Fheading%3E%0A%3Cheading+d4%3EHeading+4%3C%2Fheading%3E%0A&title=ComboStrap+WebCode+-+Markup+Renderer&tseed=1743853155" style="width:100%"></iframe></div><h2 class="outline-heading-cs heading-cs" id="configuration">Configuration</h2><h3 class="outline-heading-cs heading-cs" id="headingwikienable">headingWikiEnable</h3> <p> You can disable the <a class="link-local link-cs" href="#wiki" title="Wiki">combo wiki heading</a> and uses the standard dokuwiki syntax. </p> <p> It's used mainly if you want to use: </p> <ul> <li class="level1"><div class="li"> the <a class="link-internal link-cs" data-wiki-id="support:include" href="/support/support-include-plugin-9eq9uyeq" title="The include plugin is a external plugin that permits to compose a page with the content of another page. By default, the include plugin (ie section syntax) will not work with ComboStrap. You need to disable the combo wiki heading component to enable it. Why?: It does not work because the include plugininclude plugininlinenot messed up the layoutnodatenoeditbttemplatmain headeheading1heading 1commentDokuwiki store itnot always return a cleantemplatethe issue 91">include plugin</a> to include section.</div> </li> <li class="level1"><div class="li"> the <a class="link-internal link-cs" data-wiki-id="support:ckgedit" href="/support/support-ckgedit-9kg1tz0g" title="The CKGEdit plugin is a external plugin that replaces the dokuwiki editor. By default, the CKGEdit plugin does not handle plugins and returns the Dokuwiki syntax. This behavior unfortunately means that not all syntaxes are supported. Below, you can see the known effects but there may be more.CKGEditCKGEdidisable the dokuwiki headincombo heading syntaimage syntaxCKGEdidisable the image taimage syntaxCkgEdifrontmatterthe action/edit.php file, line 1173">ckgedit editor plugin</a></div> </li> </ul> </div> <div id="main-side" class="d-print-none"> </div> <footer id="main-footer" class="d-print-none"> <p> <br/> </p> <hr class="hr-cs"/> <p> <br/> </p> <div class="mx-auto box-cs" style="max-width:400px;width:auto"><div class="h4 heading-cs heading-h4-cs">Showcase yourself and your brand</div> <p> Get <strong>free</strong> news, tips, and tricks<br/> to create a <strong>remarkable</strong> experience for your readers. <br/> <div class="subscribe-cs"><form action="https://api.combostrap.com/combo/public/v1.0/list/registration" data-success-content="A validation email has been send.<br> Check your mailbox and click on the validation link.<br> If you don't find our email, check your spambox.<br> Nico<br> <br> You can <a href="/support">contact me</a> if you have any trouble.<br> " data-success-header="Hurray!" > <label for="subscribe-email-slot_main_footer-1" class="visually-hidden">Enter your email</label> <input type="hidden" name="listGuid" value="lis-w8OZSK2"/> <input type="email" id="subscribe-email-slot_main_footer-1" name="subscriberEmail" class="form-control" placeholder="Your email" autocomplete="email" required="required"/> <button class="btn btn-primary" type="submit">Subscribe</button> </form> </div> </p> </div> <p> <br/> </p> <hr class="hr-cs"/> <p> <br/> </p> <div class="h4 mb-5 heading-cs heading-h4-cs">Recommended Pages</div><div class="carrousel-cs" data-element-width="250" data-elements-min="3"><div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap - Font Size Typographic Attribute </div><p class="card-text"></p>How to set the font-size with the font-size attribute <a class="link-internal stretched-link link-cs" data-wiki-id="docs:styling:font-size" href="/styling/combostrap-font-size-typographic-attribute-mz0k0wfs" title="How to set the font-size with the font-size attribute"> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap - List of the keyboard shortcuts (access key)</div><p class="card-text"></p>This article lists the most common keyboard shortcuts available <a class="link-internal stretched-link link-cs" data-wiki-id="docs:utility:shortcut" href="/utility/combostrap-list-of-the-keyboard-shortcuts-access-key-bmb3kmoh" title="This article lists the most common keyboard shortcuts available"> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap - Quality XHTML compliant</div><p class="card-text"></p>XHTML is a <https://www.w3.org/TR/xhtml1/>specification that describes how the HTML code for the pages should be generated. This is important for: a good rendering inside browser and for indexing... <a class="link-internal stretched-link link-cs" data-wiki-id="docs:quality:xhtml" href="/quality/combostrap-quality-xhtml-compliant-wcdftia7" title="XHTML is a <https://www.w3.org/TR/xhtml1/>specification that describes how the HTML code for the pages should be generated. This is important for: a good rendering inside browser and for indexing by search engine. In our effort to offer the best quality website, we test it and therefore, all pages generated are XHMTL compliant.XHTML valiheadinslide"> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap - Text component - Apply text typographic effects</div><p class="card-text"></p>The text component lets you apply text typographic effects on one ore more paragraph. <a class="link-internal stretched-link link-cs" data-wiki-id="docs:block:text" href="/block/combostrap-text-component-apply-text-typographic-effects-3n0r56wi" title="The text component lets you apply text typographic effects on one ore more paragraph."> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap Analytics - Page Statistics</div><p class="card-text"></p>The statistics feature allows you to query your page statistics such as word count, internal, backlinks and get insight on your whole website at once. <a class="link-internal stretched-link link-cs" data-wiki-id="docs:analytics:statistics" href="/analytics/combostrap-analytics-page-statistics-sd1wzdcu" title="The statistics feature allows you to query your page statistics such as word count, internal, backlinks and get insight on your whole website at once."> </a></div></div> <div class="card position-relative card-cs"><img class="card-img-top featured-cs img-fluid raster-cs raster-page-image-cs" src="/_media/docs/block/card_illustration.png?fetcher=raster&h=237&ratio=21%3A9&tok=3f07e2&tseed=1743853218&w=553" srcset="/_media/docs/block/card_illustration.png?fetcher=raster&h=152&ratio=21%3A9&tok=358e83&tseed=1743853218&w=355 355w, /_media/docs/block/card_illustration.png?fetcher=raster&h=237&ratio=21%3A9&tok=3f07e2&tseed=1743853218&w=553 553w" alt="Card Illustration" height="237" width="553" loading="lazy" style="max-width:100%;max-height:unset;height:auto;width:100%"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">ComboStrap UI - Card</div><p class="card-text"></p>A card is a box composed of an image, a text and a call to action <a class="link-internal stretched-link link-cs" data-wiki-id="docs:block:card" href="/block/combostrap-ui-card-89rhn4ii" title="A card is a box composed of an image, a text and a call to action"> </a></div></div> <div class="card position-relative card-cs"><img class="card-img-top first-cs img-fluid raster-cs raster-page-image-cs" src="/_media/docs/theme/slot/main_header_slot_manager.png?fetcher=raster&h=152&ratio=21%3A9&tok=dffd8c&tseed=1743853218&w=355" alt="Main Header Slot Manager" height="152" width="355" loading="lazy" style="max-width:100%;max-height:unset;height:auto;width:100%"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">Main Header Slot</div><p class="card-text"></p>The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with... <a class="link-internal stretched-link link-cs" data-wiki-id="docs:theme:slot:main_header_slot" href="/slot/main-header-slot-l49u26nj" title="The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with a hero margin heading 1 is a heading 1 with the page tile page-image is a illustrative page image A main header applies only to specific template. When a main header is applied, the following contents are not shownheading featured imageslot managercreateslot_main_headeredit"> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">Markdown syntax supported in ComboStrap</div><p class="card-text"></p>This page lists all markdown syntax supported in ComboStrap <a class="link-internal stretched-link link-cs" data-wiki-id="docs:utility:markdown" href="/utility/markdown-syntax-supported-in-combostrap-g8b6x98d" title="This page lists all markdown syntax supported in ComboStrap "> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">Outline (Heading Hierarchy)</div><p class="card-text"></p>Configuration and usage of the outline in Combostrap <a class="link-internal stretched-link link-cs" data-wiki-id="docs:navigation:outline" href="/navigation/outline-heading-hierarchy-h2i7yk44" title="Configuration and usage of the outline in Combostrap"> </a></div></div> <div class="card position-relative card-cs"><img class="img-fluid lazy-cs svg-cs svg-page-image-cs" src="/_media/docs/undraw_my_documents.svg?class=card-img-top+ancestor-cs&fetcher=svg&ratio=21%3A9&tseed=1743853218-1743853218&type=illustration" alt="Undraw My Documents" loading="lazy" width="759" height="325" style="max-width:100%;max-height:unset"/><div class="card-body card-body-cs"><div class="h5 card-title heading-cs heading-h5-cs">Render web code in a your page (javascript, html, ...)</div><p class="card-text"></p>With the `web code` component, you can embedded snippet of Javascript, Html and Css script and render their output. <a class="link-internal stretched-link link-cs" data-wiki-id="docs:utility:webcode" href="/utility/render-web-code-in-a-your-page-javascript-html-u8fe6ahw" title="With the `web code` component, you can embedded snippet of Javascript, Html and Css script and render their output."> </a></div></div> </div><hr class="hr-cs"/> <p> <br/> <br/> </p> <div class="row gy-5 justify-content-center align-items-center mb-3 grid-cs"><div class="col-sm-3 text-center text-muted box-cs">Share this page:</div><div class="col-sm-9 text-center text-md-start box-cs"><button class="btn share-twitter-button-solid-cs share-cs share-twitter-cs" data-link="false" data-sharer="twitter" data-title="ComboStrap Heading > A description for the search page result engine" data-url="https://combostrap.com/content/combostrap-heading-8ehow19j" rel="noopener" aria-label="Share this page via Twitter" style="cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-name="mdi:twitter" width="24" height="24" fill="#fff" class="svg-cs svg-icon-cs"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" class="mdi:twitter-0"/></svg></button> <button class="btn share-facebook-button-solid-cs share-cs share-facebook-cs" data-link="false" data-sharer="facebook" data-title="ComboStrap Heading > A description for the search page result engine" data-url="https://combostrap.com/content/combostrap-heading-8ehow19j" rel="noopener" aria-label="Share this page via Facebook" style="cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" data-name="combo:brand:facebook:solid" width="24" height="24" class="svg-cs svg-icon-cs"><path d="M17,3.5a.5.5,0,0,0-.5-.5H14A4.77,4.77,0,0,0,9,7.5v2.7H6.5a.5.5,0,0,0-.5.5v2.6a.5.5,0,0,0,.5.5H9v6.7a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5V13.8h2.62a.5.5,0,0,0,.49-.37l.72-2.6a.5.5,0,0,0-.48-.63H13V7.5a1,1,0,0,1,1-.9h2.5a.5.5,0,0,0,.5-.5Z" class="combo:brand:facebook:solid-0"/></svg></button> <button class="btn share-hackernews-button-solid-cs share-cs share-hn-cs" data-link="false" data-sharer="hackernews" data-title="ComboStrap Heading > A description for the search page result engine" data-url="https://combostrap.com/content/combostrap-heading-8ehow19j" rel="noopener" aria-label="Share this page via Hackernews" style="cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" fill="#fff" data-name="combo:brand:hackernews:solid" width="24" height="24" class="svg-cs svg-icon-cs"><path d="M60.94 82.314L17 0h20.08l25.85 52.093c.397.927.86 1.888 1.39 2.883.53.994.995 2.02 1.393 3.08.265.4.463.764.596 1.095.13.334.262.63.395.898.662 1.325 1.26 2.618 1.79 3.877.53 1.26.993 2.42 1.39 3.48 1.06-2.254 2.22-4.673 3.48-7.258 1.26-2.585 2.552-5.27 3.877-8.052L103.49 0h18.69L77.84 83.308v53.087h-16.9v-54.08z" class="combo:brand:hackernews:solid-0"/></svg></button> <button class="btn share-email-button-solid-cs share-cs share-mail-cs" data-link="false" data-sharer="email" data-title="ComboStrap Heading > A description for the search page result engine" data-url="https://combostrap.com/content/combostrap-heading-8ehow19j" rel="noopener" aria-label="Share this page via Email" style="cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-name="combo:brand:email:solid" width="24" height="24" fill="#fff" class="svg-cs svg-icon-cs"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z" class="combo:brand:email:solid-0"/></svg></button> <a class="btn share-whatsapp-button-solid-cs share-cs share-whatsapp-cs" href="https://api.whatsapp.com/send?text=ComboStrap+Heading+%3E+A+description+for+the+search+page+result+engine%20https%3A%2F%2Fcombostrap.com%2Fcontent%2Fcombostrap-heading-8ehow19j" title="Share this page via Whatsapp" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#fff" data-name="combo:brand:whatsapp:solid" width="24" height="24" class="svg-cs svg-icon-cs"><path d="M16.8 5.7C14.4 2 9.5.9 5.7 3.2C2 5.5.8 10.5 3.2 14.2l.2.3l-.8 3l3-.8l.3.2c1.3.7 2.7 1.1 4.1 1.1c1.5 0 3-.4 4.3-1.2c3.7-2.4 4.8-7.3 2.5-11.1zm-2.1 7.7c-.4.6-.9 1-1.6 1.1c-.4 0-.9.2-2.9-.6c-1.7-.8-3.1-2.1-4.1-3.6c-.6-.7-.9-1.6-1-2.5c0-.8.3-1.5.8-2c.2-.2.4-.3.6-.3H7c.2 0 .4 0 .5.4c.2.5.7 1.7.7 1.8c.1.1.1.3 0 .4c.1.2 0 .4-.1.5c-.1.1-.2.3-.3.4c-.2.1-.3.3-.2.5c.4.6.9 1.2 1.4 1.7c.6.5 1.2.9 1.9 1.2c.2.1.4.1.5-.1s.6-.7.8-.9c.2-.2.3-.2.5-.1l1.6.8c.2.1.4.2.5.3c.1.3.1.7-.1 1z" class="combo:brand:whatsapp:solid-0"/></svg></a> <button class="btn share-telegram-button-solid-cs share-cs share-telegram-cs" data-link="false" data-sharer="telegram" data-title="ComboStrap Heading > A description for the search page result engine" data-url="https://combostrap.com/content/combostrap-heading-8ehow19j" rel="noopener" aria-label="Share this page via Telegram" style="cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-name="bx:bxl-telegram" width="24" height="24" fill="#fff" class="svg-cs svg-icon-cs"><path d="m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z" class="bx:bxl-telegram-0"/></svg></button></div><div class="col-sm-3 text-center text-muted box-cs">Follow us:</div><div class="col-sm-9 text-center text-md-start box-cs"><a class="btn follow-twitter-button-solid-cs follow-cs follow-twitter-cs" href="https://twitter.com/intent/follow?screen_name=combostrapweb" title="Follow us on Twitter" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-name="mdi:twitter" width="24" height="24" fill="#fff" class="svg-cs svg-icon-cs"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" class="mdi:twitter-0"/></svg></a> <a class="btn follow-facebook-button-solid-cs follow-cs follow-facebook-cs" href="https://facebook.com/combostrap" title="Follow us on Facebook" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" data-name="combo:brand:facebook:solid" width="24" height="24" class="svg-cs svg-icon-cs"><path d="M17,3.5a.5.5,0,0,0-.5-.5H14A4.77,4.77,0,0,0,9,7.5v2.7H6.5a.5.5,0,0,0-.5.5v2.6a.5.5,0,0,0,.5.5H9v6.7a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5V13.8h2.62a.5.5,0,0,0,.49-.37l.72-2.6a.5.5,0,0,0-.48-.63H13V7.5a1,1,0,0,1,1-.9h2.5a.5.5,0,0,0,.5-.5Z" class="combo:brand:facebook:solid-0"/></svg></a></div><div class="col-sm-3 text-center text-muted box-cs">Documentation:</div><div class="col-sm-9 text-center text-md-start box-cs box-width-specified-cs"><svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 16 16" data-name="bi:github" width="26" height="26" class="svg-cs svg-icon-cs"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" class="bi:github-0"/></svg><a class="col btn brand-github-link-solid-cs link-cs link-brand-cs" href="https://github.com/ComboStrap/site-com-combostrap/issues/new?title=Docs%20feedback:%20docs/content/heading" title="Github"> Request an explanation if the documentation is not clear.</a><br/> <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 16 16" data-name="bi:github" width="26" height="26" class="svg-cs svg-icon-cs"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" class="bi:github-0"/></svg><a class="col btn brand-github-link-solid-cs link-cs link-brand-cs" href="https://github.com/ComboStrap/site-com-combostrap/edit/master/data/pages/docs/content/heading.txt" title="Github"> Edit and correct this page.</a> </div> <p> <br/> <br/> </p> </footer> </main> <div id="page-tool" class="d-print-none"> </div> </div> <footer id="page-footer" class="d-print-none"> <div class="bar hero-sm text-secondary bar-cs" style="background-image:linear-gradient(to top,#fff 0,var(--bs-light) 100%);background-color:unset!important"><div class="bar-body position-relative container"><div class="row gy-5 justify-content-center mb-3 grid-cs grid-width-specified-cs"><div class="col col-sm-6 col-12 box-cs"><p class="h4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bs-secondary)" data-name="logo" width="24" height="24" class="svg-cs svg-icon-cs"><path d="M3,1C1.89,1 1,1.89 1,3V14C1,15.11 1.89,16 3,16C4.33,16 7,16 7,16C7,16 7,18.67 7,20C7,21.11 7.89,22 9,22H20C21.11,22 22,21.11 22,20V9C22,7.89 21.11,7 20,7C18.67,7 16,7 16,7C16,7 16,4.33 16,3C16,1.89 15.11,1 14,1H3M3,3H14C14,4.33 14,7 14,7H9C7.89,7 7,7.89 7,9V14C7,14 4.33,14 3,14V3M9,9H14V14H9V9M16,9C16,9 18.67,9 20,9V20H9C9,18.67 9,16 9,16H14C15.11,16 16,15.11 16,14V9Z" class="logo-0"/></svg>ComboStrap</p><p class="text-capitalize lead">Transforming Your writing into your Best Asset since 2010</p><p style="max-width:350px;width:auto">Create websites, publish landing pages, write articles, how-to's, documentation or build your knowledge base in a simple markup language.</p></div><div class="col col-sm-3 col-12 box-cs"><strong>Product</strong> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="combostrap" href="/combostrap-the-publishing-platform-otdqm8v3" title="ComboStrap is a publishing platform, with markdown like based syntax and the power of Bootstrap">ComboStrap</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="release:latest" href="/release/combostap-latest-release-a1nss1ji" title="A synonym page to redirect to the latest release">Release (Changes)</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="credits" href="/combostrap-library-credits-smytry5l" title="Credits to all library and framework that makes ComboStrap a reality">Credits</a> <br/> </div><div class="col col-sm-3 col-12 box-cs"><strong>Contact</strong> <br/> <a class="link-mail text-secondary link-cs" href="/cdn-cgi/l/email-protection#14676164647b66603f31215675603121503f777b79767b67606675643f312156707b603121503f777b792b6761767e71776029577b7a607577603f627d753f437176477d6071" title="support [at] combostrap [dot] com">Mail</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="newsletter" href="/newsletter-ppmtxf72" title="The newsletters of ComboStrap: receive news, tips, and tricks on how to create a professional and remarkable experience for your readers.">Newsletter</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="support" href="/where-to-get-information-help-xzqtp19g" title="We are here to help, don't hesitate to mail us. This page shows you also all other support channel on how to build a great website.">Support</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="about_us" href="/the-combostrap-organization-about-us-dfsojp0a" title="A page about the combostrap organization that also demonstrates how you can create an organization page">About Us</a> <br/> <a class="link-internal text-secondary link-cs" data-wiki-id="security" href="/what-are-the-security-measures-that-we-take-tluuua1f" title="At combostrap, we take the security of your website seriously. This articles shows you what we do about it.">Security</a> <br/> </div></div></div></div> </footer> <img class="d-none" id="task-runner" src="/lib/exe/taskrunner.php?1743893978&id=docs%3Acontent%3Aheading" alt="Task Runner" width="2" height="1"/> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body> </html>