From f998ca8a262dd37af88d4a555963dda045e39c7e Mon Sep 17 00:00:00 2001 From: zhengchun Date: Thu, 30 Nov 2023 12:41:08 +0000 Subject: [PATCH] deploy: add32d15ce216a5888eb40c563e3d50a1f21e6a5 --- 404.html | 2 +- ...18c04144f598281a4899667395de022191.min.js} | 2 +- components/accordion/index.html | 4 +- components/alerts/index.html | 6 +- components/avatar-group/index.html | 4 +- components/avatar/index.html | 4 +- components/badge/index.html | 4 +- components/blankslates/index.html | 4 +- components/breadcrumb/index.html | 4 +- components/button-group/index.html | 4 +- components/button/index.html | 6 +- components/card/index.html | 4 +- components/carousel/index.html | 6 +- components/checkbox/index.html | 4 +- components/close-button/index.html | 4 +- components/collapse/index.html | 6 +- components/dropdown/index.html | 6 +- components/figures/index.html | 4 +- components/floating-label/index.html | 4 +- components/focus-ring/index.html | 4 +- components/form/index.html | 4 +- components/icon-link/index.html | 4 +- components/images/index.html | 4 +- components/index.html | 2 +- components/input-group/index.html | 4 +- components/layout/index.html | 4 +- components/link/index.html | 4 +- components/list-group/index.html | 6 +- components/modal/index.html | 6 +- components/navbar/index.html | 4 +- components/offcanvas/index.html | 6 +- components/pagination/index.html | 4 +- components/pills/index.html | 6 +- components/placeholders/index.html | 4 +- components/popover/index.html | 6 +- components/progress-bar/index.html | 4 +- components/radio/index.html | 4 +- components/range/index.html | 4 +- components/scrollspy/index.html | 6 +- components/select/index.html | 4 +- components/spinner/index.html | 4 +- components/stretched-link/index.html | 4 +- components/switch/index.html | 4 +- components/table/index.html | 4 +- components/tabs/index.html | 6 +- components/textfield/index.html | 4 +- components/toast/index.html | 6 +- components/tooltip/index.html | 6 +- components/validation/index.html | 4 +- docs/align-content/index.html | 4 +- docs/align-items/index.html | 4 +- docs/align-self/index.html | 4 +- docs/animation/index.html | 4 +- docs/aspect-ratio/index.html | 4 +- docs/background-color/index.html | 4 +- docs/border-color/index.html | 4 +- docs/border-opacity/index.html | 4 +- docs/border-radius/index.html | 4 +- docs/border-style/index.html | 4 +- docs/border-width/index.html | 4 +- docs/border/index.html | 4 +- docs/box-shadow/index.html | 4 +- docs/breakpoints/index.html | 4 +- docs/clear/index.html | 4 +- docs/clearfix/index.html | 4 +- docs/columns/index.html | 4 +- docs/containers/index.html | 4 +- docs/content/index.html | 4 +- docs/css-grid/index.html | 4 +- docs/display/index.html | 4 +- docs/flex-direction/index.html | 4 +- docs/flex-grow/index.html | 4 +- docs/flex-shrink/index.html | 4 +- docs/flex-wrap/index.html | 4 +- docs/flex/index.html | 4 +- docs/floats/index.html | 4 +- docs/font-family/index.html | 4 +- docs/font-size/index.html | 4 +- docs/font-style/index.html | 4 +- docs/font-weight/index.html | 4 +- docs/gap/index.html | 4 +- docs/grid/index.html | 4 +- docs/gutters/index.html | 4 +- docs/height/index.html | 4 +- docs/index.html | 2 +- docs/justify-content/index.html | 4 +- docs/letter-spacing/index.html | 4 +- docs/line-height/index.html | 4 +- docs/margin/index.html | 4 +- docs/max-width/index.html | 4 +- docs/min-width/index.html | 4 +- docs/opacity/index.html | 4 +- docs/order/index.html | 4 +- docs/overflow/index.html | 4 +- docs/padding/index.html | 4 +- docs/pointer-events/index.html | 4 +- docs/position/index.html | 4 +- docs/reboot/index.html | 4 +- docs/rotate/index.html | 4 +- docs/stacks/index.html | 4 +- docs/text-align/index.html | 4 +- docs/text-color/index.html | 4 +- docs/text-decoration/index.html | 4 +- docs/text-overflow/index.html | 4 +- docs/text-transform/index.html | 4 +- docs/user-select/index.html | 4 +- docs/vertical-align/index.html | 4 +- docs/vertical-rule/index.html | 4 +- docs/visibility/index.html | 4 +- docs/visually-hidden/index.html | 4 +- docs/whitespace/index.html | 4 +- docs/width/index.html | 4 +- docs/word-break/index.html | 4 +- docs/z-index/index.html | 4 +- get-started/color/index.html | 4 +- get-started/dark-mode/index.html | 4 +- get-started/index.html | 2 +- get-started/installation/index.html | 4 +- get-started/quick-start/index.html | 4 +- get-started/what-is-new/index.html | 4 +- index.html | 67 +++++++++++++------ sitemap.xml | 2 +- tokens/color/index.html | 4 +- tokens/index.html | 2 +- tokens/shadow/index.html | 4 +- tokens/space/index.html | 4 +- 126 files changed, 302 insertions(+), 279 deletions(-) rename assets/js/{main.8795805b327c986cff8ba1fc4152e5085b98750797cdd536407979c4a6dd16be.min.js => main.02aa9ad024db46a2c2ead51095a11718c04144f598281a4899667395de022191.min.js} (90%) diff --git a/404.html b/404.html index e85dde1..f025c87 100644 --- a/404.html +++ b/404.html @@ -9,7 +9,7 @@
Home Get StartedTokensDocsComponents

Error 404

The page you requested was not found

Back to home
- + diff --git a/assets/js/main.8795805b327c986cff8ba1fc4152e5085b98750797cdd536407979c4a6dd16be.min.js b/assets/js/main.02aa9ad024db46a2c2ead51095a11718c04144f598281a4899667395de022191.min.js similarity index 90% rename from assets/js/main.8795805b327c986cff8ba1fc4152e5085b98750797cdd536407979c4a6dd16be.min.js rename to assets/js/main.02aa9ad024db46a2c2ead51095a11718c04144f598281a4899667395de022191.min.js index aaa9dcd..46ed510 100644 --- a/assets/js/main.8795805b327c986cff8ba1fc4152e5085b98750797cdd536407979c4a6dd16be.min.js +++ b/assets/js/main.02aa9ad024db46a2c2ead51095a11718c04144f598281a4899667395de022191.min.js @@ -12,4 +12,4 @@ ]|\\\\.|\\[(?:[^[\\]\\\\ ]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[ ])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[ -,.;:})\\]]|//))`),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript,Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss,(()=>{"use strict";const a=new ClipboardJS(".bd-clipboard");a.on("success",e=>{const t=e.trigger.querySelector(".status");t.innerHTML=''}),document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(e=>{new bootstrap.Tooltip(e)}),document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{new bootstrap.Popover(e)}),document.querySelectorAll('.doc-tabs button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=document.querySelectorAll('[data-bs-spy="scroll"]');t.forEach(e=>{bootstrap.ScrollSpy.getInstance(e).refresh()})})});const e=document.querySelector(".sidebar");if(e){const n=e.clientHeight,t=document.querySelector(".sidebar__link.active");if(t){const i=t.offsetTop,o=t.clientHeight,s=i,a=s-n+o;(e.scrollTop>s||e.scrollTop{document.querySelector("#search-input").focus()});const o=()=>localStorage.getItem("theme"),r=e=>localStorage.setItem("theme",e),t=()=>{const e=o();return e?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},n=e=>{e==="auto"&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};n(t());const i=(e,t=!1)=>{const n=document.querySelector("#bd-theme");if(!n)return;const s=document.querySelector(`[data-bs-theme-value="${e}"]`);document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),s.classList.add("active"),s.setAttribute("aria-pressed","true"),t&&n.focus()};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const e=o();e!=="light"&&e!=="dark"&&n(t())}),window.addEventListener("DOMContentLoaded",()=>{i(t()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-bs-theme-value");r(t),n(t),i(t,!0)})})})})(),(()=>{"use strict";const e="Copy to clipboard";function n(e,t){document.querySelectorAll(e).forEach(e=>{bootstrap.Tooltip.getOrCreateInstance(e,{title:t})})}n(".btn-clipboard",e);const s=new ClipboardJS(".btn-clipboard");s.on("success",t=>{const n=bootstrap.Tooltip.getInstance(t.trigger);n.setContent({".tooltip-inner":"Copied!"}),t.trigger.addEventListener("hidden.bs.tooltip",()=>{n.setContent({".tooltip-inner":e})},{once:!0})}),document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]').forEach(e=>{e.indeterminate=!0}),document.querySelectorAll('.doc-contents [href="#"]').forEach(e=>{e.addEventListener("click",e=>{e.preventDefault()})}),document.querySelectorAll('.bd-example-range [type="range"]').forEach(e=>{var n,t=100;e.hasAttribute("max")&&(t=parseInt(e.getAttribute("max"))),n=e.value/t*100,e.style.setProperty("--track-fg-width",n+"%"),e.addEventListener("input",n=>{var s=e.value/t*100;e.style.setProperty("--track-fg-width",s+"%")})}),document.querySelectorAll(".bd-example-validation .needs-validation").forEach(e=>{e.addEventListener("submit",t=>{e.checkValidity()||(t.preventDefault(),t.stopPropagation()),e.classList.add("was-validated")},!1)}),document.querySelectorAll('[data-example-toggle="toast"]').forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();const n=document.querySelector(e.getAttribute("data-example-target")),s=new bootstrap.Toast(n);s.show()})}),document.querySelectorAll(".bd-example-toast>.btn").forEach(e=>{var t=0;e.addEventListener("click",n=>{if(n.preventDefault(),e.nextElementSibling.classList.contains("toast-container")){var s=e.nextElementSibling.querySelectorAll(".toast");const n=t%s.length,o=new bootstrap.Toast(s[n]);o.show(),t=t+1}})}),document.querySelectorAll(".bd-example-progressTracker [data-bs-step]").forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const t=e.target.getAttribute("data-bs-step"),s=e.target.getAttribute("data-bs-target"),o=document.querySelector(s);var n=bootstrap.ProgressTracker.getOrCreateInstance(o);t=="next"?n.next():t=="prev"?n.prev():t=="reset"&&n.reset()})}),document.querySelectorAll(".bd-example-rating-feedback .rating").forEach(e=>{e.addEventListener("changeActive.fbs.rating",e=>{const t=document.getElementById("rating-feedback");var n=["Bad","Poor","OK","Good","Excellent"];t.innerText=e.index>=0?n[e.index]:""}),e.addEventListener("change.fbs.rating",e=>{const t=document.getElementById("rating-feedback");var n=["Bad","Poor","OK","Good","Excellent"];t.innerText=n[e.index]})}),document.querySelectorAll(".bd-example-get-rating-value button").forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const t=document.querySelector('[name="exampleRatingScore"]:checked');t&&(document.getElementById("scoreResult").innerText=t.value)})});const t=document.querySelectorAll(".bd-example-offcanvas .offcanvas");t&&t.forEach(e=>{e.addEventListener("show.bs.offcanvas",e=>{e.preventDefault()},!1)})})(),(()=>{"use strict";let t=null,e=null,n="",s=!1;function o(e){let t=document.querySelector("#searchLoading");e?t.classList.add("visually-hidden"):t.classList.remove("visually-hidden")}function r(t){if(e){t(e);return}s=!0,o(!1),fetch("/index.json").then(e=>e.json()).then(e=>{t(e)})}function c(e,t){const i={acceptNode:function(){return NodeFilter.FILTER_ACCEPT}},o=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,i,!1);let n=null;for(;n=o.nextNode();){const i=n.textContent.toLowerCase();let e=!1;for(var s=0;s{let i=e.filter(e=>e.objectID===t.ref)[0];var o=document.createElement("a");o.href=i.link,o.id=`docsearch-item-${i.objectID}`,o.classList.add("list-group-item","list-group-item-action");let a=document.createElement("div");a.innerText=i.title,c(a,lunr.tokenizer(n)),o.appendChild(a),s.appendChild(o)}),i.innerHTML=s.outerHTML}function i(a){if(n=a,n==""){var c=document.querySelector("#searchModal .modal-body");c.innerHTML="";return}if(s)return;r(a=>{e=a;var r=new lunr.Builder;if(r.ref("objectID"),r.field("title",{boost:5}),r.field("link",{boost:2,extractor:function(e){return e.link.replace(/\//g," ").trim()}}),r.metadataWhitelist=["position"],e.forEach(e=>{r.add(e)}),t=r.build(),s=!1,o(!0),i=="")return;d(n)})}const a=document.querySelector("#search-input");a.addEventListener("keyup",e=>{if(e.key==="Enter"||e.keyCode===13)return;i(a.value)})})() \ No newline at end of file +,.;:})\\]]|//))`),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript,Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss,(()=>{"use strict";const r=new ClipboardJS(".bd-clipboard");r.on("success",e=>{const t=e.trigger.querySelector(".status");t.innerHTML=''}),document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(e=>{new bootstrap.Tooltip(e)}),document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{new bootstrap.Popover(e)}),document.querySelectorAll('.doc-tabs button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=document.querySelectorAll('[data-bs-spy="scroll"]');t.forEach(e=>{bootstrap.ScrollSpy.getInstance(e).refresh()})})});const e=document.querySelector(".sidebar");if(e){const n=e.clientHeight,t=document.querySelector(".sidebar__link.active");if(t){const i=t.offsetTop,o=t.clientHeight,s=i,a=s-n+o;(e.scrollTop>s||e.scrollTop{document.querySelector("#search-input").focus()});const i=()=>localStorage.getItem("theme"),a=e=>localStorage.setItem("theme",e),n=()=>{const e=i();return e?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},t=e=>{e==="auto"&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};t(n());const s=(e,t=!1)=>{const n=document.querySelector("#bd-theme");if(!n)return;const s=document.querySelector(`[data-bs-theme-value="${e}"]`);document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),s.classList.add("active"),s.setAttribute("aria-pressed","true"),t&&n.focus();const o=document.querySelector(`input[name="btnColorMode"][value="${e}"]`);typeof o=="object"&&(o.checked=!0)};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const e=i();e!=="light"&&e!=="dark"&&t(n())}),window.addEventListener("DOMContentLoaded",()=>{s(n()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const n=e.getAttribute("data-bs-theme-value");a(n),t(n),s(n,!0)})}),document.querySelectorAll('input[name="btnColorMode"]').forEach(e=>{e.addEventListener("change",n=>{a(e.value),t(e.value),s(e.value,!1)})})})})(),(()=>{"use strict";const e="Copy to clipboard";function n(e,t){document.querySelectorAll(e).forEach(e=>{bootstrap.Tooltip.getOrCreateInstance(e,{title:t})})}n(".btn-clipboard",e);const s=new ClipboardJS(".btn-clipboard");s.on("success",t=>{const n=bootstrap.Tooltip.getInstance(t.trigger);n.setContent({".tooltip-inner":"Copied!"}),t.trigger.addEventListener("hidden.bs.tooltip",()=>{n.setContent({".tooltip-inner":e})},{once:!0})}),document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]').forEach(e=>{e.indeterminate=!0}),document.querySelectorAll('.doc-contents [href="#"]').forEach(e=>{e.addEventListener("click",e=>{e.preventDefault()})}),document.querySelectorAll('.bd-example-range [type="range"]').forEach(e=>{var n,t=100;e.hasAttribute("max")&&(t=parseInt(e.getAttribute("max"))),n=e.value/t*100,e.style.setProperty("--track-fg-width",n+"%"),e.addEventListener("input",n=>{var s=e.value/t*100;e.style.setProperty("--track-fg-width",s+"%")})}),document.querySelectorAll(".bd-example-validation .needs-validation").forEach(e=>{e.addEventListener("submit",t=>{e.checkValidity()||(t.preventDefault(),t.stopPropagation()),e.classList.add("was-validated")},!1)}),document.querySelectorAll('[data-example-toggle="toast"]').forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();const n=document.querySelector(e.getAttribute("data-example-target")),s=new bootstrap.Toast(n);s.show()})}),document.querySelectorAll(".bd-example-toast>.btn").forEach(e=>{var t=0;e.addEventListener("click",n=>{if(n.preventDefault(),e.nextElementSibling.classList.contains("toast-container")){var s=e.nextElementSibling.querySelectorAll(".toast");const n=t%s.length,o=new bootstrap.Toast(s[n]);o.show(),t=t+1}})}),document.querySelectorAll(".bd-example-progressTracker [data-bs-step]").forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const t=e.target.getAttribute("data-bs-step"),s=e.target.getAttribute("data-bs-target"),o=document.querySelector(s);var n=bootstrap.ProgressTracker.getOrCreateInstance(o);t=="next"?n.next():t=="prev"?n.prev():t=="reset"&&n.reset()})}),document.querySelectorAll(".bd-example-rating-feedback .rating").forEach(e=>{e.addEventListener("changeActive.fbs.rating",e=>{const t=document.getElementById("rating-feedback");var n=["Bad","Poor","OK","Good","Excellent"];t.innerText=e.index>=0?n[e.index]:""}),e.addEventListener("change.fbs.rating",e=>{const t=document.getElementById("rating-feedback");var n=["Bad","Poor","OK","Good","Excellent"];t.innerText=n[e.index]})}),document.querySelectorAll(".bd-example-get-rating-value button").forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const t=document.querySelector('[name="exampleRatingScore"]:checked');t&&(document.getElementById("scoreResult").innerText=t.value)})});const t=document.querySelectorAll(".bd-example-offcanvas .offcanvas");t&&t.forEach(e=>{e.addEventListener("show.bs.offcanvas",e=>{e.preventDefault()},!1)})})(),(()=>{"use strict";let t=null,e=null,n="",s=!1;function o(e){let t=document.querySelector("#searchLoading");e?t.classList.add("visually-hidden"):t.classList.remove("visually-hidden")}function r(t){if(e){t(e);return}s=!0,o(!1),fetch("/index.json").then(e=>e.json()).then(e=>{t(e)})}function c(e,t){const i={acceptNode:function(){return NodeFilter.FILTER_ACCEPT}},o=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,i,!1);let n=null;for(;n=o.nextNode();){const i=n.textContent.toLowerCase();let e=!1;for(var s=0;s{let i=e.filter(e=>e.objectID===t.ref)[0];var o=document.createElement("a");o.href=i.link,o.id=`docsearch-item-${i.objectID}`,o.classList.add("list-group-item","list-group-item-action");let a=document.createElement("div");a.innerText=i.title,c(a,lunr.tokenizer(n)),o.appendChild(a),s.appendChild(o)}),i.innerHTML=s.outerHTML}function i(a){if(n=a,n==""){var c=document.querySelector("#searchModal .modal-body");c.innerHTML="";return}if(s)return;r(a=>{e=a;var r=new lunr.Builder;if(r.ref("objectID"),r.field("title",{boost:5}),r.field("link",{boost:2,extractor:function(e){return e.link.replace(/\//g," ").trim()}}),r.metadataWhitelist=["position"],e.forEach(e=>{r.add(e)}),t=r.build(),s=!1,o(!0),i=="")return;d(n)})}const a=document.querySelector("#search-input");a.addEventListener("keyup",e=>{if(e.key==="Enter"||e.keyCode===13)return;i(a.value)})})() \ No newline at end of file diff --git a/components/accordion/index.html b/components/accordion/index.html index 33027d3..4fd2f41 100644 --- a/components/accordion/index.html +++ b/components/accordion/index.html @@ -166,8 +166,8 @@ </div> </div> </div> -</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

For optimal accessibility we recommend setting id and aria-controls on the AccordionSummary. The Accordion will derive the necessary aria-labelledby and id for the content region of the accordion.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

For optimal accessibility we recommend setting id and aria-controls on the AccordionSummary. The Accordion will derive the necessary aria-labelledby and id for the content region of the accordion.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/alerts/index.html b/components/alerts/index.html index b05c53a..ba76b05 100644 --- a/components/alerts/index.html +++ b/components/alerts/index.html @@ -114,7 +114,7 @@ <p class="mb-0">You will rejoice to hear that no disaster has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. </p> </div> </div> -</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

Actions must have a tab index of 0 so that they can be reached by keyboard-only users.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Initialize

Initialize elements as alerts

const alertList = document.querySelectorAll(".alert");
+</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

Actions must have a tab index of 0 so that they can be reached by keyboard-only users.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Initialize

Initialize elements as alerts

const alertList = document.querySelectorAll(".alert");
 const alerts = [...alertList].map((element) => new bootstrap.Alert(element));

Triggers

Dismissal can be achieved with the data attribute on a button within the alert as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@@ -128,8 +128,8 @@
   // so it doesn't get lost/reset to the start of the page
   // document.getElementById('...').focus()
 });
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/avatar-group/index.html b/components/avatar-group/index.html index b66fc86..c2d2a1b 100644 --- a/components/avatar-group/index.html +++ b/components/avatar-group/index.html @@ -36,8 +36,8 @@ <img class="avatar" src="/images/avatar/4.jpg" /> <img class="avatar" src="/images/avatar/5.jpg" /> <span class="avatar">+6</span> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/avatar/index.html b/components/avatar/index.html index 1e9006d..1015425 100644 --- a/components/avatar/index.html +++ b/components/avatar/index.html @@ -38,8 +38,8 @@ <img class="avatar" src="/images/avatar/1.jpg" /> <img class="avatar avatar-lg" src="/images/avatar/1.jpg" /> <img class="avatar avatar-xl" src="/images/avatar/1.jpg" /> -<img class="avatar avatar-xxl" src="/images/avatar/1.jpg" />
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<img class="avatar avatar-xxl" src="/images/avatar/1.jpg" />
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/badge/index.html b/components/badge/index.html index e1d26df..e06b043 100644 --- a/components/badge/index.html +++ b/components/badge/index.html @@ -64,8 +64,8 @@ <span class="badge rounded-pill text-bg-warning">Warning</span> <span class="badge rounded-pill text-bg-info">Info</span> <span class="badge rounded-pill text-bg-light">Light</span> -<span class="badge rounded-pill text-bg-dark">Dark</span>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<span class="badge rounded-pill text-bg-dark">Dark</span>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/blankslates/index.html b/components/blankslates/index.html index f840e69..5b18a21 100644 --- a/components/blankslates/index.html +++ b/components/blankslates/index.html @@ -57,8 +57,8 @@ <div class="blankslate-actions"> <button class="btn btn-primary" type="button">Request access</button> </div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index e6c00f2..874ce75 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -86,8 +86,8 @@ <li class="breadcrumb-item"><a class="link-secondary" href="#">Item 3</a></li> <li class="breadcrumb-item active" aria-current="page">Item 4</li> </ol> -</nav>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)

Be sure to add a aria-label="breadcrumb description on the Breadcrumbs component.

  • The set of links is structured using an ordered list (<ol> element).
  • To prevent screen reader announcement of the visual separators between links, they are hidden with aria-hidden.
  • A nav element labeled with aria-label identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</nav>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)

Be sure to add a aria-label="breadcrumb description on the Breadcrumbs component.

  • The set of links is structured using an ordered list (<ol> element).
  • To prevent screen reader announcement of the visual separators between links, they are hidden with aria-hidden.
  • A nav element labeled with aria-label identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/button-group/index.html b/components/button-group/index.html index e62276f..ecb7dd8 100644 --- a/components/button-group/index.html +++ b/components/button-group/index.html @@ -260,8 +260,8 @@ </div> <button type="button" class="btn btn-primary">3</button> </div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/button/index.html b/components/button/index.html index 071b2c5..f610adc 100644 --- a/components/button/index.html +++ b/components/button/index.html @@ -161,7 +161,7 @@ See the Bootstrap button variables.

Tweet
<a class="btn btn-primary border-0" href="#" role="button"
  style="--bs-btn-bg: #1d9bf0; --bs-btn-hover-bg: #0c7abf">
   <i class="fa-brands fa-twitter"></i> Tweet
-</a>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Button plugin

The button plugin allows you to create simple on/off toggle buttons.

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Button plugin

The button plugin allows you to create simple on/off toggle buttons.

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

@@ -189,8 +189,8 @@ const button = bootstrap.Button.getOrCreateInstance(buttonElement) button.toggle() }) -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/card/index.html b/components/card/index.html index 64d02c2..7a61ccf 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -478,8 +478,8 @@ <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/carousel/index.html b/components/carousel/index.html index add53f9..7c5bd14 100644 --- a/components/carousel/index.html +++ b/components/carousel/index.html @@ -229,7 +229,7 @@ <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> -</div>

Custom transition

The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. transition: transform 2s ease, opacity .5s ease-out).

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-bs-ride="carousel" attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

const carousel = new bootstrap.Carousel('#myCarousel')
+</div>

Custom transition

The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. transition: transform 2s ease, opacity .5s ease-out).

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-bs-ride="carousel" attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

const carousel = new bootstrap.Carousel('#myCarousel')

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

NameTypeDefaultDescription
intervalnumber5000The amount of time to delay between automatically cycling an item.
keyboardbooleantrueWhether the carousel should react to keyboard events.
pausestring, boolean"hover"If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it. On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior.
ridestring, booleanfalseIf set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
touchbooleantrueWhether the carousel should support left/right swipe interactions on touchscreen devices.
wrapbooleantrueWhether the carousel should cycle continuously or have hard stops.
indicatorstring.carousel-indicatorsSpecified the carousel indicator of the carousel. NEW

Methods

You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:

const myCarouselElement = document.querySelector('#myCarousel')
 const carousel = new bootstrap.Carousel(myCarouselElement, {
   interval: 2000,
@@ -240,8 +240,8 @@
 myCarousel.addEventListener('slide.bs.carousel', event => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/checkbox/index.html b/components/checkbox/index.html index f927562..a2fab40 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -117,8 +117,8 @@ <label class="form-check-label" for="reverseCheck2"> Disabled reverse checkbox </label> -</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)

  • All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> HTML element.
  • When a label can’t be used, it’s necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) on the element.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)

  • All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> HTML element.
  • When a label can’t be used, it’s necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) on the element.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/close-button/index.html b/components/close-button/index.html index 98e75cd..5e40177 100644 --- a/components/close-button/index.html +++ b/components/close-button/index.html @@ -10,8 +10,8 @@ style=" --bs-btn-close-width:32px; --bs-btn-close-height:32px"> -</button>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</button>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/collapse/index.html b/components/collapse/index.html index 02529db..fc26686 100644 --- a/components/collapse/index.html +++ b/components/collapse/index.html @@ -48,7 +48,7 @@ </div> </div> </div> -</div>

Accessibility

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

  • .collapse hides the content
  • .collapse.show shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss.

Via data attributes

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". Refer to the accordion page for more information.

Via JavaScript

Enable manually with:

const collapseElementList = document.querySelectorAll('.collapse')
+</div>

Accessibility

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

  • .collapse hides the content
  • .collapse.show shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss.

Via data attributes

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". Refer to the accordion page for more information.

Via JavaScript

Enable manually with:

const collapseElementList = document.querySelectorAll('.collapse')
 const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

NameTypeDefaultDescription
parentselector, jQuery object, DOM elementfalseIf parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
togglebooleantrueToggles the collapsible element on invocation

Methods

Activates your content as a collapsible element. Accepts an optional options object.

You can create a collapse instance with the constructor, for example:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
   toggle: false
@@ -57,8 +57,8 @@
 myCollapsible.addEventListener('hidden.bs.collapse', event => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/dropdown/index.html b/components/dropdown/index.html index 8007304..d6fc4b5 100644 --- a/components/dropdown/index.html +++ b/components/dropdown/index.html @@ -505,7 +505,7 @@ <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> -</div>

Below is the autoClose options:

  • true - the dropdown will be closed by clicking outside or inside the dropdown menu.
  • false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
  • inside - the dropdown will be closed (only) by clicking inside the dropdown menu.
  • outside - the dropdown will be closed (only) by clicking outside the dropdown menu.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent .dropdown-menu. The data-bs-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

Via data attributes

Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
+</div>

Below is the autoClose options:

  • true - the dropdown will be closed by clicking outside or inside the dropdown menu.
  • false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
  • inside - the dropdown will be closed (only) by clicking inside the dropdown menu.
  • outside - the dropdown will be closed (only) by clicking outside the dropdown menu.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent .dropdown-menu. The data-bs-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

Via data attributes

Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
   <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown trigger
   </button>
@@ -528,8 +528,8 @@
 myDropdown.addEventListener('show.bs.dropdown', event => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/figures/index.html b/components/figures/index.html index 3b88d0b..831f88c 100644 --- a/components/figures/index.html +++ b/components/figures/index.html @@ -14,8 +14,8 @@ <img src="/images/path/to.jpg" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption text-end">A caption for the above image.</figcaption> </figure> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/floating-label/index.html b/components/floating-label/index.html index 10f00ad..200b8e4 100644 --- a/components/floating-label/index.html +++ b/components/floating-label/index.html @@ -107,8 +107,8 @@ <label for="floatingSelectGrid">Works with selects</label> </div> </div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/focus-ring/index.html b/components/focus-ring/index.html index bee5600..48fe73c 100644 --- a/components/focus-ring/index.html +++ b/components/focus-ring/index.html @@ -21,8 +21,8 @@ <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p> <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p> <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p> -<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/form/index.html b/components/form/index.html index 697c0db..0c50e49 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -214,8 +214,8 @@ <div class="mb-3"> <label for="formGroupExampleInput2" class="form-label">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"> -</div>

Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a <label> element, or—in the case of buttons—to include sufficiently descriptive text as part of the <button>...</button> content.

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

  • <label> elements hidden using the .visually-hidden class
  • Pointing to an existing element that can act as a label using aria-labelledby
  • Providing a title attribute
  • Explicitly setting the accessible name on an element using aria-label

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a <label> element, or—in the case of buttons—to include sufficiently descriptive text as part of the <button>...</button> content.

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

  • <label> elements hidden using the .visually-hidden class
  • Pointing to an existing element that can act as a label using aria-labelledby
  • Providing a title attribute
  • Explicitly setting the accessible name on an element using aria-label

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/icon-link/index.html b/components/icon-link/index.html index eb7db86..fd30755 100644 --- a/components/icon-link/index.html +++ b/components/icon-link/index.html @@ -19,8 +19,8 @@ <svg class="bi" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path> </svg> -</a>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</a>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/images/index.html b/components/images/index.html index 91a993e..d5b8b1a 100644 --- a/components/images/index.html +++ b/components/images/index.html @@ -16,8 +16,8 @@ <source srcset="..." type="image/svg+xml"> <img src="..." class="img-fluid img-thumbnail" alt="..."> </picture> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/index.html b/components/index.html index c304b31..ab57490 100644 --- a/components/index.html +++ b/components/index.html @@ -7,7 +7,7 @@

Components

Components are the reusable building blocks of our design system.

Actions

B

Button

Buttons allow users to perform an action or to navigate to another page, with a single tap.

B

Button Group

Button group component is a grouping of buttons gives users access to frequently performed, related to each other actions.

C

Close Button

A close button used for dismissing content like modals and alerts.

Data-display

A

Avatarnew

Avatar component is a visual representation of an entity, such as a user or an organization.

A

Avatar Groupnew

Avatar group component displays a number of avatars grouped together in a stack.

B

Badge

Badges are used to inform merchants of the status of an object or of an action that’s been taken.

T

Table

Tables are used to organize and display information.

Feedback

A

Alerts

Alerts is flash messages that shows contextual feedback messages for attracts the user's attention without interrupting the user's task.

M

Modal

Modals are overlays that display content in a layer above the page requires user interaction.

P

Placeholders

Placeholders used for loading placeholders for your content before the data gets loaded on the page.

P

Popover

Popovers are containers used to display transient content such as menus, options, additional actions, and more in an overlay.

P

Progress bar

Progress bar indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

S

Spinner

Spinner is an animated spinning icon that lets users know content is being loaded.

T

Toast

Toasts display brief, temporary notifications for users on the outcome of an action.

T

Tooltip

Tooltips is a floating, non-actionable label show contextual help or specific feature when a user hovers or focuses on an element.

V

Validation

Validation provide a valuable, actionable feedback to your users with HTML5 form validation.

Inputs

C

Checkbox

Checkboxs allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

D

Dropdown

Dropdown displays a list of actions or options allows the user to select one.

F

Floating Label

Floating label display the type of input in floating over an input fields.

F

Form

Form element allows users to input information.

I

Input Group

Input group allows users to grouping related form controls in a single input.

R

Radio Group

Radio group allows users to select only one option from a number of choices.

R

Range slider

Range slider component lets users choose a numeric value from the given values on a slider.

S

Select Input

Select input allows users to make a single selection or multiple selections from a list of options in a limited space.

S

Switch

Switches allow users to turn an individual option on or off.

T

Text field

Text fields allow users to input custom text entries with a keyboard.

Navigation

B

Breadcrumb

Breadcrumbs component are a navigation system show hierarchy and navigational context for a user’s location within an app.

N

Navbar

Navbars allow users to quickly navigate the entire content of a product or a section of the application.

O

Offcanvas

Offcanvas is a hidden sidebar on the page used for navigation, shopping carts, etc.

P

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

P

Pills

Pills allows users navigate to another pages or switch to another content on the same page.

S

Scrollspy

Scrollspy plugin allows automatically scroll into the particular element in the viewport.

T

Tabs

Tabs organize content into multiple sections on the same page and allow users to navigate between them.

Surfaces

A

Accordion

Accordion component allows the user to show and hide sections of related content on a page.

B

Blankslatenew

Blankslates are used as placeholders when there is a lack of content within a page or section.

C

Card

Cards used to group similar information into flexible containers to let users to browse a collection of related items and actions.

C

Carousel

Carousel are slideshow for cycling through multiple elements such as images, videos, or text.

C

Collapse

Collapse are expansion panel allows users can expand or collapse the long sections of information.

L

List Group

List gorup used for displays a continuous group of text or images.

Utilities

F

Figures

Utilities for controlling the displaying related images and text with the figure element.

F

Focus ring

Focus ring is an utility classes that allows you to add and modify custom focus ring styles to elements and components.

I

Icon link

Quickly create stylized hyperlinks with Bootstrap Icons or other icons.

I

Images

Utilities for controlling images.

L

Layoutnew

Layout are build page layouts with 2 columns.

L

Link

Links allow users to navigate to a different location.

S

Stretched Link

Stretched link allow users to navigate to a different location on overlay elements.

- + diff --git a/components/input-group/index.html b/components/input-group/index.html index d2eac1f..9da0770 100644 --- a/components/input-group/index.html +++ b/components/input-group/index.html @@ -238,8 +238,8 @@ <div class="input-group"> <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"> <button class="btn btn-primary" type="button" id="inputGroupFileAddon04">Button</button> -</div>

Accessibility

Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (<label> elements hidden using the .visually-hidden class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (<label> elements hidden using the .visually-hidden class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/layout/index.html b/components/layout/index.html index 81f73b0..854bb33 100644 --- a/components/layout/index.html +++ b/components/layout/index.html @@ -87,8 +87,8 @@ <aside class="layout-sidebar border-end" style="width:240px"> .layout-sidebar </aside> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/link/index.html b/components/link/index.html index 8a7b471..d577a04 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -60,8 +60,8 @@ Underline opacity 0 </a>

No underline

Use the text decoration utilities text-decoration-none to remove the underline when mouse hover a link.

This ia a link
<div class="d-flex flex-column">
   <a href="#" class="text-decoration-none">This ia a link</a>
-</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/list-group/index.html b/components/list-group/index.html index a4e48fc..0df0d0c 100644 --- a/components/list-group/index.html +++ b/components/list-group/index.html @@ -204,7 +204,7 @@ <label class="form-check-label" for="thirdRadio">List item 3</label> </div> </li> -</ul>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Use the tab plugin to extend our list group to create tabbable panes of local content. Check out tabs compoment for more information.

Home +</ul>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Use the tab plugin to extend our list group to create tabbable panes of local content. Check out tabs compoment for more information.

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
@@ -294,8 +294,8 @@
     event.relatedTarget // previous active tab
   })
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/modal/index.html b/components/modal/index.html index f6bf89e..530a5ad 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -323,7 +323,7 @@

Change animation

The $modal-fade-transform variable determines the transform state of .modal-dialog before the modal fade-in animation, the $modal-show-transform variable determines the transform of .modal-dialog at the end of the modal fade-in animation.

If you want for example a zoom-in animation, you can set $modal-fade-transform: scale(.8).

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
   ...
 </div>
-

Dynamic heights

If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal’s position in case a scrollbar appears.

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)

  • Be sure to add aria-labelledby="id...", referencing the modal title, to .modal. Additionally, you may give a description of your modal dialog with aria-describedby="id..." on .modal. Note that you don’t need to add role="dialog" since we already add it via JavaScript.
  • The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Use data attributes

Toggle

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
+

Dynamic heights

If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal’s position in case a scrollbar appears.

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)

  • Be sure to add aria-labelledby="id...", referencing the modal title, to .modal. Additionally, you may give a description of your modal dialog with aria-describedby="id..." on .modal. Note that you don’t need to add role="dialog" since we already add it via JavaScript.
  • The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Use data attributes

Toggle

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Dismiss

Dismissal can be achieved with the data attribute on a button within the modal as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

or on a button outside the modal using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Use JavaScript

Create a modal with a single line of JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
@@ -336,8 +336,8 @@
 myModalEl.addEventListener('hidden.bs.modal', event => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/navbar/index.html b/components/navbar/index.html index 2ed85ca..fcef20a 100644 --- a/components/navbar/index.html +++ b/components/navbar/index.html @@ -660,8 +660,8 @@ </div> </div> </div> -</nav>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</nav>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/offcanvas/index.html b/components/offcanvas/index.html index 3473a17..935fef3 100644 --- a/components/offcanvas/index.html +++ b/components/offcanvas/index.html @@ -132,7 +132,7 @@ This is content within an <code>.offcanvas-lg</code>. </p> </div> -</div>

Responsive offcanvas classes are available across for each breakpoint.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Accessibility

Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="...", referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:

  • .offcanvas hides the content
  • .offcanvas.show shows the content
  • .offcanvas-start hides the offcanvas on the left
  • .offcanvas-end hides the offcanvas on the right
  • .offcanvas-top hides the offcanvas on the top
  • .offcanvas-bottom hides the offcanvas on the bottom

Add a dismiss button with the data-bs-dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Via data attributes

Toggle

Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element. The data-bs-target attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas to the offcanvas element. If you’d like it to default open, add the additional class show.

Dismiss

Dismissal can be achieved with the data attribute on a button within the offcanvas as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+</div>

Responsive offcanvas classes are available across for each breakpoint.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Accessibility

Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="...", referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:

  • .offcanvas hides the content
  • .offcanvas.show shows the content
  • .offcanvas-start hides the offcanvas on the left
  • .offcanvas-end hides the offcanvas on the right
  • .offcanvas-top hides the offcanvas on the top
  • .offcanvas-bottom hides the offcanvas on the bottom

Add a dismiss button with the data-bs-dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Via data attributes

Toggle

Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element. The data-bs-target attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas to the offcanvas element. If you’d like it to default open, add the additional class show.

Dismiss

Dismissal can be achieved with the data attribute on a button within the offcanvas as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

or on a button outside the offcanvas using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Via JavaScript

Enable manually with:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
 const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
@@ -141,8 +141,8 @@
 myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/pagination/index.html b/components/pagination/index.html index 977153c..873a715 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -227,8 +227,8 @@ <a class="page-link" href="#">Next</a> </li> </ul> -</nav>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</nav>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/pills/index.html b/components/pills/index.html index daa7787..bcacd08 100644 --- a/components/pills/index.html +++ b/components/pills/index.html @@ -117,7 +117,7 @@ <a class="nav-link" href="#">Link</a> </li> </ul> -

Accessibility

If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Note that navigation bars, even if visually styled as pills with the .nav-pills class, should not be given role="tablist"``, role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. The aria-current attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding aria-selected="true" on the active tab.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Using data attributes

You can activate a pill navigation without writing any JavaScript by simply specifying data-bs-toggle="pill" on an element. Use these data attributes on .nav-pills.

<ul class="nav nav-pills" id="myTab" role="tablist">
+

Accessibility

If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Note that navigation bars, even if visually styled as pills with the .nav-pills class, should not be given role="tablist"``, role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. The aria-current attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding aria-selected="true" on the active tab.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Using data attributes

You can activate a pill navigation without writing any JavaScript by simply specifying data-bs-toggle="pill" on an element. Use these data attributes on .nav-pills.

<ul class="nav nav-pills" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
     <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
@@ -169,8 +169,8 @@
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/placeholders/index.html b/components/placeholders/index.html index af9eea9..4fbffef 100644 --- a/components/placeholders/index.html +++ b/components/placeholders/index.html @@ -116,8 +116,8 @@ <span class="placeholder bg-danger"></span> <span class="placeholder bg-warning"></span> <span class="placeholder bg-info"></span> -<span class="placeholder bg-dark"></span>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<span class="placeholder bg-dark"></span>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/popover/index.html b/components/popover/index.html index 96964bd..05862a2 100644 --- a/components/popover/index.html +++ b/components/popover/index.html @@ -79,7 +79,7 @@ data-bs-trigger="hover focus" data-bs-content="Disabled popover"> <button class="btn btn-primary" type="button" disabled>Disabled button</button> -</span>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Enable popovers via JavaScript:

const exampleEl = document.getElementById('example')
+</span>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Enable popovers via JavaScript:

const exampleEl = document.getElementById('example')
 const popover = new bootstrap.Popover(exampleEl, options)

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

NameTypeDefaultDescription
allowListobjectDefault valueObject which contains allowed attributes and tags.
animationbooleantrueApply a CSS fade transition to the popover
boundarystring, element'clippingParents'Overflow constraint boundary of the popover (applies only to Popper’s preventOverflow modifier). By default, it’s 'clippingParents' and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s detectOverflow docs.
containerstring, element, falsefalseAppends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
contentstring, element, function''Default content value if data-bs-content attribute isn’t present. If a function is given, it will be called with its this reference set to the element that the popover is attached to.
customClassstring, function''Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'. You can also pass a function that should return a single string containing additional class names.
delaynumber, object0Delay showing and hiding the popover (ms)—doesn’t apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacementsstring, array['top', 'right', 'bottom', 'left']Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s behavior docs.
htmlbooleanfalseAllow HTML in the popover. If true, HTML tags in the popover’s title will be rendered in the popover. If false, innerText property will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.
offsetnumber, string, function[0, 0]Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20". When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: skidding, distance. For more information refer to Popper’s offset docs.
placementstring, function'top'How to position the popover: auto, top, bottom, left, right. When auto is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.
popperConfignull, object, functionnullTo change Bootstrap’s default Popper config, see Popper’s configuration. When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.
sanitizebooleantrueEnable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
sanitizeFnnull, functionnullHere you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
selectorstring, falsefalseIf a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (jQuery.on support). See this issue and an informative example.
templatestring'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'Base HTML to use when creating the popover. The popover’s title will be injected into the .popover-inner. .popover-arrow will become the popover’s arrow. The outermost wrapper element should have the .popover class and role="popover".
titlestring, element, function''Default title value if title attribute isn’t present. If a function is given, it will be called with its this reference set to the element that the popover is attached to.
triggerstring'hover focus'How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. 'manual' indicates that the popover will be triggered programmatically via the .popover('show'), .popover('hide') and .popover('toggle') methods; this value cannot be combined with any other trigger. 'hover' on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.

Using function with popperConfig

const popover = new bootstrap.Popover(element, {
@@ -101,8 +101,8 @@
 myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/progress-bar/index.html b/components/progress-bar/index.html index 8d55ff7..d9ee2bf 100644 --- a/components/progress-bar/index.html +++ b/components/progress-bar/index.html @@ -92,8 +92,8 @@ </div>

Inline progress

For inline progress indicators, use the Progress and d-inline-flex with an inline element such as <span> and add a custom width style.

4 of 16
<span class="fs-sm text-muted me-2">4 of 16</span>
 <div class="progress d-inline-flex" style="width: 160px">
   <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>  
-</div>

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria/#progressbar)

The aria-labe, aria-valuemin, and aria-valuemax are static and must be configured in the HTML. aria-valuenow is updated dynamically by the foundation when the progress value is updated in determinate progress bars.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria/#progressbar)

The aria-labe, aria-valuemin, and aria-valuemax are static and must be configured in the HTML. aria-valuenow is updated dynamically by the foundation when the progress value is updated in determinate progress bars.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/radio/index.html b/components/radio/index.html index 08a5fe4..374e5c4 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -79,8 +79,8 @@ <label class="form-check-label" for="reverseRadio2"> Radio label two </label> -</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/)

  • All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> HTML element.
  • When a label can’t be used, it’s necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) on the element.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/)

  • All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> HTML element.
  • When a label can’t be used, it’s necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) on the element.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/range/index.html b/components/range/index.html index 19906af..f7c8efa 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -13,8 +13,8 @@ range.style.setProperty('--track-fg-width', value + '%'); });

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

<input type="range" min="0" max="100" class="form-range"
- value="50" style="--track-fg-width:50%" disabled/>

With Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<input type="range" class="form-range" min="0" max="5" />

With Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<input type="range" class="form-range" min="0" max="5" step="0.5" />
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- + value="50" style="--track-fg-width:50%" disabled/>

With Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<input type="range" class="form-range" min="0" max="5" />

With Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<input type="range" class="form-range" min="0" max="5" step="0.5" />
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/scrollspy/index.html b/components/scrollspy/index.html index 4b6a60c..77aca5b 100644 --- a/components/scrollspy/index.html +++ b/components/scrollspy/index.html @@ -157,7 +157,7 @@ bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh() }) }) -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-bs-target attribute with the id or class name of the parent element of any Bootstrap .nav component.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
+
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-bs-target attribute with the id or class name of the parent element of any Bootstrap .nav component.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
   ...
   <div id="navbar-example">
     <ul class="nav nav-tabs" role="tablist">
@@ -177,8 +177,8 @@
 firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/select/index.html b/components/select/index.html index 440f34f..6155836 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -41,8 +41,8 @@ <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> -</select>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</select>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/spinner/index.html b/components/spinner/index.html index fa22f8e..9d1e4b2 100644 --- a/components/spinner/index.html +++ b/components/spinner/index.html @@ -203,8 +203,8 @@ <button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Disabled -</button>

Accessibility

  • The spinner should add role="status" attribute on the element and a nested <span class="visually-hidden">Loading...</span>.
  • When place the spinner in the button, disable the button while the spinner is visible.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</button>

Accessibility

  • The spinner should add role="status" attribute on the element and a nested <span class="visually-hidden">Loading...</span>.
  • When place the spinner in the button, disable the button while the spinner is visible.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/stretched-link/index.html b/components/stretched-link/index.html index 0794474..cd00307 100644 --- a/components/stretched-link/index.html +++ b/components/stretched-link/index.html @@ -65,8 +65,8 @@ will only be spread over the <code>p</code>-tag, because a transform is applied to it. </p> </div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/switch/index.html b/components/switch/index.html index 55f0130..1706c5b 100644 --- a/components/switch/index.html +++ b/components/switch/index.html @@ -53,8 +53,8 @@ <input class="form-check-input ms-0" type="checkbox" role="switch" id="switchCheckLabelBottom" /> <label class="form-check-label" for="switchCheckLabelBottom">Bottom placement</label> </div> -</div>

Checkboxes vs. Switches

When to Use a Switch or Checkbox ? Check out Checkboxes vs. Switches.

Accessibility

(WAI-ARIA: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>

Checkboxes vs. Switches

When to Use a Switch or Checkbox ? Check out Checkboxes vs. Switches.

Accessibility

(WAI-ARIA: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/table/index.html b/components/table/index.html index a5a6374..5fb492a 100644 --- a/components/table/index.html +++ b/components/table/index.html @@ -754,8 +754,8 @@ <table class="table"> ... </table> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/tabs/index.html b/components/tabs/index.html index 0bbb6c7..1198a41 100644 --- a/components/tabs/index.html +++ b/components/tabs/index.html @@ -134,7 +134,7 @@ <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </li> -</ul>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)

Dynamic tabbed interfaces, as described in the ARIA Authoring Practices Guide tabs pattern, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set tabindex="-1" on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the roving tabindex accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list’s orientation, both the up and left cursor go to the previous tab, and down and right cursor go to the next tab.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Using data attributes

You can activate a tab navigation without writing any JavaScript by simply specifying data-bs-toggle="tab" on an element. Use these data attributes on .nav-tabs.

<!-- Nav tabs -->
+</ul>

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)

Dynamic tabbed interfaces, as described in the ARIA Authoring Practices Guide tabs pattern, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set tabindex="-1" on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the roving tabindex accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list’s orientation, both the up and left cursor go to the previous tab, and down and right cursor go to the next tab.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Using data attributes

You can activate a tab navigation without writing any JavaScript by simply specifying data-bs-toggle="tab" on an element. Use these data attributes on .nav-tabs.

<!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
     <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
@@ -216,8 +216,8 @@
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/textfield/index.html b/components/textfield/index.html index c3f25c1..f7dd249 100644 --- a/components/textfield/index.html +++ b/components/textfield/index.html @@ -50,8 +50,8 @@ <option value="Seattle"> <option value="Los Angeles"> <option value="Chicago"> -</datalist>

Accessibility

  • Avoid using placeholder text whenever possible. Make sure any critical information is communicated either in the field label or using helper text below the field. Search fields or brief examples are the only exceptions where placeholder text is OK.
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</datalist>

Accessibility

  • Avoid using placeholder text whenever possible. Make sure any critical information is communicated either in the field label or using helper text below the field. Search fields or brief examples are the only exceptions where placeholder text is OK.
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/toast/index.html b/components/toast/index.html index 3ee8aea..80dfdd0 100644 --- a/components/toast/index.html +++ b/components/toast/index.html @@ -253,7 +253,7 @@

When using autohide: false, you must add a close button to allow users to dismiss the toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-autohide="false">
   <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
 </div>
-

While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with autohide: false.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

Initialize

Initialize toasts via JavaScript:

const toastElList = document.querySelectorAll('.toast')
+

While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with autohide: false.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

Initialize

Initialize toasts via JavaScript:

const toastElList = document.querySelectorAll('.toast')
 const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Dismiss button

Dismissal can be achieved with the data attribute on a button within the toast as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

or on a button outside the toast using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
@@ -261,8 +261,8 @@
 myToastEl.addEventListener('hidden.bs.toast', () => {
   // do something...
 })
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/tooltip/index.html b/components/tooltip/index.html index 31eaf6d..633a403 100644 --- a/components/tooltip/index.html +++ b/components/tooltip/index.html @@ -57,7 +57,7 @@ </button>

CSS

.custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
Contents

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

via JavaScript

const exampleEl = document.getElementById('example')
+
Edit this page on Github
Last edited by zhengchun on November 30, 2023
Contents

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

via JavaScript

const exampleEl = document.getElementById('example')
 const tooltip = new bootstrap.Tooltip(exampleEl, options)
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/components/validation/index.html b/components/validation/index.html index 6361b82..8ee8c3b 100644 --- a/components/validation/index.html +++ b/components/validation/index.html @@ -289,8 +289,8 @@ <div class="col-12"> <button class="btn btn-primary" type="submit">Submit form</button> </div> -</form>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</form>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/align-content/index.html b/docs/align-content/index.html index 33fba9f..0e07c21 100644 --- a/docs/align-content/index.html +++ b/docs/align-content/index.html @@ -51,8 +51,8 @@

Breakpoints

All align-content utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format align-content-{breakpoint}-{value}.

  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

For example, use align-content-md-around to apply the align-content-around utility at only medium screen sizes and above.

<div class="d-flex align-content-start align-content-md-around">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/align-items/index.html b/docs/align-items/index.html index d4666c9..dbdeb58 100644 --- a/docs/align-items/index.html +++ b/docs/align-items/index.html @@ -34,8 +34,8 @@

Breakpoints

All align-items utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format align-items-{breakpoint}-{value}.

  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

For example, use align-items-md-center to apply the items-center utility at only medium screen sizes and above.

<div class="d-flex align-items-stretch align-items-md-center">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/align-self/index.html b/docs/align-self/index.html index d58be7d..cb13e83 100644 --- a/docs/align-self/index.html +++ b/docs/align-self/index.html @@ -34,8 +34,8 @@

Breakpoints

All align-self utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format align-self-{breakpoint}-{value}.

  • .align-self-sm-auto
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-auto
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-auto
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-auto
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-auto
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

For example, use align-self-md-end to apply the align-self-end utility at only medium screen sizes and above.

<div class="align-self-auto align-self-md-end">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/animation/index.html b/docs/animation/index.html index 435fd9a..3f34a00 100644 --- a/docs/animation/index.html +++ b/docs/animation/index.html @@ -36,8 +36,8 @@ </div>

Bounce

Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<div class="animate-bounce ...">
   <i class="fas fa-arrow-down fa-lg"></i>
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/aspect-ratio/index.html b/docs/aspect-ratio/index.html index 5bec4d5..7dfd113 100644 --- a/docs/aspect-ratio/index.html +++ b/docs/aspect-ratio/index.html @@ -23,8 +23,8 @@ --bs-aspect-ratio: 50%; // 2x1 } } -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/background-color/index.html b/docs/background-color/index.html index 791ee6e..9dc7026 100644 --- a/docs/background-color/index.html +++ b/docs/background-color/index.html @@ -17,8 +17,8 @@ <div class="bg-purple bg-opacity-75"></div> <div class="bg-purple bg-opacity-50"></div> ... -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border-color/index.html b/docs/border-color/index.html index f04800a..4eca751 100644 --- a/docs/border-color/index.html +++ b/docs/border-color/index.html @@ -16,8 +16,8 @@ <div class="border-opacity-75 border border-secondary..."></div> <div class="border-opacity-50 border border-secondary..."></div> <div class="border-opacity-25 border border-secondary..."></div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border-opacity/index.html b/docs/border-opacity/index.html index cb82326..68439c2 100644 --- a/docs/border-opacity/index.html +++ b/docs/border-opacity/index.html @@ -10,8 +10,8 @@ <div class="border-opacity-75 border border-secondary..."></div> <div class="border-opacity-50 border border-secondary..."></div> <div class="border-opacity-25 border border-secondary..."></div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border-radius/index.html b/docs/border-radius/index.html index b09f117..2f3acc4 100644 --- a/docs/border-radius/index.html +++ b/docs/border-radius/index.html @@ -18,8 +18,8 @@ <div class="rounded-end-3 ..."></div> <div class="rounded-bottom-3 ..."></div> <div class="rounded-start-3 ..."></div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border-style/index.html b/docs/border-style/index.html index ccac0d7..c0fb55d 100644 --- a/docs/border-style/index.html +++ b/docs/border-style/index.html @@ -11,8 +11,8 @@ <div class="border border-dotted border-2 border-primary ..."></div> <div class="border border-double border-4 border-primary ..."></div>

No style

Use border-none to remove an existing border style from an element. -This is most commonly used to remove a border style that was applied at a smaller breakpoint.

  <button class="btn btn-outline-primary border-none">Save changes</button>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +This is most commonly used to remove a border style that was applied at a smaller breakpoint.

  <button class="btn btn-outline-primary border-none">Save changes</button>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border-width/index.html b/docs/border-width/index.html index b647652..63acaf1 100644 --- a/docs/border-width/index.html +++ b/docs/border-width/index.html @@ -16,8 +16,8 @@ <div class="border-start border-4 border-secondary ..."></div>

Horizontal and vertical sides

Use the border-{side} and border-{width} utilities to set the border width on two sides of an element at the same time.

<div class="border-top border-bottom border-4 border-secondary ..."></div>
 <div class="border-end border-start border-4 border-secondary ..."></div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/border/index.html b/docs/border/index.html index 1c4420b..8abef65 100644 --- a/docs/border/index.html +++ b/docs/border/index.html @@ -16,8 +16,8 @@ <div class="border border-bottom-0 ..."></div> <div class="border border-start-0 ..."></div>

Remove all border

Use the border-0 to remove an element’s border.

<div class="border border-0 ..."></div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/box-shadow/index.html b/docs/box-shadow/index.html index 73dd6b1..601d327 100644 --- a/docs/box-shadow/index.html +++ b/docs/box-shadow/index.html @@ -11,8 +11,8 @@ <div class="shadow-md ..."></div> <div class="shadow-lg ..."></div>

Removing the shadow

Use shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

shadow-none

<div class="shadow-none ..."></div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/breakpoints/index.html b/docs/breakpoints/index.html index ae0d64b..b843154 100644 --- a/docs/breakpoints/index.html +++ b/docs/breakpoints/index.html @@ -92,8 +92,8 @@

Which results in:

// Example
 // Apply styles starting from medium devices and up to extra large devices
 @media (min-width: 768px) and (max-width: 1199.98px) { ... }
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/clear/index.html b/docs/clear/index.html index 5e9d63a..30c3b17 100644 --- a/docs/clear/index.html +++ b/docs/clear/index.html @@ -21,8 +21,8 @@

Breakpoints

All clear utilities that supports responsive at specific breakpoints, using the following format clear-{breakpoint}-{value} for xs, sm, md, lg, xl, and xxl.

For example, use clear-md-none to apply the clear-none at only medium screen sizes and above.

<p class="clear-left clear-md-none">
   <!-- ... -->
 </p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/clearfix/index.html b/docs/clearfix/index.html index b91fefb..b51b8fe 100644 --- a/docs/clearfix/index.html +++ b/docs/clearfix/index.html @@ -11,8 +11,8 @@ <img class="float-right ..." src="path/to/image.jpg"> </div> <p>Maybe we can live without libraries...</p> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/columns/index.html b/docs/columns/index.html index 640ae8f..68e2494 100644 --- a/docs/columns/index.html +++ b/docs/columns/index.html @@ -207,8 +207,8 @@ <p> And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. </p> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/containers/index.html b/docs/containers/index.html index 68b51e9..3889123 100644 --- a/docs/containers/index.html +++ b/docs/containers/index.html @@ -37,8 +37,8 @@ .custom-container { @include make-container(); } -

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/content/index.html b/docs/content/index.html index 74f1048..e552b36 100644 --- a/docs/content/index.html +++ b/docs/content/index.html @@ -6,8 +6,8 @@

Content

new

Utilities for controlling the content of the before and after pseudo-elements.

Contents

Quick reference

ClassProperties
.content-nonecontent: none;

Basic usage

Remove the ::before and ::after Pseudo-element

Use content-none to disable the ::before and ::after pseudo-elements appear on the child of current element.

The quick brown fox jumps over the lazy dog.
<div class="content-none">The quick brown fox jumps over the lazy dog.</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Content

new

Utilities for controlling the content of the before and after pseudo-elements.

Contents

Quick reference

ClassProperties
.content-nonecontent: none;

Basic usage

Remove the ::before and ::after Pseudo-element

Use content-none to disable the ::before and ::after pseudo-elements appear on the child of current element.

The quick brown fox jumps over the lazy dog.
<div class="content-none">The quick brown fox jumps over the lazy dog.</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/css-grid/index.html b/docs/css-grid/index.html index 581f5f5..8efb613 100644 --- a/docs/css-grid/index.html +++ b/docs/css-grid/index.html @@ -109,8 +109,8 @@ <div class="g-col-6">03</div> <div class="g-col-6">04</div> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/display/index.html b/docs/display/index.html index 948b8fb..59d5a24 100644 --- a/docs/display/index.html +++ b/docs/display/index.html @@ -80,8 +80,8 @@ <div class="p-5 text-bg-purple d-none d-lg-block">hide on screens smaller than lg</div>

Breakpoints

The display utility classes that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The display values can be altered by changing the display values defined in $utilities and recompiling the SCSS.

  • .d-sm-none

  • .d-sm-inline

  • .d-sm-inline-block

  • .d-sm-block

  • .d-sm-grid

  • .d-sm-table

  • .d-sm-table-cell

  • .d-sm-table-row

  • .d-sm-flex

  • .d-sm-inline-flex

  • .d-md-none

  • .d-md-inline

  • .d-md-inline-block

  • .d-md-block

  • .d-md-grid

  • .d-md-table

  • .d-md-table-cell

  • .d-md-table-row

  • .d-md-flex

  • .d-md-inline-flex

  • .d-lg-none

  • .d-lg-inline

  • .d-lg-inline-block

  • .d-lg-block

  • .d-lg-grid

  • .d-lg-table

  • .d-lg-table-cell

  • .d-lg-table-row

  • .d-lg-flex

  • .d-lg-inline-flex

  • .d-xl-none

  • .d-xl-inline

  • .d-xl-inline-block

  • .d-xl-block

  • .d-xl-grid

  • .d-xl-table

  • .d-xl-table-cell

  • .d-xl-table-row

  • .d-xl-flex

  • .d-xl-inline-flex

  • .d-xxl-none

  • .d-xxl-inline

  • .d-xxl-inline-block

  • .d-xxl-block

  • .d-xxl-grid

  • .d-xxl-table

  • .d-xxl-table-cell

  • .d-xxl-table-row

  • .d-xxl-flex

  • .d-xxl-inline-flex

The media queries affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on lg, xl, and xxl screens.

xs=block md=inline-block
xs=block md=inline-block
<div class="d-block d-md-inline-block text-bg-primary p-2">xs=block md=inline-block</div>
 <div class="d-block d-md-inline-block text-bg-dark p-2">xs=block md=inline-block</div>

Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

The print and display classes can be combined.

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="d-print-none">Screen Only (Hide on print only)</div>
 <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
-<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/flex-direction/index.html b/docs/flex-direction/index.html index 1f98392..6a47604 100644 --- a/docs/flex-direction/index.html +++ b/docs/flex-direction/index.html @@ -31,8 +31,8 @@ <div>02</div> <div>03</div> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/flex-grow/index.html b/docs/flex-grow/index.html index d614e88..205427c 100644 --- a/docs/flex-grow/index.html +++ b/docs/flex-grow/index.html @@ -19,8 +19,8 @@

Breakpoints

All flex grow utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-grow-{1|0}.

  • .flex-sm-grow-0
  • .flex-sm-grow-1
  • .flex-md-grow-0
  • .flex-md-grow-1
  • .flex-lg-grow-0
  • .flex-lg-grow-1
  • .flex-xl-grow-0
  • .flex-xl-grow-1
  • .flex-xxl-grow-0
  • .flex-xxl-grow-1

For example, use flex-md-grow-0 to apply the flex-grow-0 utility at only medium screen sizes and above.

<div class="flex-grow flex-md-grow-md-0">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/flex-shrink/index.html b/docs/flex-shrink/index.html index 6458e7e..06806a2 100644 --- a/docs/flex-shrink/index.html +++ b/docs/flex-shrink/index.html @@ -19,8 +19,8 @@

Responsive breakpoints

All flex shrink utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-shrink-{1|0}.

  • .flex-sm-shrink-0
  • .flex-sm-shrink-1
  • .flex-md-shrink-0
  • .flex-md-shrink-1
  • .flex-lg-shrink-0
  • .flex-lg-shrink-1
  • .flex-xl-shrink-0
  • .flex-xl-shrink-1
  • .flex-xxl-shrink-0
  • .flex-xxl-shrink-1

For example, use flex-md-shrink-0 to apply the shrink-0 utility at only medium screen sizes and above.

<div class="flex-shrink flex-md-shrink-0">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/flex-wrap/index.html b/docs/flex-wrap/index.html index 3db0124..cecfab8 100644 --- a/docs/flex-wrap/index.html +++ b/docs/flex-wrap/index.html @@ -24,8 +24,8 @@

Breakpoints

All flex direction utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-{wrap|nowrap|wrap-reverse}.

  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

For example, use flex-md-wrap-reverse to apply the flex-wrap-reverse utility at only medium screen sizes and above.

<div class="d-flex flex-wrap flex-md-wrap-reverse">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/flex/index.html b/docs/flex/index.html index f0dfd47..e86e23b 100644 --- a/docs/flex/index.html +++ b/docs/flex/index.html @@ -14,8 +14,8 @@

Breakpoints

The flex-fill utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-fill.

  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

For example, use flex-md-fill to apply the flex-fill utility at only medium screen sizes and above.

<div class="d-flex flex-md-fill">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/floats/index.html b/docs/floats/index.html index e650714..4f682ec 100644 --- a/docs/floats/index.html +++ b/docs/floats/index.html @@ -19,8 +19,8 @@ <p>Maybe we can live without libraries, people like you and me. ...</p>

Breakpoints and media queries

Responsive variations also exist for each float value.

Here are all the support classes:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none
Float start on viewports sized SM (small) or wider

Float start on viewports sized MD (medium) or wider

Float start on viewports sized LG (large) or wider

Float start on viewports sized XL (extra-large) or wider

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
 <div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
 <div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
-<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/font-family/index.html b/docs/font-family/index.html index cd69326..f69aa66 100644 --- a/docs/font-family/index.html +++ b/docs/font-family/index.html @@ -7,8 +7,8 @@

Font Family

Utilities for controlling the font family of an element.

Contents

Quick reference

ClassProperties
.font-monospacefont-family: SFMono-Medium, SF Mono, Segoe UI Mono, Roboto Mono, Ubuntu Mono, Menlo, Consolas, Courier, monospace;

Basic usage

Monospace

Change a selection to our monospace font stack with .font-monospace.

font-monospace

The quick brown fox jumps over the lazy dog.

<p class="font-monospace">The quick brown fox ...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/font-size/index.html b/docs/font-size/index.html index 1f79445..0d8224e 100644 --- a/docs/font-size/index.html +++ b/docs/font-size/index.html @@ -28,8 +28,8 @@ <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <h1 class="display-5">Display 5</h1> -<h1 class="display-6">Display 6</h1>

Responsive font sizes

In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<h1 class="display-6">Display 6</h1>

Responsive font sizes

In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/font-style/index.html b/docs/font-style/index.html index 771c12c..e30b3df 100644 --- a/docs/font-style/index.html +++ b/docs/font-style/index.html @@ -8,8 +8,8 @@ Get StartedTokensDocsComponents

Font Style

Utilities for controlling the font style of an element.

Contents

Quickly change the font-style of text using the font style utilities.

Quick reference

ClassProperties
.fst-italicfont-style: italic;
.fst-normalfont-style: normal;

Basic usage

Italicizing text

The fst-italic utility can be used to make text italic. Likewise, the fst-normal utility can be used to display text normally — typically to reset italic text at different breakpoints.

fst-italic

The quick brown fox jumps over the lazy dog.

fst-normal

The quick brown fox jumps over the lazy dog.

<p class="fst-italic ...">The quick brown fox ...</p>
 <p class="fst-normal ...">The quick brown fox ...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/font-weight/index.html b/docs/font-weight/index.html index 440f400..6812fb8 100644 --- a/docs/font-weight/index.html +++ b/docs/font-weight/index.html @@ -11,8 +11,8 @@ <p class="fw-semibold ...">The quick brown fox ...</p> <p class="fw-bold ...">The quick brown fox ...</p> <p class="fw-bolder ...">The quick brown fox ...</p> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/gap/index.html b/docs/gap/index.html index 1c8c682..bca8ad8 100644 --- a/docs/gap/index.html +++ b/docs/gap/index.html @@ -28,8 +28,8 @@ <div class="g-col-6 ...">03</div> <div class="g-col-6 ...">04</div> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/grid/index.html b/docs/grid/index.html index 49fd536..b73f81f 100644 --- a/docs/grid/index.html +++ b/docs/grid/index.html @@ -250,8 +250,8 @@ md: 720px, lg: 960px ); -

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/gutters/index.html b/docs/gutters/index.html index 1dc7b23..8e79c9c 100644 --- a/docs/gutters/index.html +++ b/docs/gutters/index.html @@ -79,8 +79,8 @@ <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> -

Breakpoints and media queries

All gutter utilities that supports responsive at specific breakpoints, using the following format g*-{breakpoint}-{*} for xs, sm, md, lg, xl, and xxl.

Here are all the support classes:

  • .g-sm-0
  • .g-sm-1
  • .g-sm-2
  • ……
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Breakpoints and media queries

All gutter utilities that supports responsive at specific breakpoints, using the following format g*-{breakpoint}-{*} for xs, sm, md, lg, xl, and xxl.

Here are all the support classes:

  • .g-sm-0
  • .g-sm-1
  • .g-sm-2
  • ……
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/height/index.html b/docs/height/index.html index f8c9cc8..2641a5c 100644 --- a/docs/height/index.html +++ b/docs/height/index.html @@ -21,8 +21,8 @@ max-height 100% </div> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/index.html b/docs/index.html index 2642bf5..6b3eb86 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,7 +7,7 @@

Docs

Using utility classes to build custom designs without writing CSS.

Utility Classes Quick Reference

Animation

Animationnew

Backgrounds

Background Color

Base-stypes

Reboot

Borders

Border Color
Border Opacity
Border Radius
Border Side
Border Style
Border Width
Vertical Line

Effects

Box Shadow
Opacity

Flexbox

Align Content
Align Items
Align Self
CSS Grid
Flex
Flex Direction
Flex Grow
Flex Shrink
Flex Wrap
Gap
Justify Content
Order

Grid-system

Breakpoints
Columns
Containers
Grid
Gutters

Interactivity

Pointer Events
User Select

Layout

Aspect Ratio
Clearnew
Clearfix
Display
Floats
Hidden
Overflow
Position
Stacks
Visibility
Z-Index

Sizing

Height
Max-Widthnew
Min-Widthnew
Width

Spacing

Margin
Padding

Transforms

Rotatenew

Typography

Contentnew
Font Family
Font Size
Font Style
Font Weight
Letter Spacingnew
Line Height
Text Align
Text Color
Text Decoration
Text Overflow
Text Transform
Vertical Align
Whitespace
Word Break
- + diff --git a/docs/justify-content/index.html b/docs/justify-content/index.html index b7dce24..5217743 100644 --- a/docs/justify-content/index.html +++ b/docs/justify-content/index.html @@ -39,8 +39,8 @@

Breakpoints

All justify-content utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format justify-content-{breakpoint}-{value}.

  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

For example, use justify-content-md-between to apply the justify-content-between utility at only medium screen sizes and above.

<div class="d-flex justify-content-start justify-content-md-between">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/letter-spacing/index.html b/docs/letter-spacing/index.html index c58d4a0..17be0e8 100644 --- a/docs/letter-spacing/index.html +++ b/docs/letter-spacing/index.html @@ -9,8 +9,8 @@

Letter Spacing

new

Utilities for controlling the tracking (letter spacing) of an element.

Contents

Quick reference

ClassProperties
.ls-tighterletter-spacing: -0.05em;
.ls-tightletter-spacing: -0.025em;
.ls-normalletter-spacing: 0em;
.ls-wideletter-spacing: 0.025em;
.ls-widerletter-spacing: 0.05em;
.ls-widestletter-spacing: 0.1em;

Usage

Setting the letter spacing

Control the letter spacing of an element using the ls-{size} utilities.

ls-tight

The quick brown fox jumps over the lazy dog.

ls-normal

The quick brown fox jumps over the lazy dog.

ls-wide

The quick brown fox jumps over the lazy dog.

<p class="ls-tight ...">The quick brown fox ...</p>
 <p class="ls-normal ...">The quick brown fox ...</p>
 <p class="ls-wide ...">The quick brown fox ...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/line-height/index.html b/docs/line-height/index.html index e906e21..ee48649 100644 --- a/docs/line-height/index.html +++ b/docs/line-height/index.html @@ -12,8 +12,8 @@ kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="lh-1 ...">So I started to walk into the water...</p>
 <p class="lh-base ...">So I started to walk into the water...</p>
 <p class="lh-lg ...">So I started to walk into the water...</p>
-

Fixed line-heights

Developing

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Fixed line-heights

Developing

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/margin/index.html b/docs/margin/index.html index c013459..e3940ae 100644 --- a/docs/margin/index.html +++ b/docs/margin/index.html @@ -24,8 +24,8 @@

Using negative values

In CSS, margin properties can utilize negative values (padding cannot). These negative margins are enabled by default in FastBootstrap, but can be disabled in Sass by setting $enable-negative-margins: false.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size by the format {property}{sides}-n{size}.

mt-n5
<div class="bd-w-36 bd-h-16 ..."></div>
 <div class="mt-n5">mt-n5</div>

Breakpoints and media queries

All margin utilities that supports responsive at specific breakpoints, using the following format {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, xl, and xxl.

For example, use my-md-4 to apply the my-4 utility at only medium screen sizes and above, my-3 for xs by default.

my-3 my-md-4 my-lg-6
<div class="my-3 my-md-4 my-lg-6 ...">my-3 my-md-4 my-lg-6</div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/max-width/index.html b/docs/max-width/index.html index 73f7e68..9b7da3f 100644 --- a/docs/max-width/index.html +++ b/docs/max-width/index.html @@ -10,8 +10,8 @@ ... </div>

Constraining to your breakpoints

The max-w-screen-{breakpoint} classes can be used to give an element a max-width matching a specific breakpoint. -These values are automatically derived from the SASS variable $container-max-widths. See Breakpoints section.

.max-w-xs
.max-w-screen-sm
.max-w-screen-md
.max-w-screen-lg
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +These values are automatically derived from the SASS variable $container-max-widths. See Breakpoints section.

.max-w-xs
.max-w-screen-sm
.max-w-screen-md
.max-w-screen-lg
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/min-width/index.html b/docs/min-width/index.html index d832edd..6eaaa03 100644 --- a/docs/min-width/index.html +++ b/docs/min-width/index.html @@ -8,8 +8,8 @@ Get StartedTokensDocsComponents

Min-Width

new

Utilities for setting the minium width of an element.

Contents

Quick reference

ClassProperties
.min-w-0min-width: 0px;
.min-w-fullmin-width: 100%;
.min-w-minmin-width: min-content;
.min-w-maxmin-width: max-content;
.min-w-fitmin-width: fit-content;

Basic usage

​

Setting the minimum width

Set the minimum width of an element using the min-w-{width} utilities.

<div class="min-w-full">
 ...
-</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/opacity/index.html b/docs/opacity/index.html index b362be0..0639c9f 100644 --- a/docs/opacity/index.html +++ b/docs/opacity/index.html @@ -10,8 +10,8 @@ <div class="opacity-75">...</div> <div class="opacity-50">...</div> <div class="opacity-25">...</div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/order/index.html b/docs/order/index.html index 9107672..d9ee338 100644 --- a/docs/order/index.html +++ b/docs/order/index.html @@ -19,8 +19,8 @@

Breakpoints

All flex direction utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format order-{breakpoint}-{order}.

  • .order-sm-first
  • .order-sm-last
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-first
  • .order-md-last
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-first
  • .order-lg-last
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-first
  • .order-xl-last
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12
  • .order-xxl-first
  • .order-xxl-last
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5
  • .order-xxl-6
  • .order-xxl-7
  • .order-xxl-8
  • .order-xxl-9
  • .order-xxl-10
  • .order-xxl-11
  • .order-xxl-12

For example, use order-md-last to apply the order-last utility at only medium screen sizes and above.

<div class="order-first md:order-last">
   <!-- ... -->
 </div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/overflow/index.html b/docs/overflow/index.html index e495b97..92b4bec 100644 --- a/docs/overflow/index.html +++ b/docs/overflow/index.html @@ -12,8 +12,8 @@

Scrolling in all directions

Use overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them.

This is an example of using .overflow-scroll on an element with set width and height dimensions.
<div class="overflow-scroll">...</div>

Scrolling horizontally if needed

Use overflow-x-auto to allow horizontal scrolling if needed.

This is an example of using .overflow-x-auto on an element with set width and height dimensions.
<div class="overflow-x-auto">...</div>

Scrolling vertically if needed

Use overflow-y-auto to allow vertical scrolling if needed.

This is an example of using .overflow-y-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
<div class="overflow-y-auto">...</div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/padding/index.html b/docs/padding/index.html index 792c2fc..d07e54e 100644 --- a/docs/padding/index.html +++ b/docs/padding/index.html @@ -14,8 +14,8 @@

Add vertical padding

Control the vertical padding of an element using the py-{size} utilities.

py-6
<div class="py-6 ...">py-6</div>

Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

p-5
<div class="p-5 ...">p-5</div>

Breakpoints

All padding utilities that supports responsive at specific breakpoints, using the following format {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, xl, and xxl.

For example, use py-md-5 to apply the py-5 utility at only medium screen sizes and above.

py-sm-3 py-md-5
<div class="py-sm-3 py-md-5 ...">py-sm-3 py-md-5</div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/pointer-events/index.html b/docs/pointer-events/index.html index baf17cc..bfaecfa 100644 --- a/docs/pointer-events/index.html +++ b/docs/pointer-events/index.html @@ -8,8 +8,8 @@ Get StartedTokensDocsComponents

Pointer Events

Utilities for controlling whether an element responds to pointer events.

Contents

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

Quick reference

ClassProperties
.pe-nonepointer-events: none;
.pe-autopointer-events: auto;

The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.

If possible, the simpler solution is:

  • For form controls, add the disabled HTML attribute.
  • For links, remove the href attribute, making it a non-interactive anchor or placeholder link.

Basic usage

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
 <p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
-<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/position/index.html b/docs/position/index.html index 06b5917..e835752 100644 --- a/docs/position/index.html +++ b/docs/position/index.html @@ -60,8 +60,8 @@ <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button> <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button> <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/reboot/index.html b/docs/reboot/index.html index f4d72e6..ad09aa2 100644 --- a/docs/reboot/index.html +++ b/docs/reboot/index.html @@ -94,8 +94,8 @@ <summary>Even more details</summary> <p>Here are even more details about the details.</p> </details>

HTML5 [hidden] attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden.

<input type="text" hidden>
-

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/rotate/index.html b/docs/rotate/index.html index 95c9f00..9694290 100644 --- a/docs/rotate/index.html +++ b/docs/rotate/index.html @@ -11,8 +11,8 @@ <img class="rotate-90 ..."> <img class="rotate-180 ...">

Using negative values

To use a negative rotate value, the rotate class with the addition of - before the rotate class.

<img class="-rotate-45 ...">
-

Removing transforms

To remove all of the transforms on an element at once, use the transform-none utility.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Removing transforms

To remove all of the transforms on an element at once, use the transform-none utility.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/stacks/index.html b/docs/stacks/index.html index 703d3d3..5088ac8 100644 --- a/docs/stacks/index.html +++ b/docs/stacks/index.html @@ -38,8 +38,8 @@ <input class="form-control me-auto" type="text" placeholder="Add your item here..." /> <button type="button" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-default">Reset</button> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/text-align/index.html b/docs/text-align/index.html index 8880d71..284d821 100644 --- a/docs/text-align/index.html +++ b/docs/text-align/index.html @@ -18,8 +18,8 @@ kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-start text-md-center">
   So I started to walk into the water ...
 </p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/text-color/index.html b/docs/text-color/index.html index 35730d6..a27484a 100644 --- a/docs/text-color/index.html +++ b/docs/text-color/index.html @@ -15,8 +15,8 @@

Reset color

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

The quick brown fox jumps over The lazy dog.

<p class="text-secondary">The quick brown fox jumps over
   <a href="#" class="text-reset">The lazy dog</a>
 </p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/text-decoration/index.html b/docs/text-decoration/index.html index 1fa0266..e30fc9e 100644 --- a/docs/text-decoration/index.html +++ b/docs/text-decoration/index.html @@ -10,8 +10,8 @@ <p class="text-decoration-line-through ...">The quick brown fox ...</p> <p class="text-decoration-overline ...">The quick brown fox ...</p> <p class="text-decoration-none ...">The quick brown fox ...</p> -

Remove the link underline when mouse on <a> element using text-decoration-none.

This link has its text decoration removed
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Remove the link underline when mouse on <a> element using text-decoration-none.

This link has its text decoration removed
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/text-overflow/index.html b/docs/text-overflow/index.html index 455e559..865ff5d 100644 --- a/docs/text-overflow/index.html +++ b/docs/text-overflow/index.html @@ -13,8 +13,8 @@

Clip

Use text-clip to truncate the text at the limit of the content area.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="text-clip overflow-hidden ...">...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/text-transform/index.html b/docs/text-transform/index.html index 6baf677..265b910 100644 --- a/docs/text-transform/index.html +++ b/docs/text-transform/index.html @@ -9,8 +9,8 @@

Text Transform

Utilities for controlling the transformation of text.

Contents

Transform text in components with text capitalization classes.

ClassProperties
.text-lowercasetext-transform: lowercase;
.text-uppercasetext-transform: uppercase;
.text-capitalizetext-transform: capitalize;

Basic usage

Transforming text

The text-uppercase and text-lowercase will uppercase and lowercase text respectively, whereas text-capitalize utility will convert text to title-case.

text-uppercase

The quick brown fox jumps over the lazy dog.

text-lowercase

The quick brown fox jumps over the lazy dog.

text-capitalize

The quick brown fox jumps over the lazy dog.

<p class="text-uppercase ...">...</p>
 <p class="text-lowercase ...">...</p>
 <p class="text-capitalize ...">...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/user-select/index.html b/docs/user-select/index.html index 98bda69..13e2651 100644 --- a/docs/user-select/index.html +++ b/docs/user-select/index.html @@ -6,8 +6,8 @@

User Select

Utilities for controlling whether the user can select text in an element.

Contents

Change the way in which the content is selected when the user interacts with it.

Quick reference

ClassProperties
.user-select-alluser-select: all;
.user-select-autouser-select: auto;
.user-select-noneuser-select: none;

Basic usage

Disabling text selection

Use user-select-none to prevent selecting text in an element and its children.

The quick brown fox jumps over the lazy dog.
<div class="user-select-none fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Selecting all text in one click

Use user-select-all to automatically select all the text in an element when a user clicks.

The quick brown fox jumps over the lazy dog.
<div class="user-select-all fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Using auto select behaviour

Use user-select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .user-select-none at different breakpoints.

The quick brown fox jumps over the lazy dog.
<div class="user-select-auto fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

User Select

Utilities for controlling whether the user can select text in an element.

Contents

Change the way in which the content is selected when the user interacts with it.

Quick reference

ClassProperties
.user-select-alluser-select: all;
.user-select-autouser-select: auto;
.user-select-noneuser-select: none;

Basic usage

Disabling text selection

Use user-select-none to prevent selecting text in an element and its children.

The quick brown fox jumps over the lazy dog.
<div class="user-select-none fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Selecting all text in one click

Use user-select-all to automatically select all the text in an element when a user clicks.

The quick brown fox jumps over the lazy dog.
<div class="user-select-all fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Using auto select behaviour

Use user-select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .user-select-none at different breakpoints.

The quick brown fox jumps over the lazy dog.
<div class="user-select-auto fw-semibold">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/vertical-align/index.html b/docs/vertical-align/index.html index e562b40..78a68ed 100644 --- a/docs/vertical-align/index.html +++ b/docs/vertical-align/index.html @@ -24,8 +24,8 @@

Text Bottom

Use align-text-bottom to align the bottom of an element with the bottom of the parent element’s font.

The quick brown fox jumps over the lazy dog.
<span class="inline-block align-text-bottom ...">...</span>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/vertical-rule/index.html b/docs/vertical-rule/index.html index 48c45a2..cf8cd6b 100644 --- a/docs/vertical-rule/index.html +++ b/docs/vertical-rule/index.html @@ -26,8 +26,8 @@ <div class="text-bg-purple rounded p-4 lh-1 fs-sm ms-auto">Second item</div> <div class="vr"></div> <div class="text-bg-purple rounded p-4 lh-1 fs-sm">Third item</div> -</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/visibility/index.html b/docs/visibility/index.html index 85f001f..3cdad99 100644 --- a/docs/visibility/index.html +++ b/docs/visibility/index.html @@ -16,8 +16,8 @@ <div class="visible">02</div> <div>03</div> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/visually-hidden/index.html b/docs/visually-hidden/index.html index 990f29b..48dbde1 100644 --- a/docs/visually-hidden/index.html +++ b/docs/visually-hidden/index.html @@ -7,8 +7,8 @@

Hidden

Use these helpers to visually hide elements but keep them accessible to assistive technologies.

Contents

Quick reference

ClassProperties
.visually-hidden-
.visually-hidden-focusable-

Both visually-hidden and visually-hidden-focusable can also be used as mixins.

Basic usage

.visually-hidden

Use visually-hidden to hide an element, but while still allowing it to be exposed to assistive technologies (such as screen readers)

<h2 class="visually-hidden">Title for screen readers</h2>

.visually-hidden-focusable

Use .visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user).

.visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

Skip to main content
A container with a focusable element.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
-<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/whitespace/index.html b/docs/whitespace/index.html index ee1d844..fe2fce8 100644 --- a/docs/whitespace/index.html +++ b/docs/whitespace/index.html @@ -14,8 +14,8 @@ <!-- max-w-sm : 384px --> <p class="text-nowrap">Hey everyone! It's almost 2022 and we ...</p> </div> -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/width/index.html b/docs/width/index.html index d0c621c..3424aba 100644 --- a/docs/width/index.html +++ b/docs/width/index.html @@ -14,8 +14,8 @@ <div class="w-auto ...">w-auto</div>

Full viewport width

Use vw-100 to make an element span the entire width of the viewport.

<div class="vw-100 ..."></div>

Set mx width

Use mh-100 to set the maximum height of an element that is full, depending on the parent element.

<div class="mh-100 ..."></div>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/word-break/index.html b/docs/word-break/index.html index c728189..fd8a79b 100644 --- a/docs/word-break/index.html +++ b/docs/word-break/index.html @@ -10,8 +10,8 @@ inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="break-normal ...">...</p>

Break Words

Use text-break to add line breaks mid-word if needed.

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="text-break ...">...</p>
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/docs/z-index/index.html b/docs/z-index/index.html index 5d30652..4e8b722 100644 --- a/docs/z-index/index.html +++ b/docs/z-index/index.html @@ -21,8 +21,8 @@ $zindex-popover: 1070; $zindex-tooltip: 1080; $zindex-toast: 1090; -

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/get-started/color/index.html b/get-started/color/index.html index eec12e8..c98103e 100644 --- a/get-started/color/index.html +++ b/get-started/color/index.html @@ -6,8 +6,8 @@

Color System

Our color system is based on a Atlassian design color foundation that designed for our components and element styles.

Contents

Bootstrap theme there are have 6 main color scheme include primary, success, danger, warning and info, these color scheme also available on our color system.

For most components and element styles, colors are applied using Atlassian design’s design tokens.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes.

DescriptionLight valueDark value
Text

The default text color of body.

background

The default background color of body.

Secondary

Used for lighter text color or background.

Tertiary

Used for even lighter text or background.

Primary

Main theme color, used for primary actions or focus styles, and component and form active states.

-
Success

Theme color, used for positive or successful actions and information.

-
Danger

Theme color, used for errors and dangerous actions.

-
Warning

Theme color, used for non-destructive warning messages.

-
Info

Theme color, used for informative content or something in progress.

-
Light

Additional theme option for less contrasting colors.

-
Dark

Additional theme option for higher contrasting colors.

-

Color palette

Lime

  • Lime100
  • Lime200
  • Lime300
  • Lime400
  • Lime500
  • Lime600
  • Lime700
  • Lime800
  • Lime900
  • Lime1000

Red

  • Red100
  • Red200
  • Red300
  • Red400
  • Red500
  • Red600
  • Red700
  • Red800
  • Red900
  • Red1000

Orange

  • Orange100
  • Orange200
  • Orange300
  • Orange400
  • Orange500
  • Orange600
  • Orange700
  • Orange800
  • Orange900
  • Orange1000

Yellow

  • Yellow100
  • Yellow200
  • Yellow300
  • Yellow400
  • Yellow500
  • Yellow600
  • Yellow700
  • Yellow800
  • Yellow900
  • Yellow1000

Green

  • Green100
  • Green200
  • Green300
  • Green400
  • Green500
  • Green600
  • Green700
  • Green800
  • Green900
  • Green1000

Teal

  • Teal100
  • Teal200
  • Teal300
  • Teal400
  • Teal500
  • Teal600
  • Teal700
  • Teal800
  • Teal900
  • Teal1000

Blue

  • Blue100
  • Blue200
  • Blue300
  • Blue400
  • Blue500
  • Blue600
  • Blue700
  • Blue800
  • Blue900
  • Blue1000

Purple

  • Purple100
  • Purple200
  • Purple300
  • Purple400
  • Purple500
  • Purple600
  • Purple700
  • Purple800
  • Purple900
  • Purple1000

Magenta

  • Magenta100
  • Magenta200
  • Magenta300
  • Magenta400
  • Magenta500
  • Magenta600
  • Magenta700
  • Magenta800
  • Magenta900
  • Magenta1000

Light mode neutrals

Solid

  • Neutral0
  • Neutral100
  • Neutral200
  • Neutral300
  • Neutral400
  • Neutral500
  • Neutral600
  • Neutral700
  • Neutral800
  • Neutral900
  • Neutral1000
  • Neutral1100

Alpha

  • Neutral100A
  • Neutral200A
  • Neutral300A
  • Neutral400A
  • Neutral500A

Dark mode neutrals

Solid

  • DarkNeutral-100
  • DarkNeutral0
  • DarkNeutral100
  • DarkNeutral200
  • DarkNeutral250
  • DarkNeutral300
  • DarkNeutral400
  • DarkNeutral500
  • DarkNeutral600
  • DarkNeutral700
  • DarkNeutral800
  • DarkNeutral900
  • DarkNeutral1000
  • DarkNeutral1100

Alpha

  • DarkNeutral-100A
  • DarkNeutral100A
  • DarkNeutral200A
  • DarkNeutral250A
  • DarkNeutral300A
  • DarkNeutral350A
  • DarkNeutral400A
  • DarkNeutral500A
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Color System

Our color system is based on a Atlassian design color foundation that designed for our components and element styles.

Contents

Bootstrap theme there are have 6 main color scheme include primary, success, danger, warning and info, these color scheme also available on our color system.

For most components and element styles, colors are applied using Atlassian design’s design tokens.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes.

DescriptionLight valueDark value
Text

The default text color of body.

background

The default background color of body.

Secondary

Used for lighter text color or background.

Tertiary

Used for even lighter text or background.

Primary

Main theme color, used for primary actions or focus styles, and component and form active states.

-
Success

Theme color, used for positive or successful actions and information.

-
Danger

Theme color, used for errors and dangerous actions.

-
Warning

Theme color, used for non-destructive warning messages.

-
Info

Theme color, used for informative content or something in progress.

-
Light

Additional theme option for less contrasting colors.

-
Dark

Additional theme option for higher contrasting colors.

-

Color palette

Lime

  • Lime100
  • Lime200
  • Lime300
  • Lime400
  • Lime500
  • Lime600
  • Lime700
  • Lime800
  • Lime900
  • Lime1000

Red

  • Red100
  • Red200
  • Red300
  • Red400
  • Red500
  • Red600
  • Red700
  • Red800
  • Red900
  • Red1000

Orange

  • Orange100
  • Orange200
  • Orange300
  • Orange400
  • Orange500
  • Orange600
  • Orange700
  • Orange800
  • Orange900
  • Orange1000

Yellow

  • Yellow100
  • Yellow200
  • Yellow300
  • Yellow400
  • Yellow500
  • Yellow600
  • Yellow700
  • Yellow800
  • Yellow900
  • Yellow1000

Green

  • Green100
  • Green200
  • Green300
  • Green400
  • Green500
  • Green600
  • Green700
  • Green800
  • Green900
  • Green1000

Teal

  • Teal100
  • Teal200
  • Teal300
  • Teal400
  • Teal500
  • Teal600
  • Teal700
  • Teal800
  • Teal900
  • Teal1000

Blue

  • Blue100
  • Blue200
  • Blue300
  • Blue400
  • Blue500
  • Blue600
  • Blue700
  • Blue800
  • Blue900
  • Blue1000

Purple

  • Purple100
  • Purple200
  • Purple300
  • Purple400
  • Purple500
  • Purple600
  • Purple700
  • Purple800
  • Purple900
  • Purple1000

Magenta

  • Magenta100
  • Magenta200
  • Magenta300
  • Magenta400
  • Magenta500
  • Magenta600
  • Magenta700
  • Magenta800
  • Magenta900
  • Magenta1000

Light mode neutrals

Solid

  • Neutral0
  • Neutral100
  • Neutral200
  • Neutral300
  • Neutral400
  • Neutral500
  • Neutral600
  • Neutral700
  • Neutral800
  • Neutral900
  • Neutral1000
  • Neutral1100

Alpha

  • Neutral100A
  • Neutral200A
  • Neutral300A
  • Neutral400A
  • Neutral500A

Dark mode neutrals

Solid

  • DarkNeutral-100
  • DarkNeutral0
  • DarkNeutral100
  • DarkNeutral200
  • DarkNeutral250
  • DarkNeutral300
  • DarkNeutral400
  • DarkNeutral500
  • DarkNeutral600
  • DarkNeutral700
  • DarkNeutral800
  • DarkNeutral900
  • DarkNeutral1000
  • DarkNeutral1100

Alpha

  • DarkNeutral-100A
  • DarkNeutral100A
  • DarkNeutral200A
  • DarkNeutral250A
  • DarkNeutral300A
  • DarkNeutral350A
  • DarkNeutral400A
  • DarkNeutral500A
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/get-started/dark-mode/index.html b/get-started/dark-mode/index.html index 90e185b..de70363 100644 --- a/get-started/dark-mode/index.html +++ b/get-started/dark-mode/index.html @@ -104,8 +104,8 @@ }) }) })() -
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/get-started/index.html b/get-started/index.html index 2b34b06..cfb5ed7 100644 --- a/get-started/index.html +++ b/get-started/index.html @@ -7,7 +7,7 @@

Get started

FastBootstrap is a beautiful designed Bootstrap theme with Atlassian design, start in a minute.

Installation

Download the compiled CSS and JS, all source code.

Quick Start

Get started with FastBootstrap in no time.

Dark Modebeta

Using our new dark mode on your site.

What's New

Overview of our new Bootstrap theme, what's different from Bootstrap.

Color System

Our color system is based on a Atlassian design color foundation that designed for our components and element styles.

- + diff --git a/get-started/installation/index.html b/get-started/installation/index.html index e34761f..8bd97c0 100644 --- a/get-started/installation/index.html +++ b/get-started/installation/index.html @@ -9,8 +9,8 @@

Installation

Download the compiled CSS and JS, all source code.

Contents

Download FastBootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm and more.

Compiled CSS and JS

Download ready-to-use compiled code for FastBootstrap v2.0.2 to easily drop into your project, which includes:

  • Compiled and minified CSS bundles
  • Compiled and minified JavaScript plugins

Download

CDN via jsDelivr

We recommend using jsDelivr to deliver cached version of FastBootstrap’s compiled CSS and JS to your project.

CSS file

Place this tag in your head.

<link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-ywOwZUVHXdYvx4hw3+x4KBDt8Fb8cks0iorq4Tzeshg=" crossorigin="anonymous">

JS file

Place this tag in your head or just before your close body tag.

<script src="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/js/fastbootstrap.min.js" integrity="sha256-o0tNXN7ia0O9G0qNbrzBkEEiQTv+GeW5EO4LjnfDkZk=" crossorigin="anonymous"></script>

Source files

All source code files are on github.

Package managers

npm

Install with the npm package:

npm install fastbootstrap
-
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/get-started/quick-start/index.html b/get-started/quick-start/index.html index c159662..19fce1b 100644 --- a/get-started/quick-start/index.html +++ b/get-started/quick-start/index.html @@ -35,8 +35,8 @@ ... </html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">
-

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/get-started/what-is-new/index.html b/get-started/what-is-new/index.html index c8e9581..7be8131 100644 --- a/get-started/what-is-new/index.html +++ b/get-started/what-is-new/index.html @@ -6,8 +6,8 @@

What’s New

Overview of our new Bootstrap theme, what’s different from Bootstrap.

Contents

FastBootstrap as Bootstram theme project, crafted designed new beautifully UI components and element styles for Bootstrap based on Atlassian design system language, thanks to Atlassian design.

What’s different from Bootstrap

FastBootstrap is completely built on top of Bootstrap, You can use it as a theme to replace Bootstrap, or as a standard UI component library, which is 100% compatible with Bootstrap.

Versions & Bootstrap

FastBootstrapBootstrap version
2.05.3
1.15.2

Download

CSS files

FastBootstrap includes compiled CSS including all components and utility CSS with some of options enabled by default.

Compiled options:

OptionsBootstrapFastBootstrap
$enable-shadowsEnabled-
$enable-negative-margins-Enabled

CSS files

CSS filesLayoutContentComponentsUtilities
fastbootstrap.css
fastbootstrap.min.css		IncludedIncludedIncludedIncluded

JS files

FastBootstrap includes compiled JavaScript of all components and third-party JS library. This is not required, you can still continue using Bootstrap JS files likes bootstrap.bundle.min.js.

JS FilesPopper
fastbootstrap.js
fastbootstrap.min.js		Included

How to migrate from Bootstrap

It’s very simple. You just use the fastbootstrap.min.css file instead of bootstrap.min.css on your website.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

What’s New

Overview of our new Bootstrap theme, what’s different from Bootstrap.

Contents

FastBootstrap as Bootstram theme project, crafted designed new beautifully UI components and element styles for Bootstrap based on Atlassian design system language, thanks to Atlassian design.

What’s different from Bootstrap

FastBootstrap is completely built on top of Bootstrap, You can use it as a theme to replace Bootstrap, or as a standard UI component library, which is 100% compatible with Bootstrap.

Versions & Bootstrap

FastBootstrapBootstrap version
2.05.3
1.15.2

Download

CSS files

FastBootstrap includes compiled CSS including all components and utility CSS with some of options enabled by default.

Compiled options:

OptionsBootstrapFastBootstrap
$enable-shadowsEnabled-
$enable-negative-margins-Enabled

CSS files

CSS filesLayoutContentComponentsUtilities
fastbootstrap.css
fastbootstrap.min.css		IncludedIncludedIncludedIncluded

JS files

FastBootstrap includes compiled JavaScript of all components and third-party JS library. This is not required, you can still continue using Bootstrap JS files likes bootstrap.bundle.min.js.

JS FilesPopper
fastbootstrap.js
fastbootstrap.min.js		Included

How to migrate from Bootstrap

It’s very simple. You just use the fastbootstrap.min.css file instead of bootstrap.min.css on your website.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/index.html b/index.html index c0e1402..b27d09b 100644 --- a/index.html +++ b/index.html @@ -9,28 +9,51 @@

Awesome Bootstrap Theme Designed with Atlassian Design

A Beautiful Free Bootstrap theme with fully responsive, powerful CSS utilities, expertly crafted components with Atlassian Design. The perfect starting point for your next project.

Get started
Currently v2.0.2 -Star

Get started any way you want

Use the CDN, install source files via package manager, or download the source code to get started.

Read installation docs

Install via package manager

Install FastBootstrap’s source Sass and JavaScript files via npm, RubyGems.

NPM

$ npm install fastbootstrap

or download the souce code

Download the latest version

Include via CDN

When you only need to include FastBootstrap’s compiled CSS or JS, you can use jsDelivr.

CSS

<link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-ywOwZUVHXdYvx4hw3+x4KBDt8Fb8cks0iorq4Tzeshg=" crossorigin="anonymous">

JS

<script src="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/js/fastbootstrap.min.js" integrity="sha256-o0tNXN7ia0O9G0qNbrzBkEEiQTv+GeW5EO4LjnfDkZk=" crossorigin="anonymous"></script>

Improving components for dark mode

Components meets dark mode

Improving our components for dark mode. In the dark mode, our designed components has its own unique color and style. Learn dark mode

Check out this library! -
Tooltip -5K
- - - - - - -
-
4 of 6

  • John Doe

    @hotmail

  • Alex Ray

    @gmail

  • Kate Hunington

    @example

  • View All
Check out this library! -
Tooltip -5K
- - - - - - -
-
4 of 6

  • John Doe

    @hotmail

  • Alex Ray

    @gmail

  • Kate Hunington

    @example

  • View All
CSS Utilities
U

CSS Utilities

Utilities provide the building any design for layout or componsed that help us avoid writing custom styles, much simpler than Bootstrap.

Explore our CSS utilities
Components
C

Components

Beautiful components that craft designed with Atlassian Design, make it easy to start for your next project. All components supports dark mode.

Explore our components
- +Star

Get started any way you want

Use the CDN, install source files via package manager, or download the source code to get started.

Read installation docs

Install via package manager

Install FastBootstrap’s source Sass and JavaScript files via npm, RubyGems.

NPM

$ npm install fastbootstrap

or download the souce code

Download the latest version

Include via CDN

When you only need to include FastBootstrap’s compiled CSS or JS, you can use jsDelivr.

CSS

<link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-ywOwZUVHXdYvx4hw3+x4KBDt8Fb8cks0iorq4Tzeshg=" crossorigin="anonymous">

JS

<script src="https://cdn.jsdelivr.net/npm/fastbootstrap@2.0.2/dist/js/fastbootstrap.min.js" integrity="sha256-o0tNXN7ia0O9G0qNbrzBkEEiQTv+GeW5EO4LjnfDkZk=" crossorigin="anonymous"></script>

Beautiful Components ready for

Dark and Light Mode

+ + +
+Check out this library! +
+$
+ + + + + + +
+ + + + + + +
+
+ +
Tooltip
4 of 6
+
+
+
+
Invalid.
Valid!
+ +

  • John Doe

    @johndoe

  • Alex Ray

    @alexray

  • Kate Hunington

    @katehunington

  • +6 + + + + +
CSS +Javascript +Typescript +5K
Cannot connect to the database.

Contemplative Reptile

+ + +
2:17 + +4:06
CSS Utilities
U

CSS Utilities

Utilities provide the building any design for layout or componsed that help us avoid writing custom styles, much simpler than Bootstrap.

Explore our CSS utilities
Components
C

Components

Beautiful components that craft designed with Atlassian Design, make it easy to start for your next project. All components supports dark mode.

Explore our components
+ diff --git a/sitemap.xml b/sitemap.xml index 46c6e8f..e35823d 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://fastbootstrap.com/tokens/color/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/installation/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/quick-start/2023-11-24T16:33:05+08:00https://fastbootstrap.com/tokens/shadow/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/dark-mode/2023-11-24T16:33:05+08:00https://fastbootstrap.com/tokens/space/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/what-is-new/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/accordion/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/alerts/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/align-content/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/align-items/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/align-self/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/animation/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/aspect-ratio/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/avatar/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/avatar-group/2023-11-24T16:33:05+08:00https://fastbootstrap.com/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/background-color/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/badge/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/blankslates/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border-color/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border-opacity/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border-radius/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border-style/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/border-width/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/box-shadow/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/breadcrumb/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/breakpoints/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/button/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/button-group/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/card/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/carousel/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/checkbox/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/clear/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/clearfix/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/close-button/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/collapse/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/color/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/columns/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/containers/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/content/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/css-grid/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/display/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/dropdown/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/figures/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/flex/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/flex-direction/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/flex-grow/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/flex-shrink/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/flex-wrap/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/floating-label/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/floats/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/focus-ring/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/font-family/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/font-size/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/font-style/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/font-weight/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/form/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/gap/2023-11-24T16:33:05+08:00https://fastbootstrap.com/get-started/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/grid/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/gutters/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/height/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/visually-hidden/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/icon-link/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/images/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/input-group/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/justify-content/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/layout/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/letter-spacing/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/line-height/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/link/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/list-group/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/margin/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/max-width/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/min-width/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/modal/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/navbar/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/offcanvas/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/opacity/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/order/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/overflow/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/padding/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/pagination/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/pills/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/placeholders/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/pointer-events/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/popover/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/position/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/progress-bar/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/radio/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/range/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/reboot/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/rotate/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/scrollspy/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/select/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/spinner/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/stacks/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/stretched-link/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/switch/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/table/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/tabs/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/text-align/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/text-color/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/text-decoration/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/textfield/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/text-overflow/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/text-transform/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/toast/2023-11-24T16:33:05+08:00https://fastbootstrap.com/tokens/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/tooltip/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/user-select/2023-11-24T16:33:05+08:00https://fastbootstrap.com/components/validation/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/vertical-align/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/vertical-rule/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/visibility/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/whitespace/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/width/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/word-break/2023-11-24T16:33:05+08:00https://fastbootstrap.com/docs/z-index/2023-11-24T16:33:05+08:00 \ No newline at end of file +https://fastbootstrap.com/tokens/color/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/installation/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/quick-start/2023-11-30T20:40:39+08:00https://fastbootstrap.com/tokens/shadow/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/dark-mode/2023-11-30T20:40:39+08:00https://fastbootstrap.com/tokens/space/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/what-is-new/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/accordion/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/alerts/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/align-content/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/align-items/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/align-self/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/animation/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/aspect-ratio/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/avatar/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/avatar-group/2023-11-30T20:40:39+08:00https://fastbootstrap.com/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/background-color/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/badge/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/blankslates/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border-color/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border-opacity/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border-radius/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border-style/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/border-width/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/box-shadow/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/breadcrumb/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/breakpoints/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/button/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/button-group/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/card/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/carousel/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/checkbox/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/clear/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/clearfix/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/close-button/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/collapse/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/color/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/columns/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/containers/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/content/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/css-grid/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/display/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/dropdown/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/figures/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/flex/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/flex-direction/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/flex-grow/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/flex-shrink/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/flex-wrap/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/floating-label/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/floats/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/focus-ring/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/font-family/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/font-size/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/font-style/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/font-weight/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/form/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/gap/2023-11-30T20:40:39+08:00https://fastbootstrap.com/get-started/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/grid/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/gutters/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/height/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/visually-hidden/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/icon-link/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/images/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/input-group/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/justify-content/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/layout/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/letter-spacing/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/line-height/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/link/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/list-group/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/margin/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/max-width/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/min-width/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/modal/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/navbar/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/offcanvas/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/opacity/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/order/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/overflow/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/padding/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/pagination/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/pills/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/placeholders/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/pointer-events/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/popover/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/position/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/progress-bar/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/radio/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/range/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/reboot/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/rotate/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/scrollspy/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/select/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/spinner/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/stacks/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/stretched-link/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/switch/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/table/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/tabs/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/text-align/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/text-color/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/text-decoration/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/textfield/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/text-overflow/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/text-transform/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/toast/2023-11-30T20:40:39+08:00https://fastbootstrap.com/tokens/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/tooltip/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/user-select/2023-11-30T20:40:39+08:00https://fastbootstrap.com/components/validation/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/vertical-align/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/vertical-rule/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/visibility/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/whitespace/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/width/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/word-break/2023-11-30T20:40:39+08:00https://fastbootstrap.com/docs/z-index/2023-11-30T20:40:39+08:00 \ No newline at end of file diff --git a/tokens/color/index.html b/tokens/color/index.html index bd00bf4..9e010ae 100644 --- a/tokens/color/index.html +++ b/tokens/color/index.html @@ -6,8 +6,8 @@

Color tokens

new

Color tokens use for the text, background, icon, border and link of elements.

Contents
Token and descriptionLight valueDark value
--ds-link
--ds-link-pressed

Use for links in a default or hovered state. Add an underline for hovered states.

--ds-link-visited

Use for links in a visited state.

Text tokens

Token and descriptionLight valueDark value
--ds-text

Use for primary text, such as body copy, sentence case headers, and buttons.

--ds-text-accent-lime

Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the

--ds-text-accent-lime-bolder

Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the

--ds-text-accent-red

Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the

--ds-text-accent-red-bolder

Use for red text on subtle red accent backgrounds when there is no meaning tied to the

--ds-text-accent-orange

Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the

--ds-text-accent-orange-bolder

Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the

--ds-text-accent-yellow

Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the

--ds-text-accent-yellow-bolder

Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the

--ds-text-accent-green

Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the

--ds-text-accent-green-bolder

Use for green text on subtle green accent backgrounds when there is no meaning tied to the

--ds-text-accent-teal

Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the

--ds-text-accent-teal-bolder

Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the

--ds-text-accent-blue

Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the

--ds-text-accent-blue-bolder

Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the

--ds-text-accent-purple

Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the

--ds-text-accent-purple-bolder

Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the

--ds-text-accent-magenta

Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the

--ds-text-accent-magenta-bolder

Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the

--ds-text-accent-gray

Use for text on non-bold gray accent backgrounds, such as colored tags.

--ds-text-accent-gray-bolder

Use for text and icons on gray subtle accent backgrounds.

--ds-text-disabled

Use for text in a disabled state.

--ds-text-inverse

Use for text on bold backgrounds.

--ds-text-selected

Use for text in selected or opened states, such as tabs and dropdown buttons.

--ds-text-brand

Use for text that reinforces our brand.

--ds-text-danger

Use for critical text, such as input field error messaging.

--ds-text-warning

Use for text to emphasize caution, such as in moved lozenges.

--ds-text-warning-inverse

Use for text when on bold warning backgrounds.

--ds-text-success

Use for text to communicate a favorable outcome, such as input field success messaging.

--ds-text-discovery

Use for text to emphasize change or something new, such as in new lozenges.

--ds-text-information

Use for informative text or to communicate something is in progress, such as in-progress lozenges.

--ds-text-subtlest

Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.

--ds-text-subtle

Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.

Background tokens

Token and descriptionLight valueDark value
--ds-background-accent-lime-subtlest
--ds-background-accent-lime-subtlest-hovered
--ds-background-accent-lime-subtlest-pressed

Use for for backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-lime-subtler
--ds-background-accent-lime-subtler-hovered
--ds-background-accent-lime-subtler-pressed

Use for for backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-lime-subtle
--ds-background-accent-lime-subtle-hovered
--ds-background-accent-lime-subtle-pressed

Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-lime-bolder
--ds-background-accent-lime-bolder-hovered
--ds-background-accent-lime-bolder-pressed

Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-red-subtlest
--ds-background-accent-red-subtlest-hovered
--ds-background-accent-red-subtlest-pressed

Use for red backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-red-subtler
--ds-background-accent-red-subtler-hovered
--ds-background-accent-red-subtler-pressed

Use for red backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-red-subtle
--ds-background-accent-red-subtle-hovered
--ds-background-accent-red-subtle-pressed

Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-red-bolder
--ds-background-accent-red-bolder-hovered
--ds-background-accent-red-bolder-pressed

Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-orange-subtlest
--ds-background-accent-orange-subtlest-hovered
--ds-background-accent-orange-subtlest-pressed

Use for orange backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-orange-subtler
--ds-background-accent-orange-subtler-hovered
--ds-background-accent-orange-subtler-pressed

Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-orange-subtle
--ds-background-accent-orange-subtle-hovered
--ds-background-accent-orange-subtle-pressed

Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-orange-bolder
--ds-background-accent-orange-bolder-hovered
--ds-background-accent-orange-bolder-pressed

Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-yellow-subtlest
--ds-background-accent-yellow-subtlest-hovered
--ds-background-accent-yellow-subtlest-pressed

--ds-background-accent-yellow-subtler
--ds-background-accent-yellow-subtler-hovered
--ds-background-accent-yellow-subtler-pressed

Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-yellow-subtle
--ds-background-accent-yellow-subtle-hovered
--ds-background-accent-yellow-subtle-pressed

Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-yellow-bolder
--ds-background-accent-yellow-bolder-hovered
--ds-background-accent-yellow-bolder-pressed

Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-green-subtlest
--ds-background-accent-green-subtlest-hovered
--ds-background-accent-green-subtlest-pressed

Use for green backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-green-subtler
--ds-background-accent-green-subtler-hovered
--ds-background-accent-green-subtler-pressed

Use for green backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-green-subtle
--ds-background-accent-green-subtle-hovered
--ds-background-accent-green-subtle-pressed

Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-green-bolder
--ds-background-accent-green-bolder-hovered
--ds-background-accent-green-bolder-pressed

Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-teal-subtlest
--ds-background-accent-teal-subtlest-hovered
--ds-background-accent-teal-subtlest-pressed

Use for teal backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-teal-subtler
--ds-background-accent-teal-subtler-hovered
--ds-background-accent-teal-subtler-pressed

Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-teal-subtle
--ds-background-accent-teal-subtle-hovered
--ds-background-accent-teal-subtle-pressed

Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-teal-bolder
--ds-background-accent-teal-bolder-hovered
--ds-background-accent-teal-bolder-pressed

Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-blue-subtlest
--ds-background-accent-blue-subtlest-hovered
--ds-background-accent-blue-subtlest-pressed

Use for blue backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-blue-subtler
--ds-background-accent-blue-subtler-hovered
--ds-background-accent-blue-subtler-pressed

Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-blue-subtle
--ds-background-accent-blue-subtle-hovered
--ds-background-accent-blue-subtle-pressed

Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-blue-bolder
--ds-background-accent-blue-bolder-hovered
--ds-background-accent-blue-bolder-pressed

Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-purple-subtlest
--ds-background-accent-purple-subtlest-hovered
--ds-background-accent-purple-subtlest-pressed

Use for purple backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-purple-subtler
--ds-background-accent-purple-subtler-hovered
--ds-background-accent-purple-subtler-pressed

Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-purple-subtle
--ds-background-accent-purple-subtle-hovered
--ds-background-accent-purple-subtle-pressed

Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-purple-bolder
--ds-background-accent-purple-bolder-hovered
--ds-background-accent-purple-bolder-pressed

Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-magenta-subtlest
--ds-background-accent-magenta-subtlest-hovered
--ds-background-accent-magenta-subtlest-pressed

Use for magenta backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-magenta-subtler
--ds-background-accent-magenta-subtler-hovered
--ds-background-accent-magenta-subtler-pressed

Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-magenta-subtle
--ds-background-accent-magenta-subtle-hovered
--ds-background-accent-magenta-subtle-pressed

Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-magenta-bolder
--ds-background-accent-magenta-bolder-hovered
--ds-background-accent-magenta-bolder-pressed

Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-gray-subtlest
--ds-background-accent-gray-subtlest-hovered
--ds-background-accent-gray-subtlest-pressed

Use for gray backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-gray-subtler
--ds-background-accent-gray-subtler-hovered
--ds-background-accent-gray-subtler-pressed

Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-gray-subtle
--ds-background-accent-gray-subtle-hovered
--ds-background-accent-gray-subtle-pressed

Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-gray-bolder
--ds-background-accent-gray-bolder-hovered
--ds-background-accent-gray-bolder-pressed

Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-disabled

Use for backgrounds of elements in a disabled state.

--ds-background-input
--ds-background-input-hovered
--ds-background-input-pressed

Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.

--ds-background-inverse-subtle
--ds-background-inverse-subtle-hovered
--ds-background-inverse-subtle-pressed

Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.

--ds-background-neutral
--ds-background-neutral-hovered
--ds-background-neutral-pressed

The default background for neutral elements, such as default buttons.

--ds-background-neutral-subtle
--ds-background-neutral-subtle-hovered
--ds-background-neutral-subtle-pressed

Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.

--ds-background-neutral-bold
--ds-background-neutral-bold-hovered
--ds-background-neutral-bold-pressed

A vibrant background option for neutral UI elements, such as announcement banners.

--ds-background-selected
--ds-background-selected-hovered
--ds-background-selected-pressed

Use for the background of elements in a selected state, such as in opened dropdown buttons.

--ds-background-selected-bold
--ds-background-selected-bold-hovered
--ds-background-selected-bold-pressed

Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.

--ds-background-brand-subtlest
--ds-background-brand-subtlest-hovered
--ds-background-brand-subtlest-pressed

Use for the background of elements used to reinforce our brand, but with less emphasis.

--ds-background-brand-bold
--ds-background-brand-bold-hovered
--ds-background-brand-bold-pressed

Use for the background of elements used to reinforce our brand, but with more emphasis.

--ds-background-brand-boldest
--ds-background-brand-boldest-hovered
--ds-background-brand-boldest-pressed

Use for the background of elements used to reinforce our brand, that need to stand out a lot.

--ds-background-danger
--ds-background-danger-hovered
--ds-background-danger-pressed

Use for backgrounds communicating critical information, such in error section messages.

--ds-background-danger-bold
--ds-background-danger-bold-hovered
--ds-background-danger-bold-pressed

A vibrant background option for communicating critical information, such as in danger buttons and error banners.

--ds-background-warning
--ds-background-warning-hovered
--ds-background-warning-pressed

Use for backgrounds communicating caution, such as in warning section messages.

--ds-background-warning-bold
--ds-background-warning-bold-hovered
--ds-background-warning-bold-pressed

A vibrant background option for communicating caution, such as in warning buttons and warning banners.

--ds-background-success
--ds-background-success-hovered
--ds-background-success-pressed

Use for backgrounds communicating a favorable outcome, such as in success section messages.

--ds-background-success-bold
--ds-background-success-bold-hovered
--ds-background-success-bold-pressed

A vibrant background option for communicating a favorable outcome, such as in checked toggles.

--ds-background-discovery
--ds-background-discovery-hovered
--ds-background-discovery-pressed

Use for backgrounds communicating change or something new, such as in discovery section messages.

--ds-background-discovery-bold
--ds-background-discovery-bold-hovered
--ds-background-discovery-bold-pressed

A vibrant background option communicating change or something new, such as in onboarding spotlights.

--ds-background-information
--ds-background-information-hovered
--ds-background-information-pressed

Use for backgrounds communicating information or something in-progress, such as in information section messages.

--ds-background-information-bold
--ds-background-information-bold-hovered
--ds-background-information-bold-pressed

A vibrant background option for communicating information or something in-progress.

Surface tokens

Token and descriptionLight valueDark value
--ds-surface
--ds-surface-hovered
--ds-surface-pressed

Use as the primary background for the UI.

--ds-surface-overlay
--ds-surface-overlay-hovered
--ds-surface-overlay-pressed

Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with shadow.overlay.

--ds-surface-raised
--ds-surface-raised-hovered
--ds-surface-raised-pressed

Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with shadow.raised.

--ds-surface-sunken

A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.

Icon tokens

Token and descriptionLight valueDark value
--ds-icon

Use for icon-only buttons, or icons paired with text

--ds-icon-accent-lime

Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-red

Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-orange

Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-yellow

Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-green

Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-teal

Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-blue

Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-purple

Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-magenta

Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-gray

Use for icons on non-bold gray accent backgrounds, such as file type icons.

--ds-icon-disabled

Use for icons in a disabled state.

--ds-icon-inverse

Use for icons on bold backgrounds.

--ds-icon-selected

Use for icons in selected or opened states, such as those used in dropdown buttons.

--ds-icon-brand

Use for icons that reinforce our brand.

--ds-icon-danger

Use for icons communicating critical information, such as those used in error handing.

--ds-icon-warning

Use for icons communicating caution, such as those used in warning section messages.

--ds-icon-warning-inverse

Use for icons when on bold warning backgrounds.

--ds-icon-success

Use for icons communicating a favorable outcome, such as those used in success section messaged.

--ds-icon-discovery

Use for icons communicating change or something new, such as discovery section messages.

--ds-icon-information

Use for icons communicating information or something in-progress, such as information section messages.

--ds-icon-subtle

Use for icons paired with text.subtle

Border tokens

Token and descriptionLight valueDark value
--ds-border

Use to visually group or separate UI elements, such as flat cards or side panel dividers.

--ds-border-accent-lime

Use for lime borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-red

Use for red borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-orange

Use for orange borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-yellow

Use for yellow borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-green

Use for green borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-teal

Use for teal borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-blue

Use for blue borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-purple

Use for purple borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-magenta

Use for magenta borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-gray

Use for borders on non-bold gray accent backgrounds.

--ds-border-disabled

Use for borders of elements in a disabled state.

--ds-border-focused

Use for focus rings of elements in a focus state.

--ds-border-input

Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.

--ds-border-inverse

Use for borders on bold backgrounds.

--ds-border-selected

Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.

--ds-border-brand

Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.

--ds-border-danger

Use for borders communicating critical information, such as the borders on invalid text fields.

--ds-border-warning

Use for borders communicating caution.

--ds-border-success

Use for borders communicating a favorable outcome, such as the borders on validated text fields.

--ds-border-discovery

Use for borders communicating change or something new, such as the borders in onboarding spotlights.

--ds-border-information

Use for borders communicating information or something in-progress.

--ds-border-bold

A neutral border option that passes min 3:1 contrast ratios.

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Color tokens

new

Color tokens use for the text, background, icon, border and link of elements.

Contents
Token and descriptionLight valueDark value
--ds-link
--ds-link-pressed

Use for links in a default or hovered state. Add an underline for hovered states.

--ds-link-visited

Use for links in a visited state.

Text tokens

Token and descriptionLight valueDark value
--ds-text

Use for primary text, such as body copy, sentence case headers, and buttons.

--ds-text-accent-lime

Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the

--ds-text-accent-lime-bolder

Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the

--ds-text-accent-red

Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the

--ds-text-accent-red-bolder

Use for red text on subtle red accent backgrounds when there is no meaning tied to the

--ds-text-accent-orange

Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the

--ds-text-accent-orange-bolder

Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the

--ds-text-accent-yellow

Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the

--ds-text-accent-yellow-bolder

Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the

--ds-text-accent-green

Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the

--ds-text-accent-green-bolder

Use for green text on subtle green accent backgrounds when there is no meaning tied to the

--ds-text-accent-teal

Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the

--ds-text-accent-teal-bolder

Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the

--ds-text-accent-blue

Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the

--ds-text-accent-blue-bolder

Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the

--ds-text-accent-purple

Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the

--ds-text-accent-purple-bolder

Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the

--ds-text-accent-magenta

Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the

--ds-text-accent-magenta-bolder

Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the

--ds-text-accent-gray

Use for text on non-bold gray accent backgrounds, such as colored tags.

--ds-text-accent-gray-bolder

Use for text and icons on gray subtle accent backgrounds.

--ds-text-disabled

Use for text in a disabled state.

--ds-text-inverse

Use for text on bold backgrounds.

--ds-text-selected

Use for text in selected or opened states, such as tabs and dropdown buttons.

--ds-text-brand

Use for text that reinforces our brand.

--ds-text-danger

Use for critical text, such as input field error messaging.

--ds-text-warning

Use for text to emphasize caution, such as in moved lozenges.

--ds-text-warning-inverse

Use for text when on bold warning backgrounds.

--ds-text-success

Use for text to communicate a favorable outcome, such as input field success messaging.

--ds-text-discovery

Use for text to emphasize change or something new, such as in new lozenges.

--ds-text-information

Use for informative text or to communicate something is in progress, such as in-progress lozenges.

--ds-text-subtlest

Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.

--ds-text-subtle

Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.

Background tokens

Token and descriptionLight valueDark value
--ds-background-accent-lime-subtlest
--ds-background-accent-lime-subtlest-hovered
--ds-background-accent-lime-subtlest-pressed

Use for for backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-lime-subtler
--ds-background-accent-lime-subtler-hovered
--ds-background-accent-lime-subtler-pressed

Use for for backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-lime-subtle
--ds-background-accent-lime-subtle-hovered
--ds-background-accent-lime-subtle-pressed

Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-lime-bolder
--ds-background-accent-lime-bolder-hovered
--ds-background-accent-lime-bolder-pressed

Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-red-subtlest
--ds-background-accent-red-subtlest-hovered
--ds-background-accent-red-subtlest-pressed

Use for red backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-red-subtler
--ds-background-accent-red-subtler-hovered
--ds-background-accent-red-subtler-pressed

Use for red backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-red-subtle
--ds-background-accent-red-subtle-hovered
--ds-background-accent-red-subtle-pressed

Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-red-bolder
--ds-background-accent-red-bolder-hovered
--ds-background-accent-red-bolder-pressed

Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-orange-subtlest
--ds-background-accent-orange-subtlest-hovered
--ds-background-accent-orange-subtlest-pressed

Use for orange backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-orange-subtler
--ds-background-accent-orange-subtler-hovered
--ds-background-accent-orange-subtler-pressed

Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-orange-subtle
--ds-background-accent-orange-subtle-hovered
--ds-background-accent-orange-subtle-pressed

Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-orange-bolder
--ds-background-accent-orange-bolder-hovered
--ds-background-accent-orange-bolder-pressed

Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-yellow-subtlest
--ds-background-accent-yellow-subtlest-hovered
--ds-background-accent-yellow-subtlest-pressed

--ds-background-accent-yellow-subtler
--ds-background-accent-yellow-subtler-hovered
--ds-background-accent-yellow-subtler-pressed

Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-yellow-subtle
--ds-background-accent-yellow-subtle-hovered
--ds-background-accent-yellow-subtle-pressed

Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-yellow-bolder
--ds-background-accent-yellow-bolder-hovered
--ds-background-accent-yellow-bolder-pressed

Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-green-subtlest
--ds-background-accent-green-subtlest-hovered
--ds-background-accent-green-subtlest-pressed

Use for green backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-green-subtler
--ds-background-accent-green-subtler-hovered
--ds-background-accent-green-subtler-pressed

Use for green backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-green-subtle
--ds-background-accent-green-subtle-hovered
--ds-background-accent-green-subtle-pressed

Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-green-bolder
--ds-background-accent-green-bolder-hovered
--ds-background-accent-green-bolder-pressed

Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-teal-subtlest
--ds-background-accent-teal-subtlest-hovered
--ds-background-accent-teal-subtlest-pressed

Use for teal backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-teal-subtler
--ds-background-accent-teal-subtler-hovered
--ds-background-accent-teal-subtler-pressed

Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-teal-subtle
--ds-background-accent-teal-subtle-hovered
--ds-background-accent-teal-subtle-pressed

Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-teal-bolder
--ds-background-accent-teal-bolder-hovered
--ds-background-accent-teal-bolder-pressed

Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-blue-subtlest
--ds-background-accent-blue-subtlest-hovered
--ds-background-accent-blue-subtlest-pressed

Use for blue backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-blue-subtler
--ds-background-accent-blue-subtler-hovered
--ds-background-accent-blue-subtler-pressed

Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-blue-subtle
--ds-background-accent-blue-subtle-hovered
--ds-background-accent-blue-subtle-pressed

Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-blue-bolder
--ds-background-accent-blue-bolder-hovered
--ds-background-accent-blue-bolder-pressed

Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-purple-subtlest
--ds-background-accent-purple-subtlest-hovered
--ds-background-accent-purple-subtlest-pressed

Use for purple backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-purple-subtler
--ds-background-accent-purple-subtler-hovered
--ds-background-accent-purple-subtler-pressed

Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-purple-subtle
--ds-background-accent-purple-subtle-hovered
--ds-background-accent-purple-subtle-pressed

Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-purple-bolder
--ds-background-accent-purple-bolder-hovered
--ds-background-accent-purple-bolder-pressed

Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-magenta-subtlest
--ds-background-accent-magenta-subtlest-hovered
--ds-background-accent-magenta-subtlest-pressed

Use for magenta backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-magenta-subtler
--ds-background-accent-magenta-subtler-hovered
--ds-background-accent-magenta-subtler-pressed

Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-magenta-subtle
--ds-background-accent-magenta-subtle-hovered
--ds-background-accent-magenta-subtle-pressed

Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-magenta-bolder
--ds-background-accent-magenta-bolder-hovered
--ds-background-accent-magenta-bolder-pressed

Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-accent-gray-subtlest
--ds-background-accent-gray-subtlest-hovered
--ds-background-accent-gray-subtlest-pressed

Use for gray backgrounds when there is no meaning tied to the Reserved for when you only want a hint of

--ds-background-accent-gray-subtler
--ds-background-accent-gray-subtler-hovered
--ds-background-accent-gray-subtler-pressed

Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-gray-subtle
--ds-background-accent-gray-subtle-hovered
--ds-background-accent-gray-subtle-pressed

Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.

--ds-background-accent-gray-bolder
--ds-background-accent-gray-bolder-hovered
--ds-background-accent-gray-bolder-pressed

Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.

--ds-background-disabled

Use for backgrounds of elements in a disabled state.

--ds-background-input
--ds-background-input-hovered
--ds-background-input-pressed

Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.

--ds-background-inverse-subtle
--ds-background-inverse-subtle-hovered
--ds-background-inverse-subtle-pressed

Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.

--ds-background-neutral
--ds-background-neutral-hovered
--ds-background-neutral-pressed

The default background for neutral elements, such as default buttons.

--ds-background-neutral-subtle
--ds-background-neutral-subtle-hovered
--ds-background-neutral-subtle-pressed

Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.

--ds-background-neutral-bold
--ds-background-neutral-bold-hovered
--ds-background-neutral-bold-pressed

A vibrant background option for neutral UI elements, such as announcement banners.

--ds-background-selected
--ds-background-selected-hovered
--ds-background-selected-pressed

Use for the background of elements in a selected state, such as in opened dropdown buttons.

--ds-background-selected-bold
--ds-background-selected-bold-hovered
--ds-background-selected-bold-pressed

Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.

--ds-background-brand-subtlest
--ds-background-brand-subtlest-hovered
--ds-background-brand-subtlest-pressed

Use for the background of elements used to reinforce our brand, but with less emphasis.

--ds-background-brand-bold
--ds-background-brand-bold-hovered
--ds-background-brand-bold-pressed

Use for the background of elements used to reinforce our brand, but with more emphasis.

--ds-background-brand-boldest
--ds-background-brand-boldest-hovered
--ds-background-brand-boldest-pressed

Use for the background of elements used to reinforce our brand, that need to stand out a lot.

--ds-background-danger
--ds-background-danger-hovered
--ds-background-danger-pressed

Use for backgrounds communicating critical information, such in error section messages.

--ds-background-danger-bold
--ds-background-danger-bold-hovered
--ds-background-danger-bold-pressed

A vibrant background option for communicating critical information, such as in danger buttons and error banners.

--ds-background-warning
--ds-background-warning-hovered
--ds-background-warning-pressed

Use for backgrounds communicating caution, such as in warning section messages.

--ds-background-warning-bold
--ds-background-warning-bold-hovered
--ds-background-warning-bold-pressed

A vibrant background option for communicating caution, such as in warning buttons and warning banners.

--ds-background-success
--ds-background-success-hovered
--ds-background-success-pressed

Use for backgrounds communicating a favorable outcome, such as in success section messages.

--ds-background-success-bold
--ds-background-success-bold-hovered
--ds-background-success-bold-pressed

A vibrant background option for communicating a favorable outcome, such as in checked toggles.

--ds-background-discovery
--ds-background-discovery-hovered
--ds-background-discovery-pressed

Use for backgrounds communicating change or something new, such as in discovery section messages.

--ds-background-discovery-bold
--ds-background-discovery-bold-hovered
--ds-background-discovery-bold-pressed

A vibrant background option communicating change or something new, such as in onboarding spotlights.

--ds-background-information
--ds-background-information-hovered
--ds-background-information-pressed

Use for backgrounds communicating information or something in-progress, such as in information section messages.

--ds-background-information-bold
--ds-background-information-bold-hovered
--ds-background-information-bold-pressed

A vibrant background option for communicating information or something in-progress.

Surface tokens

Token and descriptionLight valueDark value
--ds-surface
--ds-surface-hovered
--ds-surface-pressed

Use as the primary background for the UI.

--ds-surface-overlay
--ds-surface-overlay-hovered
--ds-surface-overlay-pressed

Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with shadow.overlay.

--ds-surface-raised
--ds-surface-raised-hovered
--ds-surface-raised-pressed

Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with shadow.raised.

--ds-surface-sunken

A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.

Icon tokens

Token and descriptionLight valueDark value
--ds-icon

Use for icon-only buttons, or icons paired with text

--ds-icon-accent-lime

Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-red

Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-orange

Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-yellow

Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-green

Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-teal

Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-blue

Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-purple

Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-magenta

Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.

--ds-icon-accent-gray

Use for icons on non-bold gray accent backgrounds, such as file type icons.

--ds-icon-disabled

Use for icons in a disabled state.

--ds-icon-inverse

Use for icons on bold backgrounds.

--ds-icon-selected

Use for icons in selected or opened states, such as those used in dropdown buttons.

--ds-icon-brand

Use for icons that reinforce our brand.

--ds-icon-danger

Use for icons communicating critical information, such as those used in error handing.

--ds-icon-warning

Use for icons communicating caution, such as those used in warning section messages.

--ds-icon-warning-inverse

Use for icons when on bold warning backgrounds.

--ds-icon-success

Use for icons communicating a favorable outcome, such as those used in success section messaged.

--ds-icon-discovery

Use for icons communicating change or something new, such as discovery section messages.

--ds-icon-information

Use for icons communicating information or something in-progress, such as information section messages.

--ds-icon-subtle

Use for icons paired with text.subtle

Border tokens

Token and descriptionLight valueDark value
--ds-border

Use to visually group or separate UI elements, such as flat cards or side panel dividers.

--ds-border-accent-lime

Use for lime borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-red

Use for red borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-orange

Use for orange borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-yellow

Use for yellow borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-green

Use for green borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-teal

Use for teal borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-blue

Use for blue borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-purple

Use for purple borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-magenta

Use for magenta borders on non-bold backgrounds when there is no meaning tied to the

--ds-border-accent-gray

Use for borders on non-bold gray accent backgrounds.

--ds-border-disabled

Use for borders of elements in a disabled state.

--ds-border-focused

Use for focus rings of elements in a focus state.

--ds-border-input

Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.

--ds-border-inverse

Use for borders on bold backgrounds.

--ds-border-selected

Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.

--ds-border-brand

Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.

--ds-border-danger

Use for borders communicating critical information, such as the borders on invalid text fields.

--ds-border-warning

Use for borders communicating caution.

--ds-border-success

Use for borders communicating a favorable outcome, such as the borders on validated text fields.

--ds-border-discovery

Use for borders communicating change or something new, such as the borders in onboarding spotlights.

--ds-border-information

Use for borders communicating information or something in-progress.

--ds-border-bold

A neutral border option that passes min 3:1 contrast ratios.

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/tokens/index.html b/tokens/index.html index fb8ab85..6615daa 100644 --- a/tokens/index.html +++ b/tokens/index.html @@ -7,7 +7,7 @@

Tokens

Design tokens are the single source of truth to name and store design decisions.

Color tokensnew

Color tokens use for the text, background, icon, border and link of elements.

Shadow tokensnew

Tokens use for the box shadow of elements.

Space tokensnew

Tokens use for the spacing of UI.

- + diff --git a/tokens/shadow/index.html b/tokens/shadow/index.html index 027c837..2bd38e2 100644 --- a/tokens/shadow/index.html +++ b/tokens/shadow/index.html @@ -6,8 +6,8 @@

Shadow tokens

new

Tokens use for the box shadow of elements.

Token and descriptionLight valueDark value
--ds-shadow-overflow

Use to create a shadow when content scrolls under other content.

--ds-shadow-overlay

Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state.

--ds-shadow-raised

Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with surface.raised

Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Shadow tokens

new

Tokens use for the box shadow of elements.

Token and descriptionLight valueDark value
--ds-shadow-overflow

Use to create a shadow when content scrolls under other content.

--ds-shadow-overlay

Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state.

--ds-shadow-raised

Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with surface.raised

Edit this page on Github
Last edited by zhengchun on November 30, 2023
+ diff --git a/tokens/space/index.html b/tokens/space/index.html index 1920e93..7e254ca 100644 --- a/tokens/space/index.html +++ b/tokens/space/index.html @@ -6,8 +6,8 @@

Space tokens

new

Tokens use for the spacing of UI.

Token and descriptionValue
--ds-space-0

Use for resetting default spacing styles.

0px
--ds-space-025

Use for small and compact pieces of UI.

2px
--ds-space-050

Use for small and compact pieces of UI.

4px
--ds-space-075

Use for small and compact pieces of UI.

6px
--ds-space-100

Use for small and compact pieces of UI.

8px
--ds-space-150

Use for small and compact pieces of UI.

12px
--ds-space-200

Use for small and compact pieces of UI.

16px
--ds-space-250

Use for small and compact pieces of UI.

20px
--ds-space-300

Use for small and compact pieces of UI.

24px
--ds-space-400

Use for the largest pieces of UI and for layout elements.

32px
--ds-space-500

Use for the largest pieces of UI and for layout elements.

40px
--ds-space-600

Use for the largest pieces of UI and for layout elements.

48px
--ds-space-700

Use for the largest pieces of UI and for layout elements.

56px
--ds-space-800

Use for the largest pieces of UI and for layout elements.

64px
--ds-space-1000

Use for the largest pieces of UI and for layout elements.

80px
Edit this page on Github
Last edited by zhengchun on November 24, 2023
- +

Space tokens

new

Tokens use for the spacing of UI.

Token and descriptionValue
--ds-space-0

Use for resetting default spacing styles.

0px
--ds-space-025

Use for small and compact pieces of UI.

2px
--ds-space-050

Use for small and compact pieces of UI.

4px
--ds-space-075

Use for small and compact pieces of UI.

6px
--ds-space-100

Use for small and compact pieces of UI.

8px
--ds-space-150

Use for small and compact pieces of UI.

12px
--ds-space-200

Use for small and compact pieces of UI.

16px
--ds-space-250

Use for small and compact pieces of UI.

20px
--ds-space-300

Use for small and compact pieces of UI.

24px
--ds-space-400

Use for the largest pieces of UI and for layout elements.

32px
--ds-space-500

Use for the largest pieces of UI and for layout elements.

40px
--ds-space-600

Use for the largest pieces of UI and for layout elements.

48px
--ds-space-700

Use for the largest pieces of UI and for layout elements.

56px
--ds-space-800

Use for the largest pieces of UI and for layout elements.

64px
--ds-space-1000

Use for the largest pieces of UI and for layout elements.

80px
Edit this page on Github
Last edited by zhengchun on November 30, 2023
+