');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}.bx--text-truncate--end,.bx--text-truncate--front{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--text-truncate--front{direction:rtl}div[class*=page-header]{--height:15rem}.paragraph{font-size:1rem;font-weight:400;line-height:1.5rem;letter-spacing:0;margin-bottom:1.5rem;padding-right:2rem}.paragraph--responsive{margin-left:-1rem;padding-left:1rem}@media (min-width:42rem){.paragraph--responsive{width:75%}}@media (min-width:66rem){.paragraph--responsive{width:66.667%}}.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:100%}@media (min-width:42rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:75%}}@media (min-width:66rem){.list,.page-h1,.page-h2,.page-h3,.page-h4,.page-h5,.page-h6{width:66.667%}}.page-h1{margin-top:6rem;margin-bottom:1rem;font-size:2rem;font-weight:400;line-height:125%;letter-spacing:0;font-size:calc(2rem + 0.25*(100vw - 20rem)/22)}@media (min-width:42rem){.page-h1{font-size:2.25rem;line-height:122%;font-size:calc(2.25rem + 0.375*(100vw - 42rem)/24)}}@media (min-width:66rem){.page-h1{font-size:2.625rem;line-height:119%;font-size:calc(2.625rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.page-h1{font-size:3rem;line-height:117%;font-size:calc(3rem + 0.75*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h1{font-size:3.75rem}}.page-h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h2{font-size:2rem}}.page-h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.page-h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.page-h3{font-size:1.5rem}}.page-h4{font-size:1rem;line-height:1.375rem;letter-spacing:0}.page-h4,.page-h5,.page-h6{margin-top:.75rem;font-weight:600}.page-h5,.page-h6{font-size:.875rem;line-height:1.125rem;letter-spacing:.16px}.container .gatsby-resp-image-wrapper{background:#fff}.image--fixed{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}.image--fixed span.gatsby-resp-image-wrapper{background:#fff;display:flex!important;align-items:center;justify-content:center;margin-right:0!important;width:70%!important;max-width:100%!important}.image--fixed img.gatsby-resp-image-image{max-width:736px;width:736px!important;height:auto!important;position:relative!important}.homepage--dots{position:fixed;z-index:1;width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='white' width='1' height='1'/%3E%3C/svg%3E");background-size:16px;opacity:.35}.container--homepage div[class*=Callout-module--grid],.container--homepage div[class*=Main-module--main],.container--homepage div[class*=NextPrevious-module--wrapper]{position:relative;z-index:2}.homepage--header{height:0;overflow:hidden;padding-top:100%;position:relative}@media (min-width:42rem){.homepage--header{padding-top:50%}}@media (min-width:66rem){.homepage--header{padding:0;height:560px}}.homepage--header .bx--grid,.homepage--header .bx--row{height:100%}.homepage--tile-header{display:flex;align-items:flex-end;margin-top:-50%;padding-left:0;padding-right:0}@media (min-width:42rem){.homepage--tile-header{padding-left:1rem;padding-right:1rem}}@media (min-width:66rem){.homepage--tile-header{margin-top:0}}.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:100%}@media (min-width:42rem){.homepage--tile-header .bx--aspect-ratio--2x1{padding-bottom:50%}}.homepage--tile-header .bx--resource-card{width:100%}.homepage-feature{margin-top:3rem}.homepage-feature .bx--feature-card__img{padding-bottom:50%}@media (min-width:42rem){.homepage-feature .bx--feature-card__img{padding-bottom:0}}.bx--header .algolia-autocomplete{height:3rem}.bx--header .algolia-autocomplete .ds-dropdown-menu{margin-top:0}.component-example .bx--link,.page-content .bx--breadcrumb .bx--link{font-size:.875rem}.component-example .button .bx--btn{margin:.5rem}.component-example__live.component-example__live--notification .component-example__live--rendered>div{display:flex;flex-direction:column;align-items:flex-start}.component-example .bx--inline-notification{display:inline-flex}.component-example .loading .bx--loading-overlay{position:absolute}.component-example .bx--form-item,.component-example__live .bx--form-item{margin-bottom:2rem}.component-example .bx--form-item.bx--checkbox-wrapper{margin-bottom:.5rem}.component-example__live--tabs .bx--tabs__nav{position:static}.component-example__live .tabs .bx--tabs+div{margin-top:2rem}.component-example__live--tile .bx--grid{outline:1px dashed #97c1ff}.component-example__live--tile .bx--tile-container .bx--col{background:none;margin-bottom:1rem}.component-example .flatpickr-calendar{margin-left:-1rem;margin-top:-1rem}.component-example__live .bx--tooltip{margin-left:-1rem;margin-top:-.5rem}.component-example__live.component-example__live--modal .bx--modal{z-index:10000}.component-example__live .bx--progress .bx--tooltip{margin-left:1.375rem;margin-top:2.5rem}.code-example{display:flex;flex-direction:column;position:relative;max-width:100%;background:#171717}.code-example code[class*=language-],.code-example pre[class*=language-]{background:#171717;color:#fff}.code-example code[class*=language-]{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px}.code-example pre[class*=language-]{padding-top:0;border:none;box-shadow:none}.code-example__copy-btn{height:2rem;width:2rem;position:absolute;top:.5rem;right:.5rem;color:transparent;cursor:pointer;z-index:20;background:#171717;-webkit-transition:background .11s;transition:background .11s}.code-example__copy-btn:hover{background:#353535}.code-example__copy-btn:focus{outline:1px solid #0062ff;background:#171717}.code-example__copy-btn:hover svg{fill:#fff}.code-example__copy-btn svg{position:absolute;top:.5rem;left:.5rem;fill:#fff}.code-title{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;display:block;margin-bottom:1rem}.code-example__raw-html{background:#171717;color:#fff;margin:0 1rem;padding:1rem 0;max-height:12rem;min-height:7rem;height:auto;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden;-webkit-transition:.11s;transition:.11s;border-bottom:1px solid #3d3d3d}.code-example__raw-html--expanded{max-height:100rem}.code-example__expand-container{display:flex;justify-content:flex-end;height:3rem;width:100%;background-color:#171717}.code-example__expand{color:#fff;background-color:#171717;border:none;padding:1rem 1rem 1.125rem;display:flex;align-items:center;cursor:pointer}.code-example__expand:focus{outline:1px solid #0062ff;outline-offset:-1px}.code-example__expand:hover span{border-bottom:1px solid #fff}.code-example__expand span{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:inline-block;line-height:1;border-bottom:1px solid transparent;-webkit-transition:border .11s;transition:border .11s}.code-example__expand--icon{margin-left:.5rem;fill:#fff;-webkit-transition:.11s;transition:.11s}.code-example__expand--icon--rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.code-example__expand--hidden{display:none}.code-example .token{white-space:nowrap}.code-example .token:last-of-type{margin-right:0}.color-block{position:relative;font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px}.color-block__color{position:relative;display:block;margin-top:.125rem;height:.875rem;width:.875rem;border-radius:.875rem}.color-block__color:before{position:absolute;content:"";height:.875rem;width:.875rem;border-radius:.875rem;border:1px solid #dcdcdc;left:-1px;top:-1px}.color-block__color--with-label{position:absolute;top:0;left:5rem}.color-token-table{display:flex;flex-direction:column}.color-token-table__theme-switcher{position:relative;width:100%;height:3rem;margin-bottom:1.75rem;background:#fff}.color-token-table__theme-switcher:before{content:"";display:block;position:absolute;top:-16px;left:0;width:110%;height:64px;background:#f3f3f3}.color-token-table__theme-switcher--sticky{position:fixed;top:112px;z-index:9999;max-width:1164px;box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}@media (max-width:1580px){.color-token-table__theme-switcher--sticky{max-width:73.35%}}@media (max-width:1380px){.color-token-table__theme-switcher--sticky{max-width:73.1%}}@media (max-width:1280px){.color-token-table__theme-switcher--sticky{max-width:72.98%}}@media (max-width:1055px){.color-token-table__theme-switcher--sticky{max-width:calc(100% - 32px)}}@media (max-width:671px){.color-token-table__theme-switcher--sticky{max-width:100%}}h3.page-h3--sticky{margin-top:100px!important}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected){background-color:#fff;color:#171717}.color-token-table__theme-switcher .bx--content-switcher-btn:not(.bx--content-switcher--selected):hover{background-color:#e5e5e5}.color-token-table__theme-switcher .bx--content-switcher-btn{flex:1 1;border-radius:0;height:3rem;padding:.5rem 1rem}@media (min-width:42rem){.color-token-table__theme-switcher .bx--content-switcher-btn{padding-right:4rem}}.color-token-table__theme-switcher .bx--content-switcher-btn:not(:last-of-type):after{height:24px;right:-1px;top:12px}.color-token-value{display:flex;justify-content:space-between}.color-token-value .bx--overflow-menu{margin-left:.5rem}.color-token-value .bx--overflow-menu-options{left:-9.25rem;top:2rem}.color-token-value .bx--overflow-menu__icon{width:.75rem;height:.75rem}.color-token-value>div{display:flex}@media (max-width:580px){.color-token-value>div{position:absolute;right:1rem;top:1rem}}.color-token-value__block{display:block;width:3rem;height:3rem;border-radius:3rem}@media (max-width:672px){.color-token-value__block{width:2rem;height:2rem;border-radius:2rem}}@media (max-width:580px){.color-token-value__block{width:3rem;height:3rem;border-radius:3rem}}.color-token-table .page-table{background:#fff;margin-top:.5rem;width:100%}.color-token-table .page-table thead tr{border-bottom:1px solid #dcdcdc;display:flex}@media (max-width:580px){.color-token-table .page-table thead tr{display:none}}.color-token-table .page-table thead tr th{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr{display:flex;border-bottom:1px solid #dcdcdc;min-height:6.5rem}@media (max-width:580px){.color-token-table .page-table tbody tr{flex-direction:column;height:auto;position:relative}}.color-token-table .page-table tbody tr:last-child{border-bottom:none}.color-token-table .page-table tbody tr td{flex:1 1;flex-basis:33.33333%}.color-token-table .page-table tbody tr td:last-child{padding-right:.5rem}.color-token-table .page-table tbody tr td:not(:last-child){border-right:1px solid #dcdcdc}.component-docs>h2+div>h3:first-child,.component-docs>h2+div>h4:first-child{padding-top:0!important}body .component-docs pre{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.32px;background:#171717;padding:.5rem 3rem .5rem 1rem!important;margin-bottom:1.5rem!important;margin-left:-1rem;border-radius:0;color:#fff}body .component-docs code[class*=language-]{background:transparent}.component-docs h1{display:none}.component-docs .token:last-of-type{margin-right:0}.component-docs h2{margin-top:5rem;margin-bottom:1rem;font-size:1.75rem;font-weight:400;line-height:129%;letter-spacing:0;font-size:calc(1.75rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h2{font-size:1.75rem;line-height:125%;font-size:calc(1.75rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h2{font-size:2rem}}.component-docs h3{margin-top:4rem;margin-bottom:1rem;font-size:1.25rem;font-weight:400;line-height:130%;letter-spacing:0;font-size:calc(1.25rem + 0*(100vw - 20rem)/62)}@media (min-width:82rem){.component-docs h3{font-size:1.25rem;line-height:125%;font-size:calc(1.25rem + 0.25*(100vw - 82rem)/17)}}@media (min-width:99rem){.component-docs h3{font-size:1.5rem}}.component-docs h4{margin-top:.75rem;font-size:1rem;font-weight:600;line-height:1.375rem;letter-spacing:0}.component-docs h5,.component-docs h6{margin-top:.75rem;font-size:.875rem;font-weight:600;line-height:1.125rem;letter-spacing:.16px}.component-example{width:100%;max-width:100%;display:block;color:#fff;margin-bottom:1.5rem}.page-content>div>div:first-child .component-example__heading-label{padding-bottom:1.5rem}.component-example__live{display:flex;align-items:center;justify-content:center;width:100%;min-height:12.5rem;position:relative;padding:2rem 2rem 2.5rem;margin:0;background-color:#fff;color:#171717;border:1rem solid #fff}.component-example__live.component-example__live--light{background-color:#f3f3f3}.component-example__live.component-example__live--rendered{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.component-example__view-full-render{position:absolute;right:0;bottom:0;color:#565656;font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;padding:.5rem 1rem;z-index:9999}.component-example__view-full-render--react{z-index:9099}.component-toolbar{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;display:flex;align-items:center;height:3rem;background:#171717;color:#fff;border-bottom:1px solid #3d3d3d}.component-toolbar__current{height:100%;display:flex;align-items:center;padding:0 1rem}.component-toolbar__links{display:flex;align-items:center;justify-content:flex-start;flex:2 1}.component-toolbar__links a{position:relative;top:1px;margin-left:1rem;color:#6ea6ff;text-decoration:none;border-bottom:1px solid transparent}.component-toolbar__links a:hover{border-bottom:1px solid #6ea6ff}.component-toolbar__links svg{fill:#6ea6ff;position:relative;top:3px;margin-top:-2px;margin-left:.25rem}.component-toolbar__switcher{display:flex;align-items:center;border-left:1px solid #3d3d3d;height:100%;padding-left:1rem;padding-right:1rem}.component-toolbar__switcher .bx--form-item{margin-right:0;margin-bottom:0}.component-toolbar__switcher .bx--radio-button__label{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;color:#fff}.component-toolbar__switcher .bx--radio-button-group{margin-top:0}.component-toolbar__switcher .radioButtonWrapper:last-child{padding-left:1rem}.component-toolbar__switcher .bx--radio-button__appearance{background-color:transparent;border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance{border-color:#fff}.component-toolbar__switcher .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance:before{background-color:#fff}.component-overview{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start}.component-item{width:33%;background:#fff;position:relative;-webkit-transition:.11s;transition:.11s;width:100%;border-bottom:1px solid #dcdcdc}.component-item:hover{background:#e5e5e5}.component-item:active{background:#bebebe}.component-item:last-child{border:none}@media (min-width:42rem){.component-item{width:50%;border-right:1px solid #dcdcdc}.component-item:nth-child(2n+2){border-right:none}.component-item:last-child,.component-item:nth-last-child(2){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:66rem){.component-item{width:33.33%}.component-item:nth-child(2n+2){border-right:1px solid #dcdcdc}.component-item:nth-child(3n+3){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3){border-bottom:none}.component-item:last-child{border-right:none}}@media (min-width:82rem){.component-item{width:25%}.component-item:nth-child(3n+3){border-right:1px solid #dcdcdc}.component-item:nth-child(4n+4){border-right:none}.component-item:last-child,.component-item:nth-last-child(2),.component-item:nth-last-child(3),.component-item:nth-last-child(4){border-bottom:none}.component-item:last-child{border-right:none}}.component-item__link{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.component-item__img{margin:0;display:block}.component-name{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;color:#171717;text-decoration:none;text-align:left;display:flex;position:absolute;top:1rem;left:1rem}.component-status .bx--tag{white-space:nowrap}.component-status .page-table td{padding:.75rem 1rem}.component-status__key{margin-top:5rem}.component-status__key .page-h4{margin-bottom:1.5rem}.component-status--unavailable{padding-left:.75rem}.glossary-entry{padding-top:2.25rem}.glossary-entry__main-heading span{text-transform:lowercase}.glossary-entry__subtext{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;color:#565656;font-style:italic;margin-top:.25rem}.glossary-nav{position:absolute;right:1.5rem;display:none;flex-direction:column;align-items:center;justify-content:flex-start;line-height:1.5;padding:10rem 0 0}@media (min-width:66rem){.glossary-nav{display:flex}}.glossary-nav--fixed{position:fixed;top:0}.glossary .bx--list__item{list-style-type:none!important;padding:0;width:100%;-webkit-transition:all .11s;transition:all .11s;display:block}.glossary .bx--list__item a{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;width:1.5rem;height:1.5rem;padding:.0625rem 0 0;display:block;text-align:center;text-decoration:none;color:#565656}.glossary .bx--list__item:hover a{color:#171717;background:#e5e5e5}.glossary .bx--list__item.glossary-nav__item--active a{color:#171717;background:#dcdcdc}.typography-table{background:#fff;border-bottom:.0625rem solid #dcdcdc}.typography-table table tbody tr{border:none}.typography-table table thead th{font-size:.75rem;font-weight:400;line-height:1rem;letter-spacing:.32px;border:none;color:#8c8c8c;padding:1rem 0;text-align:left}.typography-table table tbody td{white-space:nowrap;border:none;padding-bottom:auto;color:#171717;vertical-align:top}.typography-table table tbody td:first-child{font-size:.75rem;padding:0 3rem 0 0}@media (min-width:42rem){.typography-table table tbody td:first-child{padding-right:7rem}}@media (min-width:66rem){.typography-table table tbody td:first-child{padding-right:2rem}}@media (min-width:82rem){.typography-table table tbody td:first-child{padding-right:3rem}}.typography-table table tbody tr:first-child td:nth-child(2){font-size:.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(2) td:nth-child(2){font-size:.875rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(3) td:nth-child(2){font-size:1rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(4) td:nth-child(2){font-size:1.125rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(5) td:nth-child(2){font-size:1.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(6) td:nth-child(2){font-size:1.5rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(7) td:nth-child(2){font-size:1.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(8) td:nth-child(2){font-size:2rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(9) td:nth-child(2){font-size:2.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(10) td:nth-child(2){font-size:2.625rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(11) td:nth-child(2){font-size:3rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(12) td:nth-child(2){font-size:3.375rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(13) td:nth-child(2){font-size:3.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(14) td:nth-child(2){font-size:4.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(15) td:nth-child(2){font-size:4.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(16) td:nth-child(2){font-size:5.25rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:nth-child(17) td:nth-child(2){font-size:5.75rem;white-space:nowrap;width:100%;line-height:70%;padding-right:0}.typography-table table tbody tr:first-child td:first-child{padding-bottom:.36rem}.typography-table table tbody tr:nth-child(2) td:first-child{padding-bottom:.38rem}.typography-table table tbody tr:nth-child(3) td:first-child{padding-bottom:.6rem}.typography-table table tbody tr:nth-child(4) td:first-child{padding-bottom:.74rem}.typography-table table tbody tr:nth-child(5) td:first-child{padding-bottom:1rem}.typography-table table tbody tr:nth-child(6) td:first-child{padding-bottom:1.4rem}.typography-table table tbody tr:nth-child(7) td:first-child{padding-bottom:1.625rem}.typography-table table tbody tr:nth-child(8) td:first-child{padding-bottom:2rem}.typography-table table tbody tr:nth-child(9) td:first-child{padding-bottom:2.5rem}.typography-table table tbody tr:nth-child(10) td:first-child{padding-bottom:3rem}.typography-table table tbody tr:nth-child(11) td:first-child{padding-bottom:3.5rem}.typography-table table tbody tr:nth-child(12) td:first-child,.typography-table table tbody tr:nth-child(13) td:first-child{padding-bottom:4rem}.typography-table table tbody tr:nth-child(14) td:first-child{padding-bottom:4.5rem}.typography-table table tbody tr:nth-child(15) td:first-child{padding-bottom:5rem}.typography-table table tbody tr:nth-child(16) td:first-child{padding-bottom:5.5rem}.typography-table table tbody tr:nth-child(17) td:nth-child(2){padding-bottom:2rem}.type-weight{background:#fff;padding:1rem;margin-bottom:1.5rem}.type-weight p{font-size:3rem;padding:0;line-height:1.25;color:#171717}.type-weight .bx--type-italic{font-style:italic}.type-weight .bx--type-semibold{font-weight:600}.type-weight .bx--type-regular{font-weight:400}.type-weight .bx--type-light{font-weight:300}.homepage-video--main{width:180%;height:100%;position:absolute;top:0;right:0}@media (min-width:42rem){.homepage-video--main{width:100%}}.homepage-video--wrapper{width:100%;height:100%;position:absolute;top:0;right:0;padding-bottom:56.25%}.homepage-video--wrapper iframe{position:absolute;top:-20%;right:0}@media (max-width:1260px){.homepage-video--wrapper iframe{top:-10%}}@media (max-width:1100px){.homepage-video--wrapper iframe{top:0}}.homepage--video--overlay{position:absolute;width:100%;height:100%;top:0;left:0;background:#000;opacity:.6}.homepage-video--controls{position:absolute;bottom:.875rem;left:1rem;height:1.5rem;width:1.5rem;background:transparent;outline:none;border:none;padding:0;z-index:10}@media (min-width:66rem){.homepage-video--controls{left:271px}}.homepage-video--controls:focus{outline:2px solid #0062ff;outline-offset:-2px}.homepage-video--controls .mouseIn,.homepage-video--controls .mouseOut{fill:#fff}.homepage-video--controls .cls-1{fill:none}.bx--typeset-style-container{position:relative;padding:0 .5rem;margin-bottom:3rem}@media (min-width:42rem){.bx--typeset-style-container{padding:0;left:0;margin-right:0}}@media (min-width:66rem){.bx--typeset-style-container{margin-top:0;left:.5rem;margin-right:.5rem}}.bx--typeset-style-container .page-h4{margin-top:3rem;display:inline-block}.bx--typeset-style-container .page-h4:before{display:none}.bx--typeset-style-container .page-h4:first-letter{text-transform:uppercase}.bx--typeset-style-button{background-color:transparent;border:none;border-radius:0;height:100%;margin:0;padding:0 1rem;text-transform:capitalize;z-index:4}.bx--typeset-style-button:hover{background-color:#dcdcdc}.bx--typeset-style-button.selected{background-color:#171717;color:#f3f3f3}.bx--typeset-style-button.selected:hover{background-color:#171717}.bx--typeset-style-button:focus{outline:2px solid #0062ff;outline-offset:0;position:relative}.bx--typeset-style-controls{height:100%;left:0;position:absolute!important;top:0;width:100vw}@media (min-width:42rem){.bx--typeset-style-controls{margin-left:0;width:100%}}.bx--typeset-style-controls-sticky{align-items:center;background-color:#fff;width:auto;z-index:2;box-sizing:content-box}.bx--typeset-style-controls-sticky-stuck{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{content:"";position:absolute;background:#f3f3f3;height:6rem;width:1rem}@media (min-width:42rem){.bx--typeset-style-controls-sticky-stuck:after,.bx--typeset-style-controls-sticky-stuck:before{height:4rem}}.bx--typeset-style-controls-sticky-stuck:before{left:-2rem}.bx--typeset-style-controls-sticky-stuck:after{right:-2rem}.bx--typeset-style-nav-shiv{width:100%;height:1rem}.bx--typeset-style-breakpoint-controls{height:3rem;align-items:center;display:flex;overflow-x:auto;white-space:nowrap;padding-left:1rem;padding-right:0;width:100%}@media (min-width:42rem){.bx--typeset-style-breakpoint-controls{width:62.5%}}@media (min-width:66rem){.bx--typeset-style-breakpoint-controls{width:50%}}.bx--typeset-style-screen-width-label{padding-right:1rem;display:inline-block}.bx--typeset-style-screen-controls{align-items:center;height:3rem;border-top:1px solid #dcdcdc;padding-left:1rem;padding-right:1rem;display:grid;grid-template-columns:auto 1fr auto;width:100%}@media (min-width:42rem){.bx--typeset-style-screen-controls{border-top:none;border-left:1px solid #dcdcdc;width:37.5%}}@media (min-width:66rem){.bx--typeset-style-screen-controls{width:50%}}.bx--typeset-style-screen-label{height:auto;margin-bottom:0;min-width:3.4rem;text-align:right}.bx--typeset-style-input{margin:0 1.25rem 0 0;width:100%}.bx--typeset-style-toggle-container{position:relative;z-index:1}.bx--typeset-style-toggle-button{background-color:#fff;box-shadow:inset 0 -1px 0 0 #dcdcdc;color:#171717;border:none;cursor:pointer;margin:0;height:3rem}.bx--typeset-style-toggle-button input{margin:0;visibility:hidden;width:0}.bx--typeset-style-toggle-button.checked{background-color:#171717;color:#fff}.bx--typeset-style-toggle-button.checked:hover{background-color:#171717}.bx--typeset-style-toggle-button:hover{background-color:#dcdcdc}.bx--typeset-style-button-controls-container{height:100%;margin-left:auto}.bx--typeset-style-breakpoints-container{position:relative;margin-top:1rem}@media (min-width:42rem){.bx--typeset-style-breakpoints-container{margin-top:0}}.bx--typeset-style-section-spacer{margin-bottom:calc(1rem + 1px)}.bx--typeset-style-title-shiv{padding-top:1rem;background-color:#f3f3f3;position:relative}.bx--typeset-style-group-title-container{background-color:#fff;height:3rem;padding:1rem;border-bottom:1px solid #dcdcdc;display:flex;flex-direction:row;align-content:center}.bx--typeset-style-group-title{margin:0;padding:0}.bx--input-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:0;position:relative;cursor:pointer;padding-top:.5rem;padding-bottom:.5rem;width:100%}@supports (-ms-ime-align:auto){.bx--input-range{padding-top:0;padding-bottom:0}}.bx--input-range::-webkit-slider-runnable-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-moz-range-track{background:#dcdcdc;height:.0625rem}.bx--input-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-moz-range-thumb{-moz-appearance:none;appearance:none;background:#000;border:0;border-radius:100%;height:.875rem;margin-top:-.4375rem;width:.875rem;-webkit-transition-property:height,width,margin;transition-property:height,width,margin;transition-duration:.1s;transition-timing-function:cubic-bezier(.2,0,.38,.9)}.bx--input-range::-ms-track{background:transparent;border-color:transparent;border-width:.875rem 0;color:transparent;height:.0625rem}.bx--input-range::-ms-fill-lower,.bx--input-range::-ms-fill-upper{background:#000}.bx--input-range::-ms-thumb{appearance:none;background:#000;border-radius:100%;border:0;height:.875rem;margin-top:-.0625rem;width:.875rem}.bx--input-range:after{background:#000;content:"";position:absolute;height:.0625rem;width:var(--track-width)}.bx--input-range:active::-webkit-slider-thumb,.bx--input-range:hover::-webkit-slider-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-moz-range-thumb,.bx--input-range:hover::-moz-range-thumb{margin-top:-.5625rem;width:1.125rem;height:1.125rem}.bx--input-range:active::-ms-thumb,.bx--input-range:hover::-ms-thumb{margin-top:-.125rem;width:1.125rem;height:1.125rem}.bx--input-range:focus{outline:2px solid #0062ff;outline-offset:0}.bx--sticky-container{position:-webkit-sticky;position:sticky;z-index:5;top:0;-webkit-transition-property:top;transition-property:top;-webkit-transition-duration:.24s;transition-duration:.24s;-webkit-transition-timing-function:cubic-bezier(.2,0,.38,.9);transition-timing-function:cubic-bezier(.2,0,.38,.9)}div[class*=PageHeader-module--page-header--shifted]+div>div>.bx--sticky-container-visible{top:3rem}.bx--sticky-container-visible{top:6rem}.bx--sticky-container-hidden.bx--sticky-container-banner{top:2.5rem}.bx--sticky-container-secondary{z-index:4}.bx--sticky-container-secondary-hidden{top:3rem}.bx--sticky-container-secondary-hidden.bx--sticky-container-banner{top:5.5rem}.bx--sticky-container-secondary-visible{top:6rem}.bx--sticky-container-secondary-visible.bx--sticky-container-banner{top:8.5rem}.bx--typeset-example,.bx--typeset-example-container{margin-top:1rem}.bx--typeset-example-row{background-color:#fff;min-height:13.5rem}.bx--typeset-example-group-title{background-color:#dcdcdc;height:4rem}.bx--typeset-example-description{padding:1rem 15% 1rem 1rem;overflow:hidden}@media (min-width:42rem){.bx--typeset-example-description{width:62.5%}}@media (min-width:66rem){.bx--typeset-example-description{width:66.7%}}.bx--typeset-example-specs{padding:1rem;width:33.3%}@media (min-width:42rem){.bx--typeset-example-specs{border-left:1px solid #dcdcdc}}.bx--typeset-example-specs-text{margin-bottom:.5rem}.bx--typeset-example-code-style{display:block;margin-top:.5rem}.PageHeader-module--bx--text-truncate--end--mZWeX,.PageHeader-module--bx--text-truncate--front--3zvrI{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageHeader-module--bx--text-truncate--front--3zvrI{direction:rtl}.PageHeader-module--page-header--3hIan{--height:20rem;height:20rem;height:var(--height);background:#000;color:#fff;width:100%;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid #3d3d3d}.PageHeader-module--with-tabs--3nKxA{height:calc(var(--height) - 3rem)}.PageHeader-module--text--o9LFq{font-size:2.625rem;font-weight:300;line-height:119%;letter-spacing:0;font-size:calc(2.625rem + 0*(100vw - 20rem)/22);margin-bottom:2rem;margin-top:auto}@media (min-width:42rem){.PageHeader-module--text--o9LFq{font-size:2.625rem;font-size:calc(2.625rem + 0.75*(100vw - 42rem)/24)}}@media (min-width:66rem){.PageHeader-module--text--o9LFq{font-size:3.375rem;font-size:calc(3.375rem + 0.375*(100vw - 66rem)/16)}}@media (min-width:82rem){.PageHeader-module--text--o9LFq{font-size:3.75rem;line-height:117%;font-size:calc(3.75rem + 1*(100vw - 82rem)/17)}}@media (min-width:99rem){.PageHeader-module--text--o9LFq{line-height:113%;font-size:4.75rem}}.EditLink-module--bx--text-truncate--end--2pqje,.EditLink-module--bx--text-truncate--front--3_lIE{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.EditLink-module--bx--text-truncate--front--3_lIE{direction:rtl}.EditLink-module--link--1qzW3{font-size:.875rem;font-weight:400;line-height:1.125rem;letter-spacing:.16px;-webkit-transition:color .11s;transition:color .11s;color:#565656}.EditLink-module--link--1qzW3:hover{color:#171717}.EditLink-module--row--1B9Gk{position:relative;top:9rem}.container--dark .EditLink-module--link--1qzW3,.container--dark .EditLink-module--link--1qzW3:hover{color:#fff}.PageTabs-module--bx--text-truncate--end--267NA,.PageTabs-module--bx--text-truncate--front--3xEQF{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.PageTabs-module--bx--text-truncate--front--3xEQF{direction:rtl}.PageTabs-module--tabs-container--8N4k0{margin:0;width:100%;background:#000;position:-webkit-sticky;position:sticky;top:3rem;z-index:6000}.PageTabs-module--list--3eFQc{display:flex;flex-direction:row;width:100%;list-style:none;padding:0;overflow-x:auto;scrollbar-width:none}.PageTabs-module--list-item--nUmtD{display:flex}.PageTabs-module--link--1mDJ1{font-size:1rem;font-weight:400;line-height:1.375rem;letter-spacing:0;padding:13px 1rem 0;text-decoration:none;line-height:1;color:#fff;white-space:nowrap;border-top:3px solid transparent;height:3rem;-webkit-transition:all .15s cubic-bezier(.2,0,.38,.9);transition:all .15s cubic-bezier(.2,0,.38,.9)}@media (min-width:42rem){.PageTabs-module--link--1mDJ1{padding-right:3rem}}.PageTabs-module--link--1mDJ1:hover{background:#353535}.PageTabs-module--selected-item--YPVr3 .PageTabs-module--link--1mDJ1{border-top:3px solid #0062ff;background:#3d3d3d}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1{color:#bebebe}.PageTabs-module--list-item--nUmtD:not(.PageTabs-module--selected-item--YPVr3) .PageTabs-module--link--1mDJ1:hover{color:#fff}
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-k9g1kt4db39-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text.</div>
<div data-dropdown data-value
class="bx--dropdown ">
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-k9g1kt4db39-menu" aria-labelledby="example-k9g1kt4db39-label example-k9g1kt4db39-value" type="button">
<span class="bx--dropdown-text__inner" id="example-k9g1kt4db39-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-k9g1kt4db39-menu" role="menu" tabindex="0" id="example-k9g1kt4db39-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-k9g1kt4db39-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-k9g1kt4db39-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-b9gnkc6qz1-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown ">
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-b9gnkc6qz1-menu" aria-labelledby="example-b9gnkc6qz1-label example-b9gnkc6qz1-value" type="button">
<span class="bx--dropdown-text__inner" id="example-b9gnkc6qz1-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" role="menu" tabindex="0" id="example-b9gnkc6qz1-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-b9gnkc6qz1-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-b9gnkc6qz1-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-x4kn35dqtj-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
<div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">Optional helper text
here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--disabled">
<button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-x4kn35dqtj-menu" aria-labelledby="example-x4kn35dqtj-label example-x4kn35dqtj-value" type="button">
<span class="bx--dropdown-text__inner" id="example-x4kn35dqtj-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<!-- Note: remove `tabindex` from disabled dropdown lists -->
<ul class="bx--dropdown-list" id="example-x4kn35dqtj-menu" role="menu" id="example-x4kn35dqtj-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-x4kn35dqtj-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-x4kn35dqtj-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-ivv1ffchne-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text
here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--invalid "
data-invalid>
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ivv1ffchne-menu" aria-labelledby="example-ivv1ffchne-label example-ivv1ffchne-value" type="button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
<span class="bx--dropdown-text__inner" id="example-ivv1ffchne-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-ivv1ffchne-menu" role="menu" tabindex="0" id="example-ivv1ffchne-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ivv1ffchne-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ivv1ffchne-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
<div class="bx--form-requirement">
This is not a validation message
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-k9g1kt4db39-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text.</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--up ">
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-k9g1kt4db39-menu" aria-labelledby="example-k9g1kt4db39-label example-k9g1kt4db39-value" type="button">
<span class="bx--dropdown-text__inner" id="example-k9g1kt4db39-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-k9g1kt4db39-menu" role="menu" tabindex="0" id="example-k9g1kt4db39-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-k9g1kt4db39-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-k9g1kt4db39-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-b9gnkc6qz1-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--up ">
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-b9gnkc6qz1-menu" aria-labelledby="example-b9gnkc6qz1-label example-b9gnkc6qz1-value" type="button">
<span class="bx--dropdown-text__inner" id="example-b9gnkc6qz1-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" role="menu" tabindex="0" id="example-b9gnkc6qz1-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-b9gnkc6qz1-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-b9gnkc6qz1-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-b9gnkc6qz1-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-x4kn35dqtj-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
<div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">Optional helper text
here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--up bx--dropdown--disabled">
<button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-x4kn35dqtj-menu" aria-labelledby="example-x4kn35dqtj-label example-x4kn35dqtj-value" type="button">
<span class="bx--dropdown-text__inner" id="example-x4kn35dqtj-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<!-- Note: remove `tabindex` from disabled dropdown lists -->
<ul class="bx--dropdown-list" id="example-x4kn35dqtj-menu" role="menu" id="example-x4kn35dqtj-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-x4kn35dqtj-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-x4kn35dqtj-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper ">
<span id="example-ivv1ffchne-label" class="bx--label">Dropdown label</span>
<div class="bx--form__helper-text">Optional helper text
here; if message is more than one line text
should wrap (~100 character count maximum)</div>
<div data-dropdown data-value
class="bx--dropdown bx--dropdown--invalid bx--dropdown--up "
data-invalid>
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ivv1ffchne-menu" aria-labelledby="example-ivv1ffchne-label example-ivv1ffchne-value" type="button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
<span class="bx--dropdown-text__inner" id="example-ivv1ffchne-value"> Dropdown option </span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-ivv1ffchne-menu" role="menu" tabindex="0" id="example-ivv1ffchne-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ivv1ffchne-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ivv1ffchne-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
<div class="bx--form-requirement">
This is not a validation message
</div>
</div>
</div>
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
<span id="example-k9g1kt4db39-label" class="bx--label">Dropdown label</span>
<div data-dropdown data-dropdown-type="inline" data-value
class="bx--dropdown bx--dropdown--inline">
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-k9g1kt4db39-menu" aria-labelledby="example-k9g1kt4db39-label example-k9g1kt4db39-value" type="button">
<span class="bx--dropdown-text__inner" id="example-k9g1kt4db39-value">Inline Dropdown label</span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-k9g1kt4db39-menu" role="menu" tabindex="0" id="example-k9g1kt4db39-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-k9g1kt4db39-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-k9g1kt4db39-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-k9g1kt4db39-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
<span id="example-x4kn35dqtj-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
<div data-dropdown data-dropdown-type="inline" data-value
class="bx--dropdown bx--dropdown--inline bx--dropdown--disabled">
<button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-x4kn35dqtj-menu" aria-labelledby="example-x4kn35dqtj-label example-x4kn35dqtj-value" type="button">
<span class="bx--dropdown-text__inner" id="example-x4kn35dqtj-value">Inline Dropdown label</span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<!-- Note: remove `tabindex` from disabled dropdown lists -->
<ul class="bx--dropdown-list" id="example-x4kn35dqtj-menu" role="menu" id="example-x4kn35dqtj-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-x4kn35dqtj-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-x4kn35dqtj-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-x4kn35dqtj-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline bx--dropdown__wrapper--inline--invalid">
<span id="example-ivv1ffchne-label" class="bx--label">Dropdown label</span>
<div data-dropdown data-dropdown-type="inline" data-value
class="bx--dropdown bx--dropdown--invalid bx--dropdown--inline"
data-invalid>
<button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ivv1ffchne-menu" aria-labelledby="example-ivv1ffchne-label example-ivv1ffchne-value" type="button">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
<span class="bx--dropdown-text__inner" id="example-ivv1ffchne-value">Inline Dropdown label</span>
<span class="bx--dropdown__arrow-container">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</span>
</button>
<ul class="bx--dropdown-list" id="example-ivv1ffchne-menu" role="menu" tabindex="0" id="example-ivv1ffchne-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ivv1ffchne-label">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ivv1ffchne-item0">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item2">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item3">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item4">Option 5</a>
</li>
<li data-option data-value="loremipsum" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ivv1ffchne-item5">An example option that is really long to show what should be done to handle long text</a>
</li>
</ul>
<div class="bx--form-requirement">
This is not a validation message
</div>
</div>
</div>
</div>
This component is currently only available in our React and Angular libraries.
This component is currently only available in our React and Angular libraries.
This component is currently only available in our React and Angular libraries.
This component is currently only available in our React and Angular libraries.
Use these modifiers with .bx--dropdown
class.
Name | Description |
---|---|
.bx--dropdown--auto-width |
Allows the width of the dropdown to be equal to the width of the content inside it instead of being 100% width of the container. |
.bx--dropdown--selected |
Applies specific styles for a selected dropdown item. |
.bx--dropdown--open |
Applies specific styles when the dropdown is opened |
.bx--dropdown--up |
Applies style to have the dropdown slide up instead of down |
import { Dropdown } from 'carbon-components';
carbon-components.min.js
)var Dropdown = CarbonComponents.Dropdown;
// `#my-dropdown` is an element with `[data-dropdown]` attribute
Dropdown.create(document.getElementById('my-dropdown'));
Name | Params | Description |
---|---|---|
release |
Deletes the instance | |
getCurrentNavigation |
Returns the currently highlighted element | |
navigate |
direction: Number |
Moves the focus up or down |
select |
itemToSelect: Object |
Handles clicking on the dropdown options, doing the following: Changing text to selected option, removing selected option from options when selected, and emitting custom events |
setCloseOnBlur |
Sets an event handler to document for "close on blue" behavior |
// `#my-dropdown` is an element with `[data-dropdown]` attribute
var dropdownInstance = Dropdown.create(document.getElementById('my-dropdown'));
// `#my-dropdown-link-1` is one of the `<a>`s with `bx--dropdown-link` class
dropdownInstance.select(document.getElementById('my-dropdown-link-1'));
Option | Default Selector | Description |
---|---|---|
selectorInit |
[data-dropdown] |
The selector to find the dropdown component |
selectorItem |
.bx--dropdown-link |
The selector to find the clickable area in the selected dropdown item |
selectorItemSelected |
.bx--dropdown--selected |
The selector to find the clickable area in the selected dropdown item |
selectorItemHidden |
[hidden],[aria-hidden="true"] |
The selector to find hidden dropdown items. Used to skip dropdown items for keyboard navigation. |
classSelected |
bx--dropdown--selected |
The class for the selected dropdown item. |
Event Name | Description |
---|---|
dropdown-beingselected |
Custom event fired before a dropdown item is selected |
dropdown-selected |
Custom event fired after a dropdown item is selected |
document.addEventListener('dropdown-beingselected', function(evt) {
if (!myApplication.shouldDropdownItemBeSelected(evt.target)) {
evt.preventDefault();
}
});
document.addEventListener('dropdown-selected', function(evt) {
myAnalyticsLibrary.send({
action: 'Dropdown item selected',
id: evt.target.id,
});
});