CINXE.COM

<!doctype html> <html id="html" lang="en"> <head> <meta charset="utf-8" /><script type="text/html" id="sf-tracking-consent-manager"> <div id="tracking-consent-dialog" style="display:none" /> </script><script type="text/javascript" src="/WebResource.axd?d=DzHrpQl5URXarFHAtrmzFsPwWIExaUeLHf3gTuslFxiRsjc9gU89IWbLw9lFnSTXl5qZVz-0iBHHB3aQBiGWPYzKfk3ndhT8iH1RSf_M6Sk7X3EWbQzPMVpb-rxAUHFQlncyLjOo3RP6E9HfRXn18roSCYCGCRaVqv9jyNWgJTH95Urh0&t=638646398980000000"> </script> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="/favicon.ico?v=rebv1" /> <link href="https://dtzbdy9anri2p.cloudfront.net/cache/db8bfa2809926fc82a373999868c8173f67d084e/telerik/css/style.css" rel="stylesheet" type="text/css"><link href="https://dtzbdy9anri2p.cloudfront.net/cache/b98ff496f0e7db023319c18cc1dd0a6bf827fc22/telerik/css/kendo.css" rel="stylesheet" type="text/css"> <title> JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI </title> <meta property="og:title" content="JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI" /><meta property="og:description" content="Quickly build eye-catching web apps using Kendo UI's ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue." /><meta property="og:url" content="https://www.telerik.com/kendo-ui" /><meta property="og:type" content="website" /><meta property="og:site_name" content="Telerik.com" /><style type="text/css" media="all">.DC-scroller a,.DC-scroller a.is-active:hover,.DC-scroller.DC-scroller--light a.is-active:hover{text-decoration:none}@keyframes fade-in{0{opacity:0}100%{opacity:1}}.DC-scroller{position:fixed;z-index:9999999;top:50%;transform:translateY(-50%);left:40px;backface-visibility:hidden;transition:opacity .3s;opacity:0;animation:.8s 1s forwards fade-in}.DC-scroller a{display:inline-block;float:left;clear:both;font:600 13px/1.3 Metric,sans-serif;text-transform:uppercase;letter-spacing:1px!important;color:#fff;padding:3px 10px;border-radius:15px;border:1px solid transparent;margin-bottom:10px;transition:.3s}.DC-scroller a.is-active{color:#fff;border-color:inherit}.DC-scroller a:hover{text-decoration:underline}#html body.is-scrolling{pointer-events:none}.DC-scroller.DC-scroller--light a{color:#3d57d8}.DC-scroller.DC-scroller--light a.is-active{color:#000}.DC-scroller.DC-scroller--light a:hover{text-decoration:underline}#html .Btn--round2{color:#fff!important}@media (max-width:1560px){.DC-scroller{display:none}}[tabindex="-1"]{outline: 0}</style><style type="text/css" media="all">.flip-box{background-color:transparent;perspective:1000px;flex-basis:270px;cursor:pointer}.flip-box-inner{position:relative;width:100%;height:100%;transition:transform .5s ease-in-out;transform-style:preserve-3d}.flip-box:hover .flip-box-inner{transform:rotateY(180deg)}.flip-box-front,.flip-box-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-box-back{transform:rotateY(180deg)}@media only screen and (max-width:590px){#html .flip-box-back p{font-size:14px !important;margin-top:10px !important}}@media all and (-ms-high-contrast:none){*::-ms-backdrop,.flip-box-front{opacity:1;transition:all .15s ease-in-out}*::-ms-backdrop,.flip-box:hover .flip-box-front{opacity:0}*::-ms-backdrop,.flip-box-back{opacity:0;transition:all .25s ease-in-out}*::-ms-backdrop,.flip-box:hover .flip-box-back{backface-visibility:visible;opacity:1}}.u-bg-blue-link{background-color:#3d57d8}@media only screen and (max-width:1280px){.flip-box{flex-basis:240px}}@media only screen and (max-width:800px){.flip-box{flex-basis:270px}}@media only screen and (max-width:600px){.flip-box{flex-basis:230px}}.sfPageEditorWrp .flip-box:hover .flip-box-inner,.sfPageEditorWrp .flip-box-front,.sfPageEditorWrp .flip-box-back{transform:none !important;position:relative !important;display:block !important}</style><style type="text/css" media="all">.u-h90{height:90%!important}.u-bg-blue--gradient--short{background-image:linear-gradient(180deg,#202676,#151950 300px)!important}.u-bg-blue-link{background-color:#3d57d8}.u-bg-blue--gradient--hero{background-image:linear-gradient(180deg,#1b1f62,#202676 100px)!important}.u-bg-blue--gradient--custom{background-image:linear-gradient(180deg,#304ca7,#282f89) !important}.Section--blue-baby{background-color:rgba(147,217,243,1)}.u-ff-mono{font-family:"Inconsolata",Menlo,Courier New,Courier,Mono,monospace}.Text--grey-custom{color:#f5f6f7}.u-p1h{padding:15px!important}.u-pt1h{padding-top:15px!important}@media only screen and (max-width:800px){.u-m-h85{height:85%!important}}</style><style type="text/css" media="all">@media only screen and (max-width:1280px){.Sctn-awards{background-color:#282f89!important}}</style><style type="text/css" media="all">.Navigator-links{min-height:auto}.Navigator-links a,.Navigator-links a.is-active{flex:1 1 auto;padding:12px 20px !important}.Navigator-links a:before{content:"";display:inline-block;top:0;left:0;width:30px;height:30px;margin-right:7px;vertical-align:bottom;background-size:cover}.Navigator-links a[href*=jquery]:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill:%23005099%7D%3C/style%3E%3C/defs%3E%3Cg style='opacity:.997' transform='translate(1.124 .5)'%3E%3Ccircle cx='15' cy='15' r='15' style='fill:%23fff;stroke:%23fff;stroke-width:2px' transform='translate(-.124 .5)'/%3E%3Cpath d='M4.901 9.431c-2.125 3.053-1.863 7.026-.237 10.27.037.079.078.154.118.231.023.049.049.1.076.148a.876.876 0 0 0 .047.083c.026.053.054.1.082.152.053.088.1.178.157.265.03.049.058.1.091.146.055.094.12.187.177.281.026.04.05.079.078.118.083.127.167.253.26.376a.011.011 0 0 0 .007.008c.014.021.03.041.044.06.078.107.156.212.238.315l.087.114c.075.09.148.181.221.271l.085.1c.1.117.2.234.305.349l.005.007a.055.055 0 0 0 .014.013q.151.166.308.327l.1.1c.08.081.16.163.245.243l.1.1c.111.1.223.209.34.309h.005l.058.05q.153.131.31.261a11.351 11.351 0 0 0 .386.3l.138.1c.094.07.192.139.287.207.035.025.069.051.106.074.008.008.019.015.028.022l.281.185.122.08c.146.093.292.183.437.27.042.022.083.045.123.069.108.062.218.125.329.184.061.034.122.063.185.095s.153.083.233.124a.6.6 0 0 1 .055.024c.033.015.064.032.1.047.122.06.248.117.376.174l.076.035c.145.063.289.123.437.181.035.013.069.029.106.041.134.052.273.1.411.153.018.007.033.013.051.018.153.053.3.1.459.15.036.01.073.023.111.033a4.5 4.5 0 0 0 .473.134c10.276 1.873 13.261-6.175 13.261-6.175-2.508 3.265-6.959 4.127-11.175 3.168-.157-.035-.312-.085-.47-.132a1.679 1.679 0 0 1-.115-.035c-.153-.046-.3-.1-.452-.146-.021-.007-.043-.014-.064-.023-.134-.046-.266-.1-.4-.148-.036-.016-.075-.029-.111-.043a10.507 10.507 0 0 1-.431-.181c-.032-.011-.058-.024-.087-.036a20.462 20.462 0 0 1-.362-.17c-.036-.015-.069-.033-.106-.051a7.369 7.369 0 0 1-.28-.143c-.064-.033-.127-.063-.188-.1-.113-.061-.226-.125-.34-.187a1.245 1.245 0 0 0-.113-.065 16.595 16.595 0 0 1-.438-.269c-.042-.026-.08-.053-.118-.079a12.115 12.115 0 0 1-.313-.207l-.1-.072c-.1-.07-.2-.14-.3-.213l-.131-.1c-.089-.069-.178-.137-.266-.208l-.117-.1a11.444 11.444 0 0 1-.333-.28.3.3 0 0 0-.038-.03c-.117-.1-.233-.211-.348-.318-.035-.033-.064-.063-.1-.1-.083-.082-.167-.162-.249-.244l-.1-.1q-.157-.158-.308-.325l-.016-.016a17.587 17.587 0 0 1-.312-.355c-.028-.032-.054-.065-.082-.1l-.226-.277a13.005 13.005 0 0 1-.34-.446c-2.339-3.192-3.184-7.6-1.312-11.211' class='c'/%3E%3Cpath d='M11.498 6.856a7.379 7.379 0 0 0-.256 7.511 9.186 9.186 0 0 0 .679 1.133 5.277 5.277 0 0 0 .792.988c.108.122.225.24.345.36l.09.09a12.118 12.118 0 0 0 .366.339c.134.118.27.231.411.34.033.024.063.05.1.073.139.109.282.213.426.316.006 0 .009.006.016.008.063.045.129.087.2.131.029.019.061.042.09.06.106.069.21.133.319.2l.047.024c.091.055.187.109.282.158.033.02.066.035.1.054.066.033.132.068.2.1l.031.014c.136.067.273.129.409.191l.092.037c.111.048.224.095.336.138.05.016.1.036.144.053.1.037.207.072.31.106l.141.045a3.1 3.1 0 0 0 .449.13c7.931 1.315 9.766-4.794 9.766-4.794a7.536 7.536 0 0 1-8.261 2.627q-.23-.059-.449-.131c-.047-.012-.089-.027-.134-.042a7.771 7.771 0 0 1-.315-.108l-.143-.053c-.113-.045-.226-.088-.336-.137-.033-.014-.064-.025-.09-.038-.141-.061-.28-.126-.416-.192l-.207-.107-.118-.06c-.092-.048-.178-.1-.264-.15l-.063-.034c-.106-.064-.215-.129-.317-.2-.035-.02-.064-.043-.1-.063a9.256 9.256 0 0 1-.209-.137c-.145-.1-.285-.206-.426-.312l-.1-.077a9.526 9.526 0 0 1-3.249-4.616 7.166 7.166 0 0 1 .559-5.75' class='c'/%3E%3Cpath d='M17.045 4.934a4.622 4.622 0 0 0-.369 4.46 6.29 6.29 0 0 0 3.609 3.37c.064.025.129.046.195.069l.089.028a2.5 2.5 0 0 0 .28.082c4.382.846 5.569-2.248 5.888-2.7-1.043 1.5-2.792 1.859-4.939 1.337a5.209 5.209 0 0 1-.517-.161 6.75 6.75 0 0 1-.618-.255 6.5 6.5 0 0 1-1.081-.661c-1.922-1.457-3.112-4.236-1.859-6.5' class='c'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat}.Navigator-links a[href*=angular]:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='6.6' x2='24.84' y1='12.98' y2='21.66' gradientTransform='matrix(1 0 0 -1 0 34)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e40035'/%3E%3Cstop offset='.2' stop-color='%23f60a48'/%3E%3Cstop offset='.4' stop-color='%23f20755'/%3E%3Cstop offset='.5' stop-color='%23dc087d'/%3E%3Cstop offset='.7' stop-color='%239717e7'/%3E%3Cstop offset='1' stop-color='%236c00f5'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='9.27' x2='21.2' y1='26.39' y2='12.77' gradientTransform='matrix(1 0 0 -1 0 34)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff31d9'/%3E%3Cstop offset='1' stop-color='%23ff5be1' stop-opacity='0'/%3E%3C/linearGradient%3E%3CclipPath id='a'%3E%3Cpath d='M4.5 5.17h23v24.34h-23z' style='fill:none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg style='opacity:1'%3E%3Ccircle cx='16' cy='16' r='15' style='fill:%23fff;stroke:%23fff;stroke-width:2px'/%3E%3C/g%3E%3Cg style='clip-path:url(%23a)'%3E%3Cpath d='m27.4 9.21-.83 13-7.89-17.04 8.72 4.04ZM21.93 26l-5.98 3.4L9.98 26l1.23-2.94h9.52L21.94 26Zm-5.98-14.37 3.14 7.61h-6.26l3.13-7.61ZM5.33 22.18l-.83-13 8.74-4.02-7.92 17.03h.01Z' style='fill:url(%23b)'/%3E%3Cpath d='m27.4 9.21-.83 13-7.89-17.04 8.72 4.04ZM21.93 26l-5.98 3.4L9.98 26l1.23-2.94h9.52L21.94 26Zm-5.98-14.37 3.14 7.61h-6.26l3.13-7.61ZM5.33 22.18l-.83-13 8.74-4.02-7.92 17.03h.01Z' style='fill:url(%23c)'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat}.Navigator-links a[href*=react]:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill:%2361dafb%7D%3C/style%3E%3C/defs%3E%3Cg style='opacity:.997' transform='translate(1.124 .5)'%3E%3Ccircle cx='15' cy='15' r='15' style='fill:%23fff;stroke:%23fff;stroke-width:2px' transform='translate(-.124 .5)'/%3E%3Cg transform='translate(-174.546 -75.088)'%3E%3Cpath d='M203.464 90.366c0-1.839-2.3-3.582-5.835-4.663.815-3.6.453-6.463-1.143-7.38a2.481 2.481 0 0 0-1.268-.317v1.262a1.311 1.311 0 0 1 .645.147c.77.441 1.1 2.122.843 4.284a17.218 17.218 0 0 1-.289 1.664 27.426 27.426 0 0 0-3.594-.617 27.606 27.606 0 0 0-2.354-2.83c1.845-1.715 3.577-2.654 4.754-2.654V78c-1.556 0-3.594 1.109-5.654 3.033-2.06-1.913-4.1-3.011-5.654-3.011v1.262c1.171 0 2.909.934 4.754 2.637a26.726 26.726 0 0 0-2.337 2.824 26.427 26.427 0 0 0-3.6.623 17.166 17.166 0 0 1-.294-1.641c-.266-2.162.062-3.843.826-4.29a1.259 1.259 0 0 1 .651-.147v-1.262a2.523 2.523 0 0 0-1.279.317c-1.59.917-1.947 3.775-1.126 7.363-3.52 1.087-5.812 2.824-5.812 4.658s2.3 3.582 5.835 4.663c-.815 3.6-.453 6.463 1.143 7.38a2.488 2.488 0 0 0 1.273.317c1.556 0 3.594-1.109 5.654-3.033 2.06 1.913 4.1 3.011 5.654 3.011a2.523 2.523 0 0 0 1.279-.317c1.59-.917 1.947-3.775 1.126-7.363 3.51-1.082 5.802-2.824 5.802-4.658Zm-7.364-3.775c-.209.73-.47 1.483-.764 2.235-.232-.453-.475-.905-.741-1.358s-.538-.894-.815-1.324a26.18 26.18 0 0 1 2.32.447Zm-2.6 6.027a30.029 30.029 0 0 1-1.364 2.162 29.312 29.312 0 0 1-5.105.005q-.7-1.01-1.37-2.151-.645-1.112-1.177-2.252a30.029 30.029 0 0 1 2.535-4.42 29.312 29.312 0 0 1 5.105-.005q.7 1.01 1.37 2.151.645 1.112 1.177 2.252a28.322 28.322 0 0 1-1.171 2.258Zm1.828-.736c.306.758.566 1.517.781 2.252a25.42 25.42 0 0 1-2.332.453 31.631 31.631 0 0 0 1.555-2.705Zm-5.738 6.038a23.324 23.324 0 0 1-1.573-1.811c.509.023 1.03.04 1.556.04s1.058-.011 1.573-.04a22.088 22.088 0 0 1-1.552 1.812Zm-4.21-3.333c-.8-.119-1.579-.266-2.32-.447.209-.73.47-1.483.764-2.235.232.453.475.905.741 1.358s.541.894.818 1.324Zm4.182-11.777a23.333 23.333 0 0 1 1.573 1.811c-.509-.023-1.03-.04-1.556-.04s-1.058.011-1.573.04a22.088 22.088 0 0 1 1.559-1.811Zm-4.188 3.333c-.277.436-.555.883-.815 1.341s-.5.905-.736 1.358a24.152 24.152 0 0 1-.781-2.252 28.115 28.115 0 0 1 2.335-.446Zm-5.122 7.085c-2-.855-3.3-1.975-3.3-2.864s1.3-2.015 3.3-2.864c.487-.209 1.019-.4 1.568-.572a27.18 27.18 0 0 0 1.273 3.446 26.8 26.8 0 0 0-1.256 3.43 16.834 16.834 0 0 1-1.581-.575Zm3.045 8.087c-.77-.441-1.1-2.122-.843-4.284.062-.532.164-1.092.289-1.664a27.428 27.428 0 0 0 3.594.617 27.607 27.607 0 0 0 2.354 2.83c-1.845 1.715-3.577 2.654-4.754 2.654a1.35 1.35 0 0 1-.637-.152ZM196.724 97c.266 2.162-.062 3.843-.826 4.29a1.259 1.259 0 0 1-.651.147c-1.171 0-2.909-.934-4.754-2.637a26.731 26.731 0 0 0 2.337-2.824 26.428 26.428 0 0 0 3.6-.623 15.837 15.837 0 0 1 .294 1.647Zm2.179-3.775c-.487.209-1.019.4-1.568.572a27.181 27.181 0 0 0-1.273-3.446 26.8 26.8 0 0 0 1.256-3.43c.56.175 1.092.368 1.59.577 2 .855 3.3 1.975 3.3 2.864s-1.302 2.018-3.308 2.867ZM183.912 78.023Z' class='c'/%3E%3Ccircle cx='2.586' cy='2.586' r='2.586' class='c' transform='translate(186.99 87.779)'/%3E%3Cpath d='M195.213 78.006Z' class='c'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat}.Navigator-links a[href*=vue]:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg style='opacity:.997' transform='translate(1.124 .5)'%3E%3Ccircle cx='15' cy='15' r='15' style='fill:%23fff;stroke:%23fff;stroke-width:2px' transform='translate(-.124 .5)'/%3E%3Cpath d='m-147.561 0-2.54 4.4-2.54-4.4h-8.46l11 19.053L-139.1 0Z' style='fill:%2341b883' transform='translate(164.977 7.983)'/%3E%3Cpath d='m-99.61 0-2.54 4.4-2.54-4.4h-4.06l6.6 11.431L-95.551 0Z' style='fill:%2334495e' transform='translate(117.027 7.983)'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat}@media only screen and (max-width:960px){.Navigator-links a:before{vertical-align:middle}}</style><style type="text/css" media="all">.components-nav{border-bottom:1px solid rgba(0,0,0,.1)}[class*="u-bg-"] .u--bordered{border:1px solid #20256c}.tlrk-tabs .tab-container,.tlrk-tabs-react .tab-container,.tlrk-tabs2 .tabs{display:none}.tlrk-tabs .tab-container.is-active,.tlrk-tabs-react .tab-container.is-active,.tlrk-tabs2 .tabs.is-active{display:block}[class*="u-bg-"] .components-nav{background-color:#20256c}.components-nav a{display:inline-block;padding-bottom:20px;margin-right:30px;border-bottom:4px solid transparent;text-decoration:none !important}.components-nav a.is-active{border-bottom:4px solid #3d57d8;color:#000}[class*="u-bg-"] .components-nav a.is-active{color:#fff}@media only screen and (max-width:1540px){.container--wide{margin-left:20px !important;margin-right:20px !important}}@media only screen and (max-width:800px){.components-nav a{width:auto;padding:20px 12px}}</style><style type="text/css" media="all">html body .tlrk{line-height:1.25}.sf_cols{width:100%}</style><meta name="twitter:title" content="JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI" /><meta name="twitter:description" content="Quickly build eye-catching web apps using Kendo UI's ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue." /><meta name="twitter:url" content="https://www.telerik.com/kendo-ui" /><meta property="og:image" content="https://www.telerik.com/sfimages/default-source/logos/telerik1200x630.png" /><meta name="twitter:image" content="https://www.telerik.com/sfimages/default-source/logos/telerik1200x630.png" /><meta property="fb:app_id" content="472070859628573" /><meta name="twitter:site" content="@Telerik" /><meta name="twitter:creator" content="@Telerik" /><meta name="twitter:card" content="summary_large_image" /><script type="application/json" id="sf-insight-metadata"> {"contentMetadata":"{\"Id\":\"17d7f764-6099-4dba-8b75-aa7981fca36c\",\"ContentType\":\"Page\",\"Title\":\"Kendo UI Bundle page\",\"CanonicalTitle\":\"Kendo UI Bundle page\",\"DefaultLanguage\":\"en\",\"CreatedOn\":\"2015-12-28T14:33:43Z\",\"ModifiedOn\":\"2024-10-07T06:54:13Z\",\"SiteName\":\"TelerikCom\",\"PageHierarchies\":[{\"Id\":\"05f972bd-84c4-4824-9326-36a344b7673b\",\"Title\":\"Kendo UI\",\"Parent\":{\"Id\":\"20ce8493-e2c1-4625-8f09-a2a99b6a96d9\",\"Title\":\"Products Taxonomy\"}}],\"PageId\":\"17d7f764-6099-4dba-8b75-aa7981fca36c\"}","videosMetadata":"[]"} </script><script type="application/json" id="sf-insight-settings"> {"apiServerUrl":"https://api.insight.sitefinity.com","apiKey":"76766c2b-82f4-2453-81e5-fd840f3b455b","applicationName":"TelerikCom","trackingCookieDomain":".telerik.com","keepDecTrackingCookieOnTrackingConsentRejection":false,"slidingExpirationForTrackingCookie":false,"maxAgeForTrackingCookieInDays":365,"trackYouTubeVideos":true,"crossDomainTrackingEntries":["store.progress.com","www.telerik.com"],"strategy":"Persist|False","docsHrefTestExpressions":[".*\\/docs\\/.+\\.{1}.+((\\?|\\\u0026)sfvrsn=.+){1}$",".+((\\?|\\\u0026)sf_dm_key=.+){1}$"]} </script><script type="text/javascript" src="/WebResource.axd?d=HtQyXelCu6mzSPcVcvK_BiMPfgaXcXtBpU_p4oPRWdaaTkgqeBOpXuu1TRv9pAGD-FAzjGGeBeqirrj8SJpv3YU7eO6rv9kziBqvktqcdZzC15nZHrag4kg_mMMtSYLloBTL1HIRNuD4Iepyub_zCpOjm9RyH4DXkI1YDpCN_mnfRNsYUjpSNKzgKVak4AN3FQYzZOcP1Z4PmfVVfM_48qg3YrI1&t=638646398980000000"> </script><script src="https://cdn.insight.sitefinity.com/sdk/sitefinity-insight-client.min.3.1.13.js" crossorigin="" async="async"> </script><meta name="description" content="Quickly build eye-catching web apps using Kendo UI's ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue." /></head> <body id="telerik" class="telerik"> <script src='https://d6vtbcy3ong79.cloudfront.net/external-assets/1.0.22/utils/store-lead-data.min.js' type="text/plain" class="optanon-category-2"></script> <aside class="Box Box--ribbon"><p>New Release! <a target="_blank" href="/support/whats-new">Check out</a> the design system assets, new components and robust features for app modernization and <a target="_blank" href="/campaigns/kendo-ui-2024-q4-release-webinar">sign up </a>for the Kendo UI 2024 Q4 release webinar to see them in action!     </p></aside> <link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/css/metric.min.css" as="style" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Light.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Medium.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Regular.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Semibold.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.52/css/index.min.css" as="style"><style id="js-tlrk-nav-inline-styles">.TK-Nav--Loading,.TK-Nav--Loading *{box-sizing:border-box}.TK-Nav--Loading{overflow:hidden;background:#fff;font-family:Metric}.TK-Nav--Loading>.TK-Bar{overflow:hidden;background:#fff}.TK-Nav--Loading .TK-container{max-width:1230px;margin:0 auto;padding:0 30px}.TK-Nav--Loading .TK-TLRK-Brand{margin:0}.TK-Nav--Loading .TK-Dropdown,.TK-Nav--Loading .TK-Nav-Overlay,.TK-Nav--Loading .TK-Print{display:none}.TK-Nav--Loading .TK-Context-Menu,.TK-Nav--Loading .TK-Products-Menu-Item-Button{visibility:hidden}@media only screen and (min-width:1240px){.TK-Nav--Loading,.TK-Nav--Loading>.TK-Bar{height:60px}}@media only screen and (max-width:1239px){.TK-Nav--Loading,.TK-Nav--Loading>.TK-Bar{height:45px}}@media only screen and (max-width:1229px){.TK-Nav--Loading .TK-container{padding:0 20px}}</style><link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/css/metric.min.css" id="js-tlrk-nav-metric" class="is-loading" onload="this.classList.remove('is-loading')" onerror="this.classList.remove('is-loading')"><link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.52/css/index.min.css" id="js-tlrk-nav-styles" class="is-loading" onload="this.classList.remove('is-loading')" onerror="this.classList.remove('is-loading')"><nav id="js-tlrk-nav" class="TK-Nav TK-Nav--Shadow TK-Nav--Loading" data-tlrk-nav-version="3.5.52" data-tlrk-nav-template="nav-kendo-ui-noa-rel-component"><section class="TK-Bar"><div class="TK-container TK-Bar-container"><figure class="TK-TLRK-Brand"><a href="#skip-to-content" id="js-tlrk-skip-link" class="TK-Skip-Link">skip navigation</a> <a href="/" class="TK-TLRK-Logo" aria-label="Go to Homepage"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="60" viewBox="0 0 49 60.3"><path fill="#5ce500" d="M11.2 14.9L0 21.3l17.4 10.1v20.1l11.2-6.4c.5-.3.9-1 .9-1.6V24.4L13 14.9c-.5-.3-1.3-.3-1.8 0z"/><path fill="#5ce500" d="M12.1 48.4V34.5L0 41.5zM25 .2c-.5-.3-1.3-.3-1.8 0L10.7 7.4l24.1 13.9v27.9L47.3 42c.5-.3.9-1 .9-1.6V13.6L25 .2z"/></svg></a></figure><ul class="TK-Products-Menu"><li class="TK-Products-Menu-Item TK-Static"><button type="button" class="TK-Products-Menu-Item-Button" aria-label="Product Navigation">Kendo UI <i class="TK-Arrow"></i></button><div id="js-tlrk-nav-dash" class="TK-Dash TK-Dropdown TK-Dropdown--Full TK-Dropdown--White TK-Dropdown---Mobile"><div class="TK-container"><div class="TK-row"><div class="TK-col-6"><div class="TK-Bundles TK-BG"><p class="TK-Dash-Title">Product Bundles</p><a href="/devcraft" class="TK-Bundle" data-match-exact-path><div class="TK-Bundle-Icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" width="75" height="61"><path d="M70 35c0 5.3-1.2 10.3-3.2 14.7-4.8 10.4-14.6 18-26.4 19.8-1.8.4-3.6.5-5.4.5-2.6 0-5.1-.3-7.5-.8-6.9-1.5-13.1-5.1-17.8-10C7.1 56.5 5 53.4 3.4 50c-.4-.8-.7-1.5-1-2.3C.8 43.7 0 39.5 0 35 0 15.7 15.7 0 35 0s35 15.7 35 35z" fill-rule="evenodd" clip-rule="evenodd" fill="#a3d8f1"/><path d="M40.9 65.6l-.5 4c-1.8.3-3.6.4-5.4.4-2.6 0-5.1-.3-7.5-.8-6.9-1.5-13.1-5.1-17.8-10C7.1 56.5 5 53.4 3.4 50c3.2-4.4 8.2-7.5 14-8.3 1-.1 1.9-.2 2.9-.2.6 0 1.1 0 1.7.1 4.7.4 8.9 2.3 12.2 5.2 3 2.7 5.3 6.2 6.3 10.1.7 2.7.9 5.7.4 8.7z" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M17.3 48.5L32 61.3l13.2-7-10-8c-1.4-1.1-2.3-2.9-2.3-4.7v-9H17.3v15.9z" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><path d="M21.9 32.6v15.9l-2.3 2-9.9 8.7C7.1 56.5 5 53.4 3.4 50c-.4-.8-.7-1.5-1-2.3L4 46.3c1.4-1.1 2.3-2.9 2.3-4.7v-9h15.6z" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><defs><filter id="tlrk-nav-a" filterUnits="userSpaceOnUse" x="28.1" y=".3" width="31.2" height="17.4"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="28.1" y=".3" width="31.2" height="17.4" id="tlrk-nav-b"><g filter="url(#tlrk-nav-a)"><path d="M25.7 10.8l32.5-11L61.4 9 28.8 20z" fill="#fff" fill-rule="evenodd" clip-rule="evenodd"/></g></mask><path d="M28.1 17.8l9.1-8.4c2-1.9 4.9-2.3 7.4-1 3 1.5 6.6.5 8.4-2.3L56.6.4 59.3 3l-5.1 7.2c-1.9 2.7-5.6 3.5-8.5 1.9l-1.1-.6c-2.1-1.2-4.6-1.1-6.7.2l-9.8 6.1z" mask="url(#tlrk-nav-b)" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M62.8 13.7l-8 6.2a6.61 6.61 0 01-8.2 0l-3.2-2.5c-1.4-1.1-3.2-1.6-5-1.3l-10.2 1.5 10.1-3.7c1.9-.7 4.1-.5 5.8.6l2.5 1.6c2.5 1.5 5.7 1.3 7.9-.6l5.6-4.8 2.7 3z" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M27 11.6h-5.5c-8.4 0-15.3 6.8-15.3 15.3v15.6c0 3.4 2.7 6.1 6.1 6.1H27c3.4 0 6.1-2.7 6.1-6.1V17.7c0-3.4-2.8-6.1-6.1-6.1" fill-rule="evenodd" clip-rule="evenodd" fill="#14254c"/><path d="M31.7 32.2c0 6.7-5.4 12.1-12.1 12.1S7.5 38.8 7.5 32.2s5.4-12.1 12.1-12.1 12.1 5.4 12.1 12.1" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><defs><filter id="tlrk-nav-c" filterUnits="userSpaceOnUse" x="9.1" y="15.8" width="21.1" height="34"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="9.1" y="15.8" width="21.1" height="34" id="tlrk-nav-d"><g filter="url(#tlrk-nav-c)"><path d="M7.5 32.2c0 6.7 5.4 12.1 12.1 12.1 6.7 0 12.1-5.4 12.1-12.1 0-6.7-5.4-12.1-12.1-12.1-6.7 0-12.1 5.4-12.1 12.1z" fill="#fff" fill-rule="evenodd" clip-rule="evenodd"/></g></mask><path d="M9.1 48.1V26.3c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5v23.5l-21-1.7z" mask="url(#tlrk-nav-d)" fill-rule="evenodd" clip-rule="evenodd" fill="#e9ac6a"/><path d="M14.6 35.1h5.5v-9.5z" fill="#dc7f1b" fill-rule="evenodd" clip-rule="evenodd"/><path d="M20.3 39.3c1.3.1 2.7-.2 4-1 1.1-.6 1.8-1.5 2.3-2.3l-1-.6c-.4.7-1.1 1.4-1.9 1.9-1.1.7-2.3.9-3.3.8l-.1 1.2z" fill="#fff"/><path d="M27.4 27.6h-2.3c0-.6.5-1.1 1.1-1.1h.2c.5 0 1 .5 1 1.1m-13.5 0h-2.3c0-.6.5-1.1 1.1-1.1h.2c.6 0 1 .5 1 1.1" fill="#231f20" fill-rule="evenodd" clip-rule="evenodd"/><path d="M7.5 24.7h25.1v-1.2H7.5zm0 5.5h25.1V29H7.5zm0 11h23.6v-1.3H7.5zm0-5.5h25.1v-1.3H7.5z" fill="#14254c"/><path d="M66.8 49.7c-4.8 10.4-14.6 18-26.4 19.8-1.8.4-3.6.5-5.4.5-2.6 0-5.1-.3-7.5-.8l-.4-2.8c-.5-3.1-.3-6.2.4-9 1.1-4.2 3.4-7.9 6.5-10.7.2-.2.5-.5.8-.7 3.8-3.2 8.7-5.1 14.2-5.1 7.3 0 13.7 3.5 17.8 8.8z" fill-rule="evenodd" clip-rule="evenodd"/><g fill-rule="evenodd" clip-rule="evenodd"><path d="M56.503 26.65c5.8-3 11.9-4.7 16.4-2.3 2.5 1.4 3.1 3.3 5.4 4 3 .9 7.5-.8 14.8-9.4l4.1 4.4c-10.7 10.6-16.4 11.8-19.7 10.4-2.6-1-3.2-3.4-6.7-5.5-4.8-2.7-10.3-2.4-14.3-1.6" fill="#8174f2"/><path d="M58.003 26.05c2.9-7.4 9.8-11.7 16-10.9 4.9.7 7.9 4.3 8.7 5.5-1.6.9-3.2 1.9-4.8 2.8-1.2-1-3-2.2-5.4-2.8-7.6-1.8-14 4.9-14.5 5.4" fill="#8174f2"/><path d="M37.103 44.85l-2-13.4c0-7.4 6.1-13.4 13.5-13.4s13.5 6 13.5 13.4l-1.7 13.4c-.8 5.8-5.8 10.1-11.6 10.1s-10.8-4.3-11.7-10.1z" fill="#00264b"/><path d="M34.803 34.25h27.5v-5.8h-27.5z" fill="#8174f2"/><path d="M57.003 38.05h-16.5c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3h16.5c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3" fill="#e9ac6a"/><path d="M39.203 35.05c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1m11 .1c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1" fill="#00264b"/><path d="M46.403 38.05h2.9v-5.5z" fill="#dc7f1b"/></g></svg></div><p class="TK-Bundle-Title TK-Best-Value">DevCraft</p><p class="TK-Bundle-Description">All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:</p><ul class="TK-Bundle-list"><li><strong>NEW</strong>: Design Kits for Figma</li><li>Online Training</li><li>Document Processing Library</li><li>Embedded Reporting for web and desktop</li></ul></a></div></div><div class="TK-col-18"><div class="TK-row"><div class="TK-col-8"><p class="TK-Dash-Title">Web</p><div class="TK-Dash-Links"><a href="/kendo-ui" class="TK-Dash-Link" data-match-exact-path>Kendo UI</a> <a href="/kendo-jquery-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for jQuery</a> <a href="/kendo-angular-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for Angular</a> <a href="/kendo-react-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for React</a> <a href="/kendo-vue-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for Vue</a> <a href="/blazor-ui" class="TK-Dash-Link" data-match-exact-path>UI for Blazor</a> <a href="/aspnet-core-ui" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET Core</a> <a href="/aspnet-mvc" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET MVC</a> <a href="/products/aspnet-ajax.aspx" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET AJAX</a></div><p class="TK-Dash-Title">Mobile</p><div class="TK-Dash-Links"><a href="/maui-ui" class="TK-Dash-Link" data-match-exact-path>UI for .NET MAUI</a> <a href="/xamarin-ui" class="TK-Dash-Link" data-match-exact-path>UI for Xamarin</a></div><p class="TK-Dash-Title">Document Management</p><div class="TK-Dash-Links"><a href="/document-processing-libraries" class="TK-Dash-Link" data-match-exact-path>Telerik Document Processing</a></div></div><div class="TK-col-8"><p class="TK-Dash-Title">Desktop</p><div class="TK-Dash-Links"><a href="/maui-ui" class="TK-Dash-Link" data-match-exact-path>UI for .NET MAUI</a> <a href="/winui" class="TK-Dash-Link" data-match-exact-path>UI for WinUI</a> <a href="/products/winforms.aspx" class="TK-Dash-Link" data-match-exact-path>UI for WinForms</a> <a href="/products/wpf/overview.aspx" class="TK-Dash-Link" data-match-exact-path>UI for WPF</a></div><p class="TK-Dash-Title">Reporting</p><div class="TK-Dash-Links"><a href="/products/reporting.aspx" class="TK-Dash-Link" data-match-exact-path>Telerik Reporting</a> <a href="/report-server" class="TK-Dash-Link" data-match-exact-path>Telerik Report Server</a></div><p class="TK-Dash-Title">Testing & Mocking</p><div class="TK-Dash-Links"><a href="/teststudio" class="TK-Dash-Link" data-match-exact-path>Test Studio</a> <a href="/teststudio-dev" class="TK-Dash-Link" data-match-exact-path>Test Studio Dev Edition</a> <a href="/products/mocking.aspx" class="TK-Dash-Link" data-match-exact-path>Telerik JustMock</a></div><p class="TK-Dash-Title">CMS</p><div class="TK-Dash-Links"><a href="https://www.progress.com/sitefinity-cms" class="TK-Dash-Link" data-match-exact-path>Sitefinity</a></div></div><div class="TK-col-8"><p class="TK-Dash-Title">UI/UX Tools</p><div class="TK-Dash-Links"><a href="/themebuilder" class="TK-Dash-Link TK-Updated" data-match-exact-path>ThemeBuilder</a> <a href="/design-system" class="TK-Dash-Link" data-match-exact-path>Design System Kit</a> <a href="/page-templates-and-ui-blocks" class="TK-Dash-Link" data-match-exact-path>Templates and Building Blocks</a></div><p class="TK-Dash-Title">Debugging</p><div class="TK-Dash-Links"><a href="/fiddler" class="TK-Dash-Link" data-match-exact-path>Fiddler</a> <a href="/fiddler/fiddler-everywhere" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Fiddler Everywhere</a> <a href="/fiddler/fiddler-classic" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Fiddler Classic</a> <a href="/fiddler/fiddlercap" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>FiddlerCap</a> <a href="/fiddlercore" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>FiddlerCore</a></div><p class="TK-Dash-Title"></p><div class="TK-Dash-Links"></div><p class="TK-Dash-Title">Free Tools</p><div class="TK-Dash-Links"><a href="https://converter.telerik.com" class="TK-Dash-Link">VB.NET to C# Converter</a> <a href="/teststudio/testing-framework" class="TK-Dash-Link" data-match-exact-path>Testing Framework</a></div></div></div><div class="TK-Dash-Footer"><a href="/all-products" class="TK-Dash-Featured-Link" data-match-exact-path>View all products</a></div></div></div></div></div><div class="TK-Dash-Extension TK--Mobile"></div></li></ul><div class="TK-Drawer" id="js-tlrk-nav-drawer"><ul class="TK-Context-Menu TK-Menu"><li class="TK-Menu-Item"><a href="/kendo-ui" class="TK-Menu-Item-Link" data-match-exact-path>Overview</a></li><li class="TK-Menu-Item"><button type="button" class="TK-Menu-Item-Button">Frameworks <i class="TK-Arrow"></i></button><ul class="TK-Dropdown TK-Dropdown--Gray TK-Dropdown--Full TK-Dropdown--Mobile"><li><a href="/kendo-jquery-ui" class="TK-Dropdown-Link" data-match-exact-path>jQuery</a></li><li><a href="/kendo-angular-ui" class="TK-Dropdown-Link" data-match-exact-path>Angular</a></li><li><a href="/kendo-react-ui" class="TK-Dropdown-Link" data-match-exact-path>React</a></li><li><a href="/kendo-vue-ui" class="TK-Dropdown-Link" data-match-exact-path>Vue</a></li></ul></li><li class="TK-Menu-Item"><button type="button" class="TK-Menu-Item-Button">Demos <i class="TK-Arrow"></i></button><ul class="TK-Dropdown TK-Dropdown--Gray TK-Dropdown--Small TK-Dropdown--Mobile"><li><a href="https://demos.telerik.com/kendo-ui/" class="TK-Dropdown-Link" data-match-exact-path>jQuery</a></li><li><a href="/kendo-angular-ui/components/" class="TK-Dropdown-Link" data-match-exact-path>Angular</a></li><li><a href="/kendo-react-ui/components/" class="TK-Dropdown-Link" data-match-starts-with-path>React</a></li><li><a href="/kendo-vue-ui/components/" class="TK-Dropdown-Link" data-match-starts-with-path>Vue</a></li></ul></li><li class="TK-Menu-Item"><button type="button" class="TK-Menu-Item-Button">Roadmap <i class="TK-Arrow"></i></button><div class="TK-Dropdown TK-Dropdown--Double TK-Dropdown--XL TK-Dropdown--Gray TK-Dropdown--Mobile"><div class="TK-container"><div class="TK-row"><div class="TK-col-6"><p class="TK-Dash-Title">jQuery</p><ul class="TK-Dropdown-List"><li><a href="/support/whats-new/kendo-jquery-ui" class="TK-Dropdown-List-Link" data-match-exact-path>What's New</a></li><li><a href="/support/whats-new/kendo-jquery-ui/roadmap" class="TK-Dropdown-List-Link" data-match-exact-path>Roadmap</a></li><li><a href="/support/whats-new/kendo-ui/release-history" class="TK-Dropdown-List-Link" data-match-starts-with-path>Release History</a></li></ul></div><div class="TK-col-6"><p class="TK-Dash-Title">Angular</p><ul class="TK-Dropdown-List"><li><a href="/support/whats-new/kendo-angular-ui" class="TK-Dropdown-List-Link" data-match-exact-path>What's New</a></li><li><a href="/support/whats-new/kendo-angular-ui/roadmap" class="TK-Dropdown-List-Link" data-match-exact-path>Roadmap</a></li><li><a href="/kendo-angular-ui/components/release-history/" class="TK-Dropdown-List-Link" data-match-starts-with-path>Release History</a></li></ul></div><div class="TK-col-6"><p class="TK-Dash-Title">React</p><ul class="TK-Dropdown-List"><li><a href="/support/whats-new/kendo-react-ui" class="TK-Dropdown-List-Link" data-match-exact-path>What's New</a></li><li><a href="/support/whats-new/kendo-react-ui/roadmap" class="TK-Dropdown-List-Link" data-match-exact-path>Roadmap</a></li><li><a href="/kendo-react-ui/components/changelogs/ui-for-react" class="TK-Dropdown-List-Link" data-match-starts-with-path>Release History</a></li></ul></div><div class="TK-col-6"><p class="TK-Dash-Title">Vue</p><ul class="TK-Dropdown-List"><li><a href="/support/whats-new/kendo-vue-ui" class="TK-Dropdown-List-Link" data-match-exact-path>What's New</a></li><li><a href="/support/whats-new/kendo-vue-ui/roadmap" class="TK-Dropdown-List-Link" data-match-exact-path>Roadmap</a></li><li><a href="/kendo-vue-ui/components/changelogs/ui-for-vue/" class="TK-Dropdown-List-Link" data-match-starts-with-path>Release History</a></li></ul></div></div></div></div></li><li class="TK-Menu-Item"><button type="button" class="TK-Menu-Item-Button">Docs & Support <i class="TK-Arrow"></i></button><ul class="TK-Dropdown TK-Dropdown--Gray TK-Dropdown--Small TK-Dropdown--Mobile"><li><a href="/support/kendo-ui" class="TK-Dropdown-Link" data-match-exact-path>jQuery</a></li><li><a href="/support/kendo-ui-for-angular" class="TK-Dropdown-Link" data-match-exact-path>Angular</a></li><li><a href="/kendo-react-ui/support" class="TK-Dropdown-Link" data-match-starts-with-path>React</a></li><li><a href="/support/kendo-ui-for-vue" class="TK-Dropdown-Link" data-match-starts-with-path>Vue</a></li></ul></li><li class="TK-Menu-Item"><a href="/purchase/kendo-ui" class="TK-Menu-Item-Link" data-match-exact-path>Pricing</a></li></ul><ul class="TK-Aside-Menu TK-Aside-Menu--Max"><li class="TK-Aside-Menu-Item TK-Aside-Menu-Button--Search"><a href="/search" class="TK-Aside-Menu-Link js-tlrk-nav-search-link" title="Search" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 512 512" xml:space="preserve"><path d="M504.4,464L378.9,338.5c25.6-34.8,40.8-77.7,40.8-124.2c0-115.7-94.1-209.8-209.8-209.8C94.2,4.5,0,98.6,0,214.3 C0,330,94.2,424.1,209.9,424.1c50.5,0,96.9-17.9,133.1-47.8l124.5,124.5c5.1,5.1,11.8,7.6,18.4,7.6s13.3-2.5,18.4-7.6 C514.6,490.7,514.6,474.2,504.4,464z M52.2,214.3c0-87,70.7-157.7,157.7-157.7s157.7,70.7,157.7,157.7c0,41-15.7,78.3-41.4,106.4 c-0.3,0.3-0.7,0.6-1,0.9c-0.7,0.7-1.3,1.4-1.9,2.2c-28.7,29.7-68.9,48.2-113.4,48.2C122.9,372,52.2,301.3,52.2,214.3z"></path></svg></a></li><li class="TK-Aside-Menu-Item"><a href="https://store.progress.com/shopping-cart" data-empty-url="/purchase.aspx?filter=web" class="TK-Aside-Menu-Link js-tlrk-nav-shopping-cart-counter-container" aria-label="Shopping cart" title="Shopping cart" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M11.75 14.5a1 1 0 111-1 1 1 0 01-1 1zm-8.25 0a1 1 0 111-1 1 1 0 01-1 1zm8.18-3H4.25A1.752 1.752 0 012.5 9.75v-8a.25.25 0 00-.25-.25H.75a.75.75 0 010-1.5h1.5A1.752 1.752 0 014 1.75v.75h8.78a1.75 1.75 0 011.72 2.093l-1.1 5.5a1.754 1.754 0 01-1.72 1.407zM4 4v5.75a.25.25 0 00.25.25h7.43a.251.251 0 00.245-.2l1.1-5.5a.251.251 0 00-.245-.3z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Link-Text">Shopping cart</span></a></li><li class="TK-Aside-Menu-Item TK--Not-Auth" id="js-tlrk-nav-not-auth-container"><a href="/account/" title="Your Account" class="TK-Aside-Menu-Button" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path xmlns="http://www.w3.org/2000/svg" d="M13.75 14.5a.751.751 0 01-.75-.75v-.5a5.75 5.75 0 10-11.5 0v.5a.75.75 0 01-1.5 0v-.5a7.175 7.175 0 011.319-4.159A7.262 7.262 0 014.69 6.476 3.717 3.717 0 013.5 3.75a3.75 3.75 0 117.5 0 3.716 3.716 0 01-1.19 2.726 7.263 7.263 0 013.371 2.615A7.175 7.175 0 0114.5 13.25v.5a.751.751 0 01-.75.75zm-6.5-13A2.25 2.25 0 109.5 3.75 2.253 2.253 0 007.25 1.5z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Button-Text">Login</span></a></li><li class="TK-Aside-Menu-Item TK-bn"><a href="/contact?preselect=kendo-ui" class="TK-Aside-Menu-Button TK-Button--CTA-Sec" title="Contact Us" data-match-starts-with-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M12.75 14.5h-11A1.752 1.752 0 010 12.753v-7.37a.092.092 0 01.005-.026.1.1 0 000-.023.782.782 0 01.01-.093.63.63 0 01.02-.071l.007-.021V5.14a.828.828 0 01.036-.088.673.673 0 01.045-.078.078.078 0 00.009-.02.069.069 0 01.01-.02.1.1 0 01.028-.019.1.1 0 00.019-.015.68.68 0 01.077-.076.124.124 0 00.015-.024.106.106 0 01.019-.016L6.2.354a1.736 1.736 0 012.1 0l5.9 4.431a.1.1 0 01.018.02.118.118 0 00.017.019.591.591 0 01.076.075.109.109 0 00.02.018.1.1 0 01.019.017.077.077 0 01.01.02.088.088 0 00.01.02c.017.026.031.053.045.078a.9.9 0 01.039.1l.007.021a.5.5 0 01.03.164.1.1 0 000 .023.092.092 0 01.005.027v7.37A1.752 1.752 0 0112.75 14.5zM1.5 6.883v5.87a.253.253 0 00.25.247h11a.253.253 0 00.249-.25V6.883L8.3 10.412a1.737 1.737 0 01-2.1 0zM7.25 1.5a.248.248 0 00-.15.053L2 5.383l5.1 3.83a.253.253 0 00.15.052.245.245 0 00.15-.053l5.1-3.829-5.1-3.83a.248.248 0 00-.15-.053z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Button-Text">Contact Us</span></a></li><li class="TK-Aside-Menu-Item TK-bn"><button type="button" class="TK-Button TK-Button--CTA">Try now <i class="TK-Arrow"></i></button><ul class="TK-Dropdown TK-Dropdown--Full TK-Dropdown--CTA TK-Dropdown--White TK-Dropdown--Mobile"><li><a href="/try/kendo-ui" class="TK-Dropdown-Link">jQuery</a></li><li><a href="/try/kendo-angular-ui" class="TK-Dropdown-Link">Angular</a></li><li><a href="/try/kendo-react-ui" class="TK-Dropdown-Link">React</a></li><li><a href="/try/kendo-vue-ui" class="TK-Dropdown-Link">Vue</a></li></ul></li></ul></div><div class="TK-Drawer-Extension"></div><div class="TK-Aside TK--Mobile"><ul class="TK-Aside-Menu"><li class="TK-Aside-Menu-Item TK-Aside-Menu-Button--Search"><a href="/search" class="TK-Aside-Menu-Link js-tlrk-nav-search-link" title="Search" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 512 512" xml:space="preserve"><path d="M504.4,464L378.9,338.5c25.6-34.8,40.8-77.7,40.8-124.2c0-115.7-94.1-209.8-209.8-209.8C94.2,4.5,0,98.6,0,214.3 C0,330,94.2,424.1,209.9,424.1c50.5,0,96.9-17.9,133.1-47.8l124.5,124.5c5.1,5.1,11.8,7.6,18.4,7.6s13.3-2.5,18.4-7.6 C514.6,490.7,514.6,474.2,504.4,464z M52.2,214.3c0-87,70.7-157.7,157.7-157.7s157.7,70.7,157.7,157.7c0,41-15.7,78.3-41.4,106.4 c-0.3,0.3-0.7,0.6-1,0.9c-0.7,0.7-1.3,1.4-1.9,2.2c-28.7,29.7-68.9,48.2-113.4,48.2C122.9,372,52.2,301.3,52.2,214.3z"></path></svg></a></li><li class="TK-Aside-Menu-Item"><button type="button" aria-label="Main Navigation" class="TK-Aside-Menu-Button TK-Aside-Menu-Button--Toggle-Drawer" id="js-tlrk-nav-drawer-button"><svg id="menu" viewBox="0 0 100 80" class="WUG-Svg WUG-Svg-Hamburger" width="22" height="16"><line x1="10" y1="40" x2="90" y2="40"></line><line x1="10" y1="40" x2="90" y2="40"></line><line x1="10" y1="40" x2="90" y2="40"></line></svg></button></li></ul></div></div></section><button type="button" class="TK-Nav-Overlay" id="js-tlrk-nav-overlay">close mobile menu</button></nav><script async nomodule src="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.52/js/index.min.js"></script><script async type="module" src="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.52/js/index.min.mjs"></script><script> (function (a, b, c, d) { window.fetch("https://www.g2.com/products/progress-kendo-ui/rating_schema.json") .then(e => e.json()) .then(f => { c = a.createElement(b); c.type = "application/ld+json"; c.text = JSON.stringify(f); d = a.getElementsByTagName(b)[0]; d.parentNode.insertBefore(c, d); }); }) (document, "script"); </script> <div id="ContentPlaceholder1_T53129E6C012_Col00" class="sf_colsIn PageWrapper tlrk" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <nav class="DC-scroller track--sidenav" aria-label="Side navigation"><a data-sf-ec-immutable="" href="#overview" data-scrollto="sctn-Overview">Overview</a> <a data-sf-ec-immutable="" href="#key-benefits" data-scrollto="sctn-Features">Features</a> <a data-sf-ec-immutable="" href="#components" data-scrollto="sctn-Components" class="has-light-bg">Components</a> <a data-sf-ec-immutable="" href="#design-tools" data-scrollto="sctn-DesignTools" class="has-light-bg">Design Tools</a> <a data-sf-ec-immutable="" href="#pricing" data-scrollto="sctn-Pricing" class="has-light-bg">Pricing</a> <a data-sf-ec-immutable="" href="#case-study" data-scrollto="sctn-CaseStudy">Case Study</a> <a data-sf-ec-immutable="" href="#faqs" data-scrollto="sctn-FAQs" class="has-light-bg">FAQs</a> </nav><div id="ContentPlaceholder1_C1085_Col00" class="sf_colsIn Section u-pt10 u-pb10 u-bg-blue4 u-zi2 sctn-Overview" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1086_Col00" class="sf_colsIn container" data-sf-element="GridContainer" data-placeholder-label="GridContainer"><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1087_Col00" class="sf_colsIn col-8 u-m-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <h1 class="u-mb1" id="overview">The Only JavaScript Component Library You Will Ever Need</h1> <p class="u-fs28 u-fw3 u-c-grey8 u-m0 u-mb9">Kendo UI is a <span class="u-fw5">bundle</span> of four JavaScript UI libraries built natively for jQuery, Angular, React and Vue. Each is built with consistent API and theming, so no matter what you choose, your UI will be modern, responsive, accessible and fast. </p></div> <div id="ContentPlaceholder1_C1087_Col01" class="sf_colsIn col-4 u-tar u-pl0 u-l-pl2 u-m-dn" data-sf-element="Column 2" data-placeholder-label="Column 2"> <img title="kendo-ui-hero-illustration" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kendo-ui-hero-illustration@2x-min.png?sfvrsn=825055d2_2" alt="kendo-ui-hero-illustration" /></div> </div> <div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1088_Col00" class="sf_colsIn col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script> <h2 class="u-c-grey8 u-mb2 u-fw4 h6">Explore Kendo UI Libraries</h2></div> </div> <div class="row row--aligned u-mb10 ab-test-show u-dn row--equal" data-sf-element="Row"> <div id="ContentPlaceholder1_C1240_Col00" class="sf_colsIn col-3 u-mb3 u-xl-col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"><div id="ContentPlaceholder1_C1241_Col00" class="sf_colsIn flip-box" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1242_Col00" class="sf_colsIn flip-box-inner" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1243_Col00" class="sf_colsIn flip-box-front u-bg-blue2 u-p2 u-l-pr2 u-br10 u-pt4 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-jquery-logo-_50x50@2x-min.png?sfvrsn=9012a2ed_2" loading="lazy" alt="kui-jquery-logo-_50x50@2x-min" class="u-w6 u-w6 u-mb3" /> <h4 class="u-c-white u-fw5 u-mb0">Kendo UI for jQuery</h4></div> <div id="ContentPlaceholder1_C1244_Col00" class="sf_colsIn flip-box-back u-bg-violet u-p2 u-br10 u-pt3 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-jquery-logo-_50x50@2x-min.png?sfvrsn=9012a2ed_2" loading="lazy" alt="kui-jquery-logo-_50x50@2x-min" class="u-w3 u-mb1" /> <p class="u-fs20">Kendo UI for jQuery</p> <p class="u-fs18 u-mb0">100+ fully native components for building high-quality modern jQuery UI in no time. </p><a href="https://www.telerik.com/kendo-jquery-ui" class="u-fs18 u-mt0">Learn More</a></div> </div> </div> </div> <div id="ContentPlaceholder1_C1240_Col01" class="sf_colsIn col-3 u-mb3 u-xl-col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 2" data-placeholder-label="Column 2"><div id="ContentPlaceholder1_C1309_Col00" class="sf_colsIn flip-box" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1310_Col00" class="sf_colsIn flip-box-inner" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1311_Col00" class="sf_colsIn flip-box-front u-bg-blue2 u-p2 u-l-pr2 u-br10 u-pt4 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-angular-logo-50x502x-min-png.png?sfvrsn=44ea8af5_3" loading="lazy" alt="kui-angular-logo-_50x50@2x-min.png" class="u-w6 u-h6 u-mb3" /> <h4 class="u-c-white u-fw5 u-mb0">Kendo UI for Angular</h4></div> <div id="ContentPlaceholder1_C1317_Col00" class="sf_colsIn flip-box-back u-bg-violet u-p2 u-br10 u-pt3 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img width="32" height="32" src="https://www.telerik.com/sfimages/default-source/kendo-ui-for-vue/icn_business_requirement_50x50-2.png?sfvrsn=79f22095_2" alt="icn_business_requirement_50x50-2" /> <p class="u-fs20">Kendo UI for Angular</p> <p class="u-fs18 u-mb0">100+ fully native components for building high-quality modern Angular UI in no time. </p><a href="https://www.telerik.com/kendo-angular-ui" class="u-fs18 u-mt0">Learn More</a></div> </div> </div> </div> <div id="ContentPlaceholder1_C1240_Col02" class="sf_colsIn col-3 u-mb3 u-xl-col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 3" data-placeholder-label="Column 3"><div id="ContentPlaceholder1_C1319_Col00" class="sf_colsIn flip-box" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1320_Col00" class="sf_colsIn flip-box-inner" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1321_Col00" class="sf_colsIn flip-box-front u-bg-blue2 u-p2 u-pr0 u-l-pr2 u-br10 u-pt4 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-reactlogo-_50x50@2x-min-png.png?sfvrsn=c36d1274_2" loading="lazy" alt="kui-reactlogo-_50x50@2x-min.png" class="u-w6 u-w6 u-mb3" /> <h4 class="u-c-white u-fw5 u-mb0">KendoReact</h4></div> <div id="ContentPlaceholder1_C1324_Col00" class="sf_colsIn flip-box-back u-bg-violet u-p2 u-br10 u-pt3 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-reactlogo-_50x50@2x-min-png.png?sfvrsn=c36d1274_2" loading="lazy" alt="kui-reactlogo-_50x50@2x-min.png" class="u-w3 u-mb1" /> <p class="u-fs20">Kendo UI for React</p> <p class="u-fs18 u-mb0">100+ fully native components for building high-quality modern React UI in no time. </p><a href="https://www.telerik.com/kendo-react-ui/" class="u-fs18 u-mt0">Learn More</a></div> </div> </div> </div> <div id="ContentPlaceholder1_C1240_Col03" class="sf_colsIn col-3 u-mb3 u-xl-col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 4" data-placeholder-label="Column 4"><div id="ContentPlaceholder1_C1326_Col00" class="sf_colsIn flip-box" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1329_Col00" class="sf_colsIn flip-box-inner" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1330_Col00" class="sf_colsIn flip-box-front u-bg-blue2 u-p2 u-pr0 u-l-pr2 u-br10 u-pt4 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-vue-logo-_50x50@2x-min-png.png?sfvrsn=824c2962_2" loading="lazy" alt="kui-vue-logo-_50x50@2x-min.png" class="u-w6 u-w6 u-mb3" /> <h4 class="u-c-white u-fw5 u-mb0">Kendo UI for <br class="u-l-dn" />Vue</h4></div> <div id="ContentPlaceholder1_C1333_Col00" class="sf_colsIn flip-box-back u-bg-violet u-p2 u-br10 u-pt3 u-h90" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-vue-logo-_50x50@2x-min-png.png?sfvrsn=824c2962_2" loading="lazy" alt="kui-vue-logo-_50x50@2x-min.png" class="u-w3 u-mb1" /> <p class="u-fs20">Kendo UI for Vue</p> <p class="u-fs18 u-mb0">100+ fully native components for building high-quality modern Vue UI in no time. </p><a href="https://www.telerik.com/kendo-vue-ui" class="u-fs18 u-mt0">Learn More</a></div> </div> </div> </div> </div> <div class="row u-mb10 u-l-mb6 u-s-mb4 ab-test-hide" data-sf-element="Row"> <div id="ContentPlaceholder1_C1433_Col00" class="sf_colsIn col-6 u-l-col-12 u-s-mb1" data-sf-element="Column 1" data-placeholder-label="Column 1"><div id="ContentPlaceholder1_C1428_Col00" class="sf_colsIn u-bg-blue5 u-br10 u-p1h" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div class="row row--equal" data-sf-element="Row"> <div id="ContentPlaceholder1_C1427_Col00" class="sf_colsIn col-6 u-l-col-6 u-l-mb3 u-s-col-12 u-s-mb2" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a class="HoverBox u-tdn u-bg-blue2 u-br10 u-p3 u-pt4 u-pb4 u-db u-full u-mh100" href="/kendo-angular-ui"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-angular-logo-50x502x-min-png.png?sfvrsn=44ea8af5_3" loading="lazy" alt="kui-angular-logo-_50x50@2x-min.png" class="u-w6 u-h6 u-mb3" /><h4 class="u-c-white u-fw5 u-mb0">Kendo UI for Angular</h4></a></div> <div id="ContentPlaceholder1_C1427_Col01" class="sf_colsIn col-6 u-l-col-6 u-l-mb3 u-s-col-12 u-s-mb2" data-sf-element="Column 2" data-placeholder-label="Column 2"> <a class="HoverBox u-tdn u-bg-blue2 u-br10 u-p3 u-pt4 u-pb4 u-db u-full u-mh100" href="/kendo-react-ui"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-reactlogo-_50x50@2x-min-png.png?sfvrsn=c36d1274_2" loading="lazy" alt="kui-reactlogo-_50x50@2x-min.png" class="u-w6 u-w6 u-mb3" /><h4 class="u-c-white u-fw5 u-mb0">KendoReact</h4></a></div> </div> <div class="row u-mt1 u-l-mt0" data-sf-element="Row"> <div id="ContentPlaceholder1_C1431_Col00" class="sf_colsIn col-2 u-wa u-pr0 u-s-mb1" data-sf-element="Column 1" data-placeholder-label="Column 1"> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span></div> <div id="ContentPlaceholder1_C1431_Col01" class="sf_colsIn col-10 u-l-col-10 u-pr0 u-s-pr1" data-sf-element="Column 2" data-placeholder-label="Column 2"> <h3 class="u-fs18 u-fw4 u-lh130 u-mb0">Deliver a great user experience with professionally designed and ready-to-use <a href="/page-templates-and-ui-blocks" class="u-tdu" data-sf-ec-immutable="" data-track-instance="1">Page Templates and Building Blocks</a> for Angular & React.</h3></div> </div> </div> </div> <div id="ContentPlaceholder1_C1433_Col01" class="sf_colsIn col-6 u-l-col-12 u-s-mb0" data-sf-element="Column 2" data-placeholder-label="Column 2"><div class="row row--equal" data-sf-element="Row"> <div id="ContentPlaceholder1_C1434_Col00" class="sf_colsIn col-6 u-l-col-6 u-l-mb3 u-s-col-12 u-s-mb1 u-pt1h" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a class="HoverBox u-tdn u-bg-blue2 u-br10 u-p3 u-pt4 u-pb4 u-db u-full u-mh100" href="/kendo-vue-ui"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-vue-logo-_50x50@2x-min-png.png?sfvrsn=824c2962_2" loading="lazy" alt="kui-vue-logo-_50x50@2x-min.png" class="u-w6 u-w6 u-mb3" /><h4 class="u-c-white u-fw5 u-mb0">Kendo UI for <br class="u-l-dn" />Vue</h4></a></div> <div id="ContentPlaceholder1_C1434_Col01" class="sf_colsIn col-6 u-l-col-6 u-l-mb3 u-s-col-12 u-s-mb2 u-pt1h" data-sf-element="Column 2" data-placeholder-label="Column 2"> <a class="HoverBox u-tdn u-bg-blue2 u-br10 u-p3 u-pt4 u-pb4 u-db u-full u-mh100" href="/kendo-jquery-ui"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kui-jquery-logo-_50x50@2x-min.png?sfvrsn=9012a2ed_2" loading="lazy" alt="kui-jquery-logo-_50x50@2x-min" class="u-w6 u-w6 u-mb3" /><h4 class="u-c-white u-fw5 u-mb0">Kendo UI for jQuery</h4></a></div> </div> </div> </div> <h2 class="u-c-white u-mb3 u-lh1 h3">Know What You're Looking For?</h2><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1091_Col00" class="sf_colsIn col-4 u-l-col-6 u-s-col-12 u-s-mb1 u-zi2" data-sf-element="Column 1" data-placeholder-label="Column 1"> <div class="Dropdown" data-tlrk-plugin="dropdown"><a data-sf-ec-immutable="" href="#download-trial-file" aria-label="Start Free Trial Button" class="Dropdown-control u-db Btn Btn--prim2 Btn--l u-fs24 track--kui-trial-cta1-dropdown">Start Free Trial <span class="Dropdown-arrow"></span></a> <div class="DashMenu u-pa u-fs20 u-tac"><a class="u-db u-wsn track--kui-trial-cta1-jquery" href="/try/kendo-ui">UI for jQuery</a> <a class="u-db u-wsn track--kui-trial-cta1-angular" href="/try/kendo-angular-ui">UI for Angular</a> <a class="u-db u-wsn track--kui-trial-cta1-react" href="/try/kendo-react-ui">UI for React</a> <a class="u-db u-wsn track--kui-trial-cta1-vue" href="/try/kendo-vue-ui">UI for Vue</a> </div></div></div> <div id="ContentPlaceholder1_C1091_Col01" class="sf_colsIn col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 2" data-placeholder-label="Column 2"> <a class="Btn Btn--sec u-fs24 u-db" href="/purchase/kendo-ui">Buy Now</a></div> </div> </div> </div> <section id="ContentPlaceholder1_C1102_Col00" class="sf_colsIn Section u-bg-blue5 u-pt8 u-pb8 sctn-Features u-za" data-sf-element="Section" data-placeholder-label="Section Empty"><div id="ContentPlaceholder1_C1103_Col00" class="sf_colsIn Section-bg Section-bg--containT" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <img loading="lazy" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/decorations/inverted-top-curve-darkblue.svg?sfvrsn=ebb54c_2" alt="inverted-top-curve-darkblue" /></div> <div id="ContentPlaceholder1_C1104_Col00" class="sf_colsIn container u-xl-pt3" data-sf-element="GridContainer" data-placeholder-label="GridContainer"><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1106_Col00" class="sf_colsIn col-10 u-l-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <h2 class="u-mb5" id="key-benefits">How Kendo UI Makes <br class="u-l-dn" />Your Team as Productive as Possible</h2></div> </div> <div class="row u-mb8" data-sf-element="Row"> <div id="ContentPlaceholder1_C1107_Col00" class="sf_colsIn col-4 u-mb6 u-l-col-6 u-l-mb4 u-s-col-12 u-s-mb4" data-sf-element="Column 1" data-placeholder-label="Column 1"> <div class="u-w13 u-h13 u-mb3"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130" class="svgimg" title="Progress Telerik Component Library,Ready to use UI components" alt="Telerik UI for WinUI Ready to use UI components"><defs><lineargradient id="svg-grad" x1="0.845" x2="0.327" y2="0.926" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#ffb318"></stop><stop offset="1" stop-color="#ff9b4b"></stop></lineargradient> </defs> <path d="M306.6 874.347v-78.158H200.314v78.158h-.028l.028 1.113v4.52h.116a8.653 8.653 0 008.649 8.478H243.4a10.956 10.956 0 014.956 1.174 13.145 13.145 0 013.47 2.574 16.409 16.409 0 012.041 2.565c.178.276.319.515.426.705.1-.189.234-.427.4-.7a14.956 14.956 0 012-2.569 12.676 12.676 0 013.527-2.576 11.788 11.788 0 015.2-1.173h32.6a8.655 8.655 0 008.655-8.655v-5.456z" transform="translate(-189.003 -784.821)" fill="url(#svg-grad)"></path><g class="icon" transform="translate(-189.003 -784.821)"><rect class="u-c-white" width="31.352" height="11.146" rx="5.573" transform="translate(209.308 848.417)"></rect><path d="M218.009 854.276h14.505"></path></g> <g class="icon" transform="translate(-189.003 -784.821)"><rect width="31.352" height="11.146" rx="5.573" transform="translate(209.308 864.446)"></rect><path class="u-c-white" d="M218.009 870.305h14.505"></path></g> <g class="icon" transform="translate(-189.003 -784.821)"><circle cx="1.524" cy="1.524" r="1.524" transform="translate(209.029 815.108)"></circle><circle cx="1.524" cy="1.524" r="1.524" transform="translate(209.029 825.328)"></circle><path class="u-c-white" d="M215.892 816.683h45.779M215.892 826.903h31.588"></path><circle cx="1.524" cy="1.524" r="1.524" transform="translate(209.029 835.602)"></circle><path class="u-c-white" d="M215.892 837.177h45.779"></path></g> <g class="icon"><path class="u-c-white" d="M84.488 31.826h20.465v20.465H84.488z"></path><path d="M89.905 39.651l7.825 7.825 15.048-16.252"></path></g> <g class="icon" transform="translate(-189.003 -784.821)"><path d="M255.677 854.134h15.555"></path><path class="u-c-white" d="M279.779 854.134h15.189"></path><circle cx="3.96" cy="3.96" r="3.96" transform="translate(271.421 850.16)"></circle></g> <g class="icon"><path class="u-c-white" d="M67.374 91.315h39.275"></path><path d="M70.78 94.779c.745-4.034 6.381-15.627 10.573-9.568 1.486 2.148 1.63 4.229 4.082 3.982 2.916-.293 4.366-6.154 6.536-7.057 2.586-1.075 2.979 2.725 5.2 3.31 4.03 1.06 4.494-6.568 9.546-7.85"></path><path stroke-width="1.053" stroke="#0357ff" stroke-miterlimit="10" fill="none" d="M52.198 19.563h25.458"></path><path d="M2.275 103.785c.051 6.344 4.58 11.456 10.15 11.456H52.68a11.581 11.581 0 015.811 1.57 15.711 15.711 0 014.07 3.438 21.656 21.656 0 012.394 3.426c.208.369.375.689.5.942.118-.253.274-.57.472-.936a19.938 19.938 0 012.346-3.431 15.13 15.13 0 014.136-3.441 12.451 12.451 0 016.1-1.568h38.231c5.606 0 10.15-5.176 10.15-11.561"></path></g> </svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Ready-to-Use UI Components</h3><p>Easily add advanced JavaScript components into your existing or new designs. Kendo UI’s hundreds of components handle everything you need to satisfy your users’ requirements.</p></div> <div id="ContentPlaceholder1_C1107_Col01" class="sf_colsIn col-4 u-mb6 u-l-col-6 u-l-mb4 u-s-col-12 u-s-mb4" data-sf-element="Column 2" data-placeholder-label="Column 2"> <div class="u-w13 u-h13 u-mb3"> <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 131 124" title="Progress Telerik Best UI,Complex Features" alt="Progress Telerik Best UI,Complex Features"><defs><lineargradient id="svg-grad" x1="0" x2="0" y1="0" y2="1" gradientUnits="objectBoundingBox"><stop offset="0"></stop><stop offset="1"></stop></lineargradient> </defs> <g transform="translate(0.5 0.5)"><path fill="url(#svg-grad)" d="M1077.076,745.887v14.4h115.495v-29s-3.714-10-16.714-9-16.714,19-35.286,18-23.78-6.2-36.78-6.2S1077.076,745.887,1077.076,745.887Z" transform="translate(-1070 -647.29)"></path><path fill="url(#svg-grad)" d="M30.526,31.9V0A31.2,31.2,0,1,0,53.295,9.127Z" transform="translate(9.792 12)"></path><g class="icon"><path d="M8.532-17H121.468A8.532,8.532,0,0,1,130-8.468V97.468A8.532,8.532,0,0,1,121.468,106H8.532A8.532,8.532,0,0,1,0,97.468V-8.468A8.532,8.532,0,0,1,8.532-17Z" transform="translate(0 17)"></path><path d="M1077.893,742.789a26.98,26.98,0,0,0,14.857,5c9.286,0,18.973-13.273,35.75-13.5s20.2,9.154,34.291,8.5c13.984-.221,13.285-13.4,28.586-14.07" transform="translate(-1070 -652.29)"></path><line x2="8.5" y2="8.5" transform="translate(114 8)"></line><line y1="8.5" x2="8.5" transform="translate(114 8)"></line><ellipse class="Text--b9 u-c-white" cx="21.507" cy="21.507" rx="21.507" ry="21.507" transform="translate(20.198 21.001)"></ellipse></g> </g> </svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Complex UI Features</h3><p>Add advanced components such as data grids, charts, schedulers, and calendars with just a few lines of code. Each is crafted for performance and customizability.</p></div> <div id="ContentPlaceholder1_C1107_Col02" class="sf_colsIn col-4 u-mb6 u-l-col-6 u-l-mb4 u-s-col-12 u-s-mb4" data-sf-element="Column 3" data-placeholder-label="Column 3"> <div class="u-w13 u-h13 u-mb3"> <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 126" title="Progress Telerik Getting started,Be ready for everything" alt="Progress Telerik Getting started,Be ready for everything"><defs><lineargradient id="svg-grad" x1="0" x2="0" y1="0" y2="1" gradientUnits="objectBoundingBox"><stop offset="0"></stop><stop offset="1"></stop></lineargradient> </defs> <g transform="translate(1 .3)"><path d="M105.5 56.5v67.4L52.8 79.2 0 123.9V56.5l52.7-44.7z" fill="url(#svg-grad)"></path><g class="icon"><path d="M23.9 125.665V83.3l29.3-24.5"></path><path d="M47.4 104.4l-23.9 20.8"></path><path d="M53.2 58.8l28.3 24.5V125l-23.4-20.6"></path><path d="M52.7.7C40.1 11.6 31.6 31.9 31.6 55.3c0 23.3 8.5 43.7 21.1 54.6C65.4 99 73.9 78.6 73.9 55.3c0-23.4-8.5-43.7-21.2-54.6z"></path><path d="M48.7 111.5V123"></path><path d="M57.6 111.5v6.2"></path><path d="M57.6 121.2v4.5"></path><path d="M53.2 113.2v11.6"></path></g> <g class="icon Text--b9 u-c-white"><circle cx="10.5" cy="10.5" r="10.5" transform="translate(42.3 27.3)"></circle></g> </g> </svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Be Ready for Anything</h3><p>Switching frameworks and starting new projects won’t require a new license or a big learning curve. Everything is included and up-to-date, APIs are consistent and theming is easy.</p></div> <div id="ContentPlaceholder1_C1107_Col03" class="sf_colsIn col-4 u-l-col-6 u-l-mb4 u-s-col-12 u-s-mb4" data-sf-element="Column 4" data-placeholder-label="Column 4"> <div class="u-w13 u-h13 u-mb3"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 130 130" class="svgimg" title="Progress Telerik Enterprise-Level Quality Performance, Consistently Improving" alt="Progress Telerik Enterprise-Level Quality Performance, Consistently Improving"><defs><lineargradient id="svg-grad" x1="0.845" x2="0.327" y2="0.926" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#ffb318"></stop><stop offset="1" stop-color="#ff9b4b"></stop></lineargradient></defs> <path d="M668.929 220.535L683.05 264h45.7l-36.97 26.86 14.12 43.457-36.97-26.86-36.97 26.86 14.121-43.461L609.111 264h45.7z" fill="url(#svg-grad)" transform="translate(-603.971 -213.656)"></path><g class="icon"><path d="M68.461 106.644a38.978 38.978 0 0017.384-73.862M98.04 89.771c.241 3.185-2.456 5.985-2.456 5.985s-3.087-2.363-3.329-5.547 2.457-5.985 2.457-5.985 3.087 2.363 3.328 5.547z"></path><path d="M100.771 92.219c3.018-.5 5.922 1.829 5.922 1.829s-1.988 3.15-5.007 3.654-5.923-1.829-5.923-1.829 1.989-3.15 5.008-3.654zM89.804 96.832c-.442 3.349-3.842 5.662-3.842 5.662s-2.684-3.117-2.241-6.466 3.842-5.662 3.842-5.662 2.684 3.117 2.241 6.466z"></path><path d="M92.099 99.959c3.234.134 5.734 3.18 5.734 3.18s-2.744 2.829-5.977 2.695-5.735-3.18-5.735-3.18 2.744-2.829 5.978-2.695zM103.321 80.764c.832 2.851-1.084 5.919-1.084 5.919s-3.264-1.556-4.1-4.408 1.083-5.919 1.083-5.919 3.269 1.556 4.101 4.408z"></path><path d="M106.276 82.466c2.65-1.039 5.742.525 5.742.525s-1.2 3.249-3.853 4.289-5.742-.525-5.742-.525 1.206-3.249 3.853-4.289zM105.871 70.62c1.446 2.215.607 5.324.607 5.324s-3.184-.482-4.63-2.7-.607-5.324-.607-5.324 3.188.485 4.63 2.7z"></path><path d="M108.829 71.307c1.989-1.571 5.028-1.037 5.028-1.037s-.186 3.08-2.175 4.651-5.029 1.037-5.029 1.037.187-3.08 2.176-4.651zM105.229 60.997c1.972 1.488 2.219 4.486 2.219 4.486s-2.95.585-4.922-.9-2.219-4.486-2.219-4.486 2.949-.588 4.922.9z"></path><path d="M108.045 60.664c1.25-2.01 4.09-2.5 4.09-2.5s.812 2.765-.438 4.775-4.09 2.5-4.09 2.5-.812-2.765.438-4.775zM102.548 52.853a6.1 6.1 0 012.919 3.269 4.887 4.887 0 01-7.284-2.883 6.1 6.1 0 014.365-.386zM104.848 51.915a5.845 5.845 0 012.868-3.067 4.683 4.683 0 01-2.125 7.2 5.847 5.847 0 01-.743-4.133zM99.752 45.708a4.968 4.968 0 012.376 2.661 3.979 3.979 0 01-5.929-2.347 4.966 4.966 0 013.553-.314z"></path><path d="M101.624 44.944a1.912 1.912 0 112.94.867 1.912 1.912 0 11-2.94-.867zM95.623 40.613a4.054 4.054 0 012.356 1.709 3.246 3.246 0 01-5.134-.843 4.052 4.052 0 012.778-.866zM96.983 39.68a1.56 1.56 0 111.066 2.576 3.882 3.882 0 01-1.066-2.576zM90.141 36.324a4.052 4.052 0 012.673 1.151 3.246 3.246 0 01-5.193.3 4.051 4.051 0 012.52-1.451zM91.263 35.115a1.56 1.56 0 111.6 2.28 3.882 3.882 0 01-1.6-2.28zM83.656 31.13a4.056 4.056 0 012.3 1.786 3.245 3.245 0 01-5.1-1.012 4.048 4.048 0 012.8-.774zM61.678 106.644a38.978 38.978 0 01-17.383-73.862"></path><path d="M32.099 89.771c-.241 3.185 2.456 5.985 2.456 5.985s3.088-2.363 3.329-5.547-2.457-5.985-2.457-5.985-3.087 2.363-3.328 5.547z"></path><path d="M29.369 92.219c-3.019-.5-5.923 1.829-5.923 1.829s1.988 3.15 5.007 3.654 5.923-1.829 5.923-1.829-1.989-3.15-5.007-3.654zM40.335 96.832c.442 3.349 3.842 5.662 3.842 5.662s2.684-3.117 2.241-6.466-3.842-5.662-3.842-5.662-2.684 3.117-2.241 6.466z"></path><path d="M38.04 99.959c-3.234.134-5.734 3.18-5.734 3.18s2.744 2.829 5.977 2.695 5.735-3.18 5.735-3.18-2.744-2.829-5.978-2.695zM26.552 80.705c-.793 2.862 1.164 5.9 1.164 5.9s3.243-1.6 4.037-4.462-1.164-5.9-1.164-5.9-3.243 1.601-4.037 4.462z"></path><path d="M23.62 82.444c-2.663-1-5.734.6-5.734.6s1.248 3.233 3.911 4.236 5.734-.6 5.734-.6-1.247-3.23-3.911-4.236zM24.268 70.62c-1.446 2.215-.607 5.324-.607 5.324s3.184-.482 4.63-2.7.607-5.324.607-5.324-3.184.485-4.63 2.7z"></path><path d="M21.309 71.307c-1.989-1.571-5.028-1.037-5.028-1.037s.186 3.08 2.175 4.651 5.029 1.037 5.029 1.037-.186-3.08-2.176-4.651zM24.911 60.997c-1.972 1.488-2.219 4.486-2.219 4.486s2.95.585 4.922-.9 2.219-4.486 2.219-4.486-2.95-.588-4.922.9z"></path><path d="M22.094 60.664c-1.25-2.01-4.09-2.5-4.09-2.5s-.812 2.765.438 4.775 4.09 2.5 4.09 2.5.812-2.765-.438-4.775zM27.591 52.853a6.1 6.1 0 00-2.919 3.269 4.887 4.887 0 007.284-2.883 6.1 6.1 0 00-4.365-.386zM25.291 51.915a5.845 5.845 0 00-2.868-3.067 4.683 4.683 0 002.125 7.2 5.847 5.847 0 00.743-4.133zM30.387 45.708a4.968 4.968 0 00-2.376 2.661 3.979 3.979 0 005.929-2.347 4.966 4.966 0 00-3.553-.314z"></path><path d="M28.515 44.944a1.912 1.912 0 10-2.939.867 1.911 1.911 0 102.939-.867zM34.516 40.613a4.05 4.05 0 00-2.355 1.709 3.245 3.245 0 005.133-.843 4.052 4.052 0 00-2.778-.866zM33.156 39.68a1.56 1.56 0 10-1.066 2.576 3.882 3.882 0 001.066-2.576zM39.998 36.324a4.052 4.052 0 00-2.673 1.151 3.246 3.246 0 005.193.3 4.051 4.051 0 00-2.52-1.451zM38.876 35.115a1.56 1.56 0 10-1.6 2.28 3.881 3.881 0 001.6-2.28zM46.483 31.13a4.056 4.056 0 00-2.3 1.786 3.245 3.245 0 005.1-1.012 4.048 4.048 0 00-2.8-.774z"></path><path d="M79.55 75.977a2.586 2.586 0 00-2.692-2.574v-.011a2.583 2.583 0 10-.124-5.153h.562a2.293 2.293 0 000-4.585l-10.831.017s2.775-8.146 2.836-8.283a2.104 2.104 0 10-3.842-1.717c-1.412 3.16-3.743 5.427-6.171 7.557a11.91 11.91 0 01-6.84 2.368l-3.689-.02v20.138h28.353v-.022a2.565 2.565 0 00-.126-5.126v-.02a2.569 2.569 0 002.564-2.569zm-2.819-7.738h0z" stroke="#fff" stroke-miterlimit="10" fill="none"></path><path d="M108.375 99.433a54.273 54.273 0 00-60.8-83.912M21.253 34.754a54.254 54.254 0 0043.68 86.43 54.671 54.671 0 008.552-.67"></path></g></svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Performance Guaranteed</h3><p>Our QA process coupled with world-class support teams and a large user community means that our components will always work the way they’re supposed to—guaranteed.</p></div> <div id="ContentPlaceholder1_C1107_Col04" class="sf_colsIn col-4 u-l-col-6 u-s-col-12 u-s-mb4" data-sf-element="Column 5" data-placeholder-label="Column 5"> <div class="u-w13 u-h13 u-mb3"> <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120" title="Progress Telerik Template support,Modern UI" alt="Progress Telerik Template support,Modern UI"><defs><lineargradient id="svg-grad" x1="0.845" x2="0.327" y2="0.926" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#ffb318"></stop><stop offset="1" stop-color="#ff9b4b"></stop></lineargradient> </defs> <path fill="url(#svg-grad)" d="M1066.4,324H959.6a6.6,6.6,0,0,0-6.6,6.605v79.79A6.6,6.6,0,0,0,959.6,417h32.8l-4.664,23.318c-.381,1.9.076,3.682,2.019,3.682h45.262a3.338,3.338,0,0,0,3.286-3.922L1034.2,417h32.2a6.6,6.6,0,0,0,6.6-6.605v-79.79A6.6,6.6,0,0,0,1066.4,324Z" transform="translate(-953 -324)"></path><g class="icon"><path d="M88 59.5v-17M81.5 42.5v17M88 22.5V11.917A5.917 5.917 0 0082.083 6H37.917A5.917 5.917 0 0032 11.917v51.547l1.494-.882 5.006-3V13.5h43v9M32 78.972v22.111A5.917 5.917 0 0037.917 107h44.166A5.917 5.917 0 0088 101.083V77.5m-6.5 0v10h-43V75.138M60 98.5a2.5 2.5 0 112.5-2.5 2.5 2.5 0 01-2.5 2.5z"></path></g> <g class="icon Text--b9 u-c-white"><path d="M104.5 22.525V22.5h-33v.025c-.167-.008-.331-.025-.5-.025-5.8 0-10.5 3.7-10.5 9.5A10.5 10.5 0 0071 42.5c.169 0 .333-.017.5-.025v.025h33v-.025A10.492 10.492 0 00114.5 32c0-5.63-4.435-9.212-10-9.475zm-1 14.975a5 5 0 115-5 5 5 0 01-5 5zM53.5 50.6L33.492 62.586 15.413 73.251l.009.014c-.094.049-.19.093-.283.148a6.678 6.678 0 106.787 11.5c.092-.054.177-.117.266-.175l.008.014 18.079-10.665 19.992-12.014L66.5 50.5zm6.725 11.474L53.5 50.5M76.5 59.5h18v18h-18z"></path></g> <g class="icon"><path d="M81.5 66.5L88 73l12.5-13.5"></path></g> </svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Modern, Beautiful, Accessible UI</h3><p>Kendo UI takes the pain out of implementing modern UI. Use the included Material, Bootstrap, or Kendo themes or implement your own. In any case, accessibility is a priority.</p></div> <div id="ContentPlaceholder1_C1107_Col05" class="sf_colsIn col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 6" data-placeholder-label="Column 6"> <div class="u-w13 u-h13 u-mb3"> <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 107" title="Progress Telerik Frameworks" alt="Progress Telerik Frameworks"><defs><lineargradient id="svg-grad" x1="0" x2="0" y1="0" y2="1" gradientUnits="objectBoundingBox"><stop offset="0"></stop><stop offset="1"></stop></lineargradient> </defs> <path d="M111.273 58.432a8.924 8.924 0 010 11.136 17.533 17.533 0 00-3.414 12.753 8.906 8.906 0 01-5.57 9.635 17.482 17.482 0 00-9.333 9.333 8.9 8.9 0 01-9.635 5.57 17.533 17.533 0 00-12.753 3.414 8.924 8.924 0 01-11.136 0 17.533 17.533 0 00-12.753-3.414 8.906 8.906 0 01-9.635-5.57 17.482 17.482 0 00-9.333-9.333 8.9 8.9 0 01-5.57-9.635 17.533 17.533 0 00-3.414-12.753 8.924 8.924 0 010-11.136 17.533 17.533 0 003.414-12.753 8.906 8.906 0 015.57-9.635 17.482 17.482 0 009.333-9.333 8.9 8.9 0 019.635-5.57 17.533 17.533 0 0012.753-3.414 8.924 8.924 0 0111.136 0 17.533 17.533 0 0012.753 3.414 8.906 8.906 0 019.635 5.57 17.482 17.482 0 009.333 9.333 8.9 8.9 0 015.57 9.635 17.533 17.533 0 003.414 12.753z" fill="url(#svg-grad)" transform="translate(-2 -11)"></path><g class="icon"><path d="M117 43V4a4 4 0 00-4-4H73.475c.008.167.025.331.025.5a10 10 0 01-20 0c0-.169.017-.333.025-.5H14a4 4 0 00-4 4v39a10 10 0 000 20v40a4 4 0 004 4h39.525c-.008-.167-.025-.331-.025-.5a10 10 0 0120 0c0 .169-.017.333-.025.5H113a4 4 0 004-4V63a10 10 0 000-20z"></path></g> <g class="icon Text--b9 u-c-white"><path d="M78.5 41.5l12 12-12 12"></path><path d="M48.5 41.5l-12 12 12 12"></path><path d="M67.5 40.5l-10 26"></path></g> </svg> </div> <h3 class="u-fs28 u-lh1 u-mb2 h5">Ready-to-Use Page Templates and Building Blocks</h3><p>Easy to copy-paste app-building blocks that lay out combinations of UI components and professionally designed, customizable page templates.</p></div> </div> <div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1110_Col00" class="sf_colsIn col-4 u-l-col-6 u-s-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <div class="Dropdown" data-tlrk-plugin="dropdown"><a data-sf-ec-immutable="" href="#download-trial-file" aria-label="Start Free Trial Button" class="Dropdown-control u-db Btn Btn--prim2 Btn--l u-fs24 track--kui-trial-cta2-dropdown">Start Free Trial <span class="Dropdown-arrow"></span></a> <div class="DashMenu u-pa u-fs20 u-tac"><a class="u-db u-wsn track--kui-trial-cta2-jquery" href="/try/kendo-ui">UI for jQuery</a> <a class="u-db u-wsn track--kui-trial-cta2-angular" href="/try/kendo-angular-ui">UI for Angular</a> <a class="u-db u-wsn track--kui-trial-cta2-react" href="/try/kendo-react-ui">UI for React</a> <a class="u-db u-wsn track--kui-trial-cta2-vue" href="/try/kendo-vue-ui">UI for Vue</a> </div></div></div> </div> </div> </section> <section class="Section Section--patch u-pt0 u-pb0 u-pr u-s-p0 u-za Sctn-awards" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1353_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <div class="row u-pt3 u-pb3 u-bg-blue u-br10 u-xl-ml0 u-xl-mr0 u-m-pt2 u-m-pb2 u-m-pr3 u-m-pl3 u-ml0 u-mr0 "><div class="col-3 u-l-col-12 u-l-mb3 u-ml5 u-l-ml0 u-m-ml0 u-s-ml0"><h4>Awards</h4><p class="u-fs20 ">Greatness-it’s one thing to say you have it, but it means more when others recognize it. Telerik is proud to hold the following industry awards.</p></div><div class="col-8 u-l-col-12"><div class="row"><div class="u-l-col-2 col-3 u-s-mb3 u-tac u-l-mt0"><a target="_blank" href="https://www.g2.com/reports/grid-report-for-component-libraries-fall-2024.embed?featured=progress-telerik&secure%5Bgated_consumer%5D=157d051c-f1ed-4c6c-b0ac-adeaa9853367&secure%5Btoken%5D=3f23f8546a9815117c08d3e5d493e063c0ebabac40ef02d67242a64466cd38d1&utm_campaign=gate-2010637" class="u-c-white" style="text-decoration:underline;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/awards/badge-leader-fall.png?sfvrsn=438d4ff5_3" title="G2 Leader Fall 2024" alt="G2 Leader Fall 2024 " class="u-m-w15 u-w10" /><p class="u-fs14 u-ff-sans0 u-pt1">G2 Leader Fall 2024 </p></a> </div><div class="u-l-col-2 col-3 u-s-mb3 u-tac u-l-mt0"><a target="_blank" href="https://www.g2.com/reports/enterprise-grid-report-for-component-libraries-fall-2024.embed?featured=progress-telerik&secure%5Bgated_consumer%5D=a4a9e07e-c67f-4816-821a-127cce6ab57e&secure%5Btoken%5D=6b4ff6b83afd383dc37be83c448c4412f6b44cbf98f83957286893a1a3e38c06&utm_campaign=gate-2010594" class="u-c-white" style="text-decoration:underline;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/awards/badge-leader-enterprise-fall.png?sfvrsn=bfe0cf2d_3" title="G2 Leader Enterprise Fall 2024" class="u-m-w15 u-w10" /><p class="u-fs14 u-ff-sans0 u-pt1">G2 Leader Enterprise Fall 2024</p></a> </div><div class="u-l-col-2 col-3 u-s-mb3 u-tac u-l-mt0"><a target="_blank" href="https://www.g2.com/reports/mid-market-relationship-index-for-component-libraries-fall-2024.embed?featured=progress-kendo-ui&secure%5Bgated_consumer%5D=96d29863-c070-45ee-a6d8-cf9f43630f84&secure%5Btoken%5D=9301190c86719562b0a1a8778010a4128335a8e98d8ff2d0d9498a1bae2267dc&utm_campaign=gate-2011313" class="u-c-white" style="text-decoration:underline;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/awards/badge-easiest-to-do-mid-ma.png?sfvrsn=b2cc87de_3" title="G2 Easiest To Do Business With Mid-Market Fall 2024" alt="G2 Easiest To Do Business With Mid-Market Fall 2024" class="u-m-w15 u-w10" /><p class="u-fs14 u-ff-sans0 u-pt1">G2 Easiest To Do Business With Mid-Market Fall 2024</p></a> </div><div class="u-l-col-2 col-3 u-s-mb3 u-tac u-l-mt0"><a target="_blank" href="https://www.g2.com/products/progress-kendo-ui/reviews" class="u-c-white" style="text-decoration:underline;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/awards/badge-users-loveus.png?sfvrsn=5f1e996a_7" title="G2 Users Love Us Fall 2024 " alt="G2 Users Love Us Fall 2024 " class="u-m-w15 u-w10" /><p class="u-fs14 u-ff-sans0 u-pt1">G2 Users Love Us Fall 2024 </p></a> </div></div></div></div> </div> </section> <section id="ContentPlaceholder1_C1124_Col00" class="sf_colsIn Section u-pt8 u-pb8 u-ps u-tint-blue1 sctn-Components" data-sf-element="Section" data-placeholder-label="Section Empty"><div id="ContentPlaceholder1_C1125_Col00" class="sf_colsIn container" data-sf-element="GridContainer" data-placeholder-label="GridContainer"> <h2 class="u-mb1 js-components" id="components">All Kendo UI JavaScript Component Libraries</h2><p class="u-fs28 u-fw3 u-mb6 col-10">With JavaScript component libraries built specifically for jQuery, Angular, React, and Vue, Kendo UI delivers everything you need to build modern, beautiful, responsive apps.</p></div> <div id="ContentPlaceholder1_C1127_Col00" class="sf_colsIn u-pl1 u-pr1 u-l-pt2" data-sf-element="GridContainer" data-placeholder-label="GridContainer"><div id="ContentPlaceholder1_C1128_Col00" class="sf_colsIn Section Section--mid u-p0 u-b1 u-mt5" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1133_Col00" class="sf_colsIn container" data-sf-element="GridContainer" data-placeholder-label="GridContainer"> <div class="Links-wrap--top u-nmt3 u-no-pseudo"> <nav class="Navigator-links u-df u-pb4 u-tac" data-tlrk-plugin="tlrkTabs" data-tlrktabs-tabs-width="auto" data-tlrktabs-wrapper-selector=".tlrk-tabs-2" data-tlrktabs-active-tab="1" data-tlrktabs-scroll-to-tabs="false" data-tlrktabs-set-anchors="false"><a data-sf-ec-immutable="" href="#angular" class="track--kui-componentstab-angular is-active u-m-ml1">Kendo UI for Angular</a> <a data-sf-ec-immutable="" href="#react" class="track--kui-componentstab-react">KendoReact</a> <a data-sf-ec-immutable="" href="#vue" class="track--kui-componentstab-vue">Kendo UI for Vue</a> <a data-sf-ec-immutable="" href="#jquery" class="track--kui-componentstab-jquery">Kendo UI for jQuery</a> </nav> </div> <div id="ContentPlaceholder1_C1136_Col00" class="sf_colsIn Navigator-wrap tlrk-tabs-2 u-pt1 u-pb4 u-ha u-l-pt0 u-l-pb0" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1138_Col00" class="sf_colsIn Navigator-content Navigator-content--mobile is-active" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1363_Col00" class="sf_colsIn u-pb4" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1396_Col00" class="sf_colsIn" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <nav class="components-nav u-mb5" data-tlrk-plugin="tlrkTabs" data-tlrktabs-wrapper-selector=".tlrk-tabs" data-tlrktabs-active-tab="1" data-tlrktabs-scroll-to-tabs="false" data-tlrktabs-set-anchors="false" data-tlrktabs-animate-height="true"><a data-sf-ec-immutable="" href="#components" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Components</a> <a data-sf-ec-immutable="" href="#page-templates" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Page Templates</a> <a data-sf-ec-immutable="" href="#building-blocks" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Building Blocks</a></nav><div id="ContentPlaceholder1_C1397_Col00" class="sf_colsIn tlrk-tabs" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1371_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <p class="u-fw3 u-fs24 u-c-blue2 u-mb3">Over 110 native Angular components that most enterprise developers trust for modern UI. </p> <style> .LabelB { font-weight: 400 !important; } </style> <div class="row u-hyphenate"> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Charts</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/area-chart" class="u-ff-sans u-fs20"> <span>Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bar-chart" class="u-ff-sans u-fs20"> <span>Bar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/box-plot" class="u-ff-sans u-fs20"> <span>Box Plot</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bubble-chart" class="u-ff-sans u-fs20"> <span>Bubble Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bullet-chart" class="u-ff-sans u-fs20"> <span>Bullet Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chart-wizard" class="u-ff-sans u-fs20"> <span>Chart Wizard</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/charts" class="u-ff-sans u-fs20"> <span>Charts</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/donut-chart" class="u-ff-sans u-fs20"> <span>Donut Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/funnel-chart" class="u-ff-sans u-fs20"> <span>Funnel Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/heatmap" class="u-ff-sans u-fs20"> <span>Heatmap</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/line-chart" class="u-ff-sans u-fs20"> <span>Line Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pie-chart" class="u-ff-sans u-fs20"> <span>Pie Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/polar-chart" class="u-ff-sans u-fs20"> <span>Polar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pyramid-chart" class="u-ff-sans u-fs20"> <span>Pyramid Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radar-chart" class="u-ff-sans u-fs20"> <span>Radar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/range-area-chart" class="u-ff-sans u-fs20"> <span>Range Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sankey-diagram" class="u-ff-sans u-fs20"> <span>Sankey Diagram</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scatter-chart" class="u-ff-sans u-fs20"> <span>Scatter Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sparkline" class="u-ff-sans u-fs20"> <span>Sparkline</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/waterfall-chart" class="u-ff-sans u-fs20"> <span>Waterfall Chart</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editor</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/editor" class="u-ff-sans u-fs20"> <span>Rich Text Editor</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">TreeList</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/treelist" class="u-ff-sans u-fs20"> <span>TreeList</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduler</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/gantt-chart" class="u-ff-sans u-fs20"> <span>Gantt Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scheduler" class="u-ff-sans u-fs20"> <span>Scheduler</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Progress Bars</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/chunkprogressbar" class="u-ff-sans u-fs20"> <span>ChunkProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/circularprogressbar" class="u-ff-sans u-fs20"> <span>CircularProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/progressbar" class="u-ff-sans u-fs20"> <span>Progress Bar</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Buttons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/button" class="u-ff-sans u-fs20"> <span>Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/buttongroup" class="u-ff-sans u-fs20"> <span>ButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chip" class="u-ff-sans u-fs20"> <span>Chip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chiplist" class="u-ff-sans u-fs20"> <span>ChipList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdownbutton" class="u-ff-sans u-fs20"> <span>DropdownButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/floatingactionbutton" class="u-ff-sans u-fs20"> <span>Floating Action Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/splitbutton" class="u-ff-sans u-fs20"> <span>SplitButton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Common Features</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/data-query" class="u-ff-sans u-fs20"> <span>Data Query</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/date-math" class="u-ff-sans u-fs20"> <span>Date Math</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drag-and-drop" class="u-ff-sans u-fs20"> <span>Drag-and-Drop</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drawing" class="u-ff-sans u-fs20"> <span>Drawing</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/excel-export" class="u-ff-sans u-fs20"> <span>Excel Export</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pdf-export" class="u-ff-sans u-fs20"> <span>PDF Export</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pdfviewer" class="u-ff-sans u-fs20"> <span>PDFViewer</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Conversational UI</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/aiprompt" class="u-ff-sans u-fs20"> <span>AIPrompt</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/conversational-ui" class="u-ff-sans u-fs20"> <span>Conversational UI</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Indicators</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/badge" class="u-ff-sans u-fs20"> <span>Badge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/loader" class="u-ff-sans u-fs20"> <span>Loader</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/skeleton" class="u-ff-sans u-fs20"> <span>Skeleton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Navigation</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/actionsheet" class="u-ff-sans u-fs20"> <span>ActionSheet</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/appbar" class="u-ff-sans u-fs20"> <span>AppBar (NavBar)</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bottomnavigation" class="u-ff-sans u-fs20"> <span>BottomNavigation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/breadcrumb" class="u-ff-sans u-fs20"> <span>BreadCrumb</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drawer" class="u-ff-sans u-fs20"> <span>Drawer</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Date Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/calendar" class="u-ff-sans u-fs20"> <span>Calendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dateinput" class="u-ff-sans u-fs20"> <span>DateInput</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/datepicker" class="u-ff-sans u-fs20"> <span>DatePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/daterange" class="u-ff-sans u-fs20"> <span>DateRange</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/datetimepicker" class="u-ff-sans u-fs20"> <span>DateTimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiviewcalendar" class="u-ff-sans u-fs20"> <span>MultiViewCalendar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/timepicker" class="u-ff-sans u-fs20"> <span>TimePicker</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dialogs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/dialog" class="u-ff-sans u-fs20"> <span>Dialog</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/window" class="u-ff-sans u-fs20"> <span>Window</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Labels</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/floating-label" class="u-ff-sans u-fs20"> <span>FloatingLabel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/label" class="u-ff-sans u-fs20"> <span>Label</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Icons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/icon" class="u-ff-sans u-fs20"> <span>Icon</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/svgicon" class="u-ff-sans u-fs20"> <span>SVGIcon</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Design</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/typography" class="u-ff-sans u-fs20"> <span>Typography</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Diagrams and Maps</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/map-(beta)" class="u-ff-sans u-fs20"> <span>Map</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dropdowns</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/autocomplete" class="u-ff-sans u-fs20"> <span>AutoComplete</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/combobox" class="u-ff-sans u-fs20"> <span>ComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdownlist" class="u-ff-sans u-fs20"> <span>DropDownList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdowntree" class="u-ff-sans u-fs20"> <span>DropDownTree</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multicolumncombobox" class="u-ff-sans u-fs20"> <span>MultiColumnComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiselect" class="u-ff-sans u-fs20"> <span>MultiSelect</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiselecttree" class="u-ff-sans u-fs20"> <span>MultiSelectTree</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gauges</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/arcgauge" class="u-ff-sans u-fs20"> <span>ArcGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/circulargauge" class="u-ff-sans u-fs20"> <span>CircularGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/lineargauge" class="u-ff-sans u-fs20"> <span>LinearGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radialgauge" class="u-ff-sans u-fs20"> <span>RadialGauge</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Grids</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/grid" class="u-ff-sans u-fs20"> <span>Grid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pivotgrid" class="u-ff-sans u-fs20"> <span>PivotGrid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/spreadsheet" class="u-ff-sans u-fs20"> <span>Spreadsheet</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Upload</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/file-saver" class="u-ff-sans u-fs20"> <span>File Saver</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/fileselect" class="u-ff-sans u-fs20"> <span>File Select</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/upload" class="u-ff-sans u-fs20"> <span>Upload</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/checkbox" class="u-ff-sans u-fs20"> <span>Checkbox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorgradient" class="u-ff-sans u-fs20"> <span>ColorGradient</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorpalette" class="u-ff-sans u-fs20"> <span>ColorPalette</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorpicker" class="u-ff-sans u-fs20"> <span>ColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/flatcolorpicker" class="u-ff-sans u-fs20"> <span>FlatColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/formfield" class="u-ff-sans u-fs20"> <span>FormField</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/maskedtextbox" class="u-ff-sans u-fs20"> <span>MaskedTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/numerictextbox" class="u-ff-sans u-fs20"> <span>NumericTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radiobutton" class="u-ff-sans u-fs20"> <span>RadioButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/rangeslider" class="u-ff-sans u-fs20"> <span>RangeSlider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/rating" class="u-ff-sans u-fs20"> <span>Rating</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/signature" class="u-ff-sans u-fs20"> <span>Signature</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/slider" class="u-ff-sans u-fs20"> <span>Slider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/switch" class="u-ff-sans u-fs20"> <span>Switch</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/textarea" class="u-ff-sans u-fs20"> <span>TextArea</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/textbox" class="u-ff-sans u-fs20"> <span>TextBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/treeview" class="u-ff-sans u-fs20"> <span>TreeView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Bar & QR Codes</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/barcode" class="u-ff-sans u-fs20"> <span>Barcode Generator</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/qr-code" class="u-ff-sans u-fs20"> <span>QR Code</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Tools</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/filter" class="u-ff-sans u-fs20"> <span>Filter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pager" class="u-ff-sans u-fs20"> <span>Pager</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Layout</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/avatar" class="u-ff-sans u-fs20"> <span>Avatar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/card" class="u-ff-sans u-fs20"> <span>Card</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/contextmenu" class="u-ff-sans u-fs20"> <span>ContextMenu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/expansionpanel" class="u-ff-sans u-fs20"> <span>ExpansionPanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/gridlayout" class="u-ff-sans u-fs20"> <span>GridLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/hint" class="u-ff-sans u-fs20"> <span>Hint</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/listbox" class="u-ff-sans u-fs20"> <span>ListBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/listview" class="u-ff-sans u-fs20"> <span>ListView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/menu" class="u-ff-sans u-fs20"> <span>Menu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/notification" class="u-ff-sans u-fs20"> <span>Notification</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/panelbar" class="u-ff-sans u-fs20"> <span>PanelBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/popover" class="u-ff-sans u-fs20"> <span>Popover</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/popup" class="u-ff-sans u-fs20"> <span>Popup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/ripple" class="u-ff-sans u-fs20"> <span>Ripple</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scrollview" class="u-ff-sans u-fs20"> <span>ScrollView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sortable" class="u-ff-sans u-fs20"> <span>Sortable</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/splitter" class="u-ff-sans u-fs20"> <span>Splitter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/stacklayout" class="u-ff-sans u-fs20"> <span>Stacklayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/stepper" class="u-ff-sans u-fs20"> <span>Stepper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tabstrip" class="u-ff-sans u-fs20"> <span>TabStrip</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tilelayout" class="u-ff-sans u-fs20"> <span>TileLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/timeline" class="u-ff-sans u-fs20"> <span>Timeline</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/toolbar" class="u-ff-sans u-fs20"> <span>Toolbar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tooltip" class="u-ff-sans u-fs20"> <span>Tooltip</span> </a> </li> </ul> </div> </div></div> <div id="ContentPlaceholder1_C1372_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1373_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Dashboard</h3> <div class="row row--equal" id="templates-dashboards"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/healthcare-analytics.png?sfvrsn=4cf18b11_1" loading="lazy" alt="healthcare analytics dashboard" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/healthcare-admin" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Healthcare Admin</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/social-media-management.png?sfvrsn=cfef7939_1" loading="lazy" alt="social media management" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/social-management" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Social Media Management</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/fintech-analytics.png?sfvrsn=92d50a0a_1" loading="lazy" alt="fintech analytics" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/fintech-dashboard" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Fintech Dashboard</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/machine-manufacturing.png?sfvrsn=f7a814d1_1" loading="lazy" alt="machine manufacturing" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/machine-manufacturing" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Machine Manufacturing</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1376_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Landing Pages</h3> <div class="row row--equal" id="templates-landing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/travel.png?sfvrsn=8c72d4db_1" loading="lazy" alt="travel" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/travel" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Travel</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/automotive-industry.png?sfvrsn=e91b3f6b_1" loading="lazy" alt="automotive" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/automotive-industry" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Automotive Industry</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/saas-product.png?sfvrsn=5dadf515_1" loading="lazy" alt="saas" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/saas-product" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Saas Product</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/international-bank.png?sfvrsn=3ea802c2_1" loading="lazy" alt="international bank" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/international-bank" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">International Bank</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1379_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">E-commerce/Product Listing Page</h3> <div class="row row--equal" id="templates-listing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/fashion.png?sfvrsn=15b8c250_1" loading="lazy" alt="fashion" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/fashion-catalog" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Fashion Catalogue</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/real-estate.png?sfvrsn=71445995_1" loading="lazy" alt="real estate" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/real-estate" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Real Estate</a> </div></div></div></div></div> <div class="row u-pb4" data-sf-element="Row"> <div id="ContentPlaceholder1_C1382_Col00" class="sf_colsIn col-3" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a href="/page-templates-and-ui-blocks" class="Btn Btn--prim u-db u-fs20">Learn How it Works</a></div> </div> </div> <div id="ContentPlaceholder1_C1384_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1385_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Landing Pages</h3> <div class="row row--equal" id="blocks-landing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/hero.png?sfvrsn=c7648b2b_1" loading="lazy" alt="hero" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/hero" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Hero</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/features.png?sfvrsn=27b3e254_1" loading="lazy" alt="features" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/features" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Features</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/incentives.png?sfvrsn=bca82fd9_1" loading="lazy" alt="incentives" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/incentives" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Incentives</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/newsletter.png?sfvrsn=10e59d1f_1" loading="lazy" alt="newsletter" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/newsletter" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Newsletter</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/stats.png?sfvrsn=cff5320f_1" loading="lazy" alt="stats" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/stats" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Stats</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/contact-form.png?sfvrsn=332b5cea_1" loading="lazy" alt="contact form" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/testimonials" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Testimonials</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/contact-form.png?sfvrsn=332b5cea_1" loading="lazy" alt="contact form" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/contact-form" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Contact Form</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/partners-logoclouds.png?sfvrsn=3c910c59_1" loading="lazy" alt="partners or logoclouds" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/partners" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Partners/Logoclouds</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/location.png?sfvrsn=d49f7a1e_1" loading="lazy" alt="location" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/locations" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Location</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/footer.png?sfvrsn=32945fb_1" loading="lazy" alt="footer" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/footer" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Footer</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/cards.png?sfvrsn=40a2221c_1" loading="lazy" alt="offices" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/cards" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Cards</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/pricing-cards.png?sfvrsn=a88767f9_1" loading="lazy" alt="pricing cards" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/pricing-section" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Pricing Cards</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1388_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Listing Pages</h3> <div class="row row--equal" id="blocks-listing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/filter.png?sfvrsn=110390bc_1" loading="lazy" alt="filter" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/filter" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Filter</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/flyout-navigation.png?sfvrsn=8ab8f75f_1" loading="lazy" alt="flyout navigation" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/flyout-navigation" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Flyout Navigation</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/product-card.png?sfvrsn=9fadd19e_1" loading="lazy" alt="product card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/product-card" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Product Cards</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/sorting.png?sfvrsn=bd069797_1" loading="lazy" alt="sorting" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/sorting" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Sorting</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1391_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Dashboards</h3> <div class="row row--equal" id="blocks-dashboards"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/top-navbar.png?sfvrsn=402b8daf_1" loading="lazy" alt="top navbar" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/top-navbar" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Top Navbar</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/compact-card.png?sfvrsn=2bbee8ea_1" loading="lazy" alt="compact card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/compact-card" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Compact Card</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/dashboard-card.png?sfvrsn=39c21766_2" loading="lazy" alt="dashboard card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">10 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/dashboard-card/" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Dashboard Card</a> </div></div></div></div></div> <div class="row u-pb4" data-sf-element="Row"> <div id="ContentPlaceholder1_C1394_Col00" class="sf_colsIn col-3" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a href="/page-templates-and-ui-blocks" class="Btn Btn--prim u-db u-fs20">Learn How it Works</a></div> </div> </div> </div> </div> </div> </div> <div id="ContentPlaceholder1_C1139_Col00" class="sf_colsIn Navigator-content Navigator-content--mobile" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1398_Col00" class="sf_colsIn u-pb4" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <nav class="components-nav u-mb5" data-tlrk-plugin="tlrkTabs" data-tlrktabs-wrapper-selector=".tlrk-tabs-react" data-tlrktabs-active-tab="1" data-tlrktabs-scroll-to-tabs="false" data-tlrktabs-set-anchors="false" data-tlrktabs-animate-height="true"><a data-sf-ec-immutable="" href="#components" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Components</a> <a data-sf-ec-immutable="" href="#page-templates" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Page Templates</a> <a data-sf-ec-immutable="" href="#building-blocks" class="u-ff-sans1 u-fs20 u-fw5 u-s-db u-s-m0">Building Blocks</a></nav><div id="ContentPlaceholder1_C1400_Col00" class="sf_colsIn tlrk-tabs-react" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1401_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper" style=" /* background: red; */ "> <p class="u-fw3 u-fs24 u-c-blue2 u-mb3">Cutting edge native React components on a mission to help developers build business apps much faster.</p> <style> .LabelB { font-weight: 400 !important; } </style> <div class="row u-hyphenate"> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Barcodes</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/barcode" class="u-ff-sans u-fs20"> <span>Barcode</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/qrcode" class="u-ff-sans u-fs20"> <span>QR Code</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Buttons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/button" class="u-ff-sans u-fs20"> <span>Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/buttongroup" class="u-ff-sans u-fs20"> <span>ButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/chip" class="u-ff-sans u-fs20"> <span>Chip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/chiplist" class="u-ff-sans u-fs20"> <span>ChipList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/dropdownbutton" class="u-ff-sans u-fs20"> <span>DropDownButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/floatingactionbutton" class="u-ff-sans u-fs20"> <span>Floating Action Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/splitbutton" class="u-ff-sans u-fs20"> <span>SplitButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/toolbar" class="u-ff-sans u-fs20"> <span>Toolbar</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Charts</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/area-chart" class="u-ff-sans u-fs20"> <span>Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/bar-chart" class="u-ff-sans u-fs20"> <span>Bar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/box-plot" class="u-ff-sans u-fs20"> <span>Box Plot</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/bubble-chart" class="u-ff-sans u-fs20"> <span>Bubble Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/bullet-chart" class="u-ff-sans u-fs20"> <span>Bullet Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/chart-wizard-" class="u-ff-sans u-fs20"> <span>Chart Wizard</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/charts" class="u-ff-sans u-fs20"> <span>Charts</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/donut-chart" class="u-ff-sans u-fs20"> <span>Donut Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/funnel-chart" class="u-ff-sans u-fs20"> <span>Funnel Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/heatmap" class="u-ff-sans u-fs20"> <span>Heatmap Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/line-chart" class="u-ff-sans u-fs20"> <span>Line Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/orgchart" class="u-ff-sans u-fs20"> <span>OrgChart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/pie-chart" class="u-ff-sans u-fs20"> <span>Pie Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/polar-chart" class="u-ff-sans u-fs20"> <span>Polar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/pyramid-chart" class="u-ff-sans u-fs20"> <span>Pyramid Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/radar-chart" class="u-ff-sans u-fs20"> <span>Radar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/range-area-chart" class="u-ff-sans u-fs20"> <span>Range Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/sankey-chart" class="u-ff-sans u-fs20"> <span>Sankey Diagram</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/scatter-chart" class="u-ff-sans u-fs20"> <span>Scatter Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/sparkline" class="u-ff-sans u-fs20"> <span>Sparkline</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Common Utilities</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/drag-and-drop" class="u-ff-sans u-fs20"> <span>Drag & Drop Utilities</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/icon-svgicon" class="u-ff-sans u-fs20"> <span>Icon & SvgIcon</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/typography" class="u-ff-sans u-fs20"> <span>Typography</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Conversational UI</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/aiprompt" class="u-ff-sans u-fs20"> <span>AIPrompt</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/conversationalui" class="u-ff-sans u-fs20"> <span>Conversational UI</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Grid</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/grid" class="u-ff-sans u-fs20"> <span>Data Grid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/server-data-grid" class="u-ff-sans u-fs20"> <span>Server Data Grid</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Query</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/dataquery" class="u-ff-sans u-fs20"> <span>Data Query</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Tools</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/filter" class="u-ff-sans u-fs20"> <span>Filter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/pager" class="u-ff-sans u-fs20"> <span>Pager</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/spreadsheet" class="u-ff-sans u-fs20"> <span>SpreadSheet</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Date Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/calendar" class="u-ff-sans u-fs20"> <span>Calendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/dateinput" class="u-ff-sans u-fs20"> <span>DateInput</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/datepicker" class="u-ff-sans u-fs20"> <span>DatePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/daterangepicker" class="u-ff-sans u-fs20"> <span>DateRangePicker</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/datetimepicker" class="u-ff-sans u-fs20"> <span>DateTimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/multiviewcalendar" class="u-ff-sans u-fs20"> <span>MultiViewCalendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/timepicker" class="u-ff-sans u-fs20"> <span>TimePicker</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Date Math</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/datemath" class="u-ff-sans u-fs20"> <span>Date Math</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dialogs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/dialog" class="u-ff-sans u-fs20"> <span>Dialog</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/window" class="u-ff-sans u-fs20"> <span>Window</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Drawing</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/drawing" class="u-ff-sans u-fs20"> <span>Drawing Library</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dropdowns</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/autocomplete" class="u-ff-sans u-fs20"> <span>AutoComplete</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/combobox" class="u-ff-sans u-fs20"> <span>ComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/dropdownlist" class="u-ff-sans u-fs20"> <span>DropDownList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/dropdowntree" class="u-ff-sans u-fs20"> <span>DropDownTree</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/multicolumncombobox" class="u-ff-sans u-fs20"> <span>MultiColumn ComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/multiselect" class="u-ff-sans u-fs20"> <span>MultiSelect</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/multiselecttree" class="u-ff-sans u-fs20"> <span>MultiSelectTree</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editor</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/editor" class="u-ff-sans u-fs20"> <span>Editor</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Excel Export</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/excelexport" class="u-ff-sans u-fs20"> <span>Excel Export</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">File Manager</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/filemanager" class="u-ff-sans u-fs20"> <span>FileManager Template</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">File Saver</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/filesaver" class="u-ff-sans u-fs20"> <span>File Saver</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Form</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/fieldarray" class="u-ff-sans u-fs20"> <span>FieldArray</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/fieldwrapper" class="u-ff-sans u-fs20"> <span>FieldWrapper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/form" class="u-ff-sans u-fs20"> <span>Form</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/formelement" class="u-ff-sans u-fs20"> <span>FormElement</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gantt Chart</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/gantt-chart" class="u-ff-sans u-fs20"> <span>Gantt Chart</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gauges</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/arcgauge" class="u-ff-sans u-fs20"> <span>ArcGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/circulargauge" class="u-ff-sans u-fs20"> <span>Circular Gauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/lineargauge" class="u-ff-sans u-fs20"> <span>LinearGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/radialgauge" class="u-ff-sans u-fs20"> <span>RadialGauge</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Indicators</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/badge" class="u-ff-sans u-fs20"> <span>Badge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/loader" class="u-ff-sans u-fs20"> <span>Loader</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/skeleton" class="u-ff-sans u-fs20"> <span>Skeleton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/checkbox" class="u-ff-sans u-fs20"> <span>Checkbox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/colorgradient" class="u-ff-sans u-fs20"> <span>ColorGradient</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/colorpalette" class="u-ff-sans u-fs20"> <span>ColorPalette</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/colorpicker" class="u-ff-sans u-fs20"> <span>ColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/flatcolorpicker" class="u-ff-sans u-fs20"> <span>FlatColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/input" class="u-ff-sans u-fs20"> <span>Input</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/maskedtextbox" class="u-ff-sans u-fs20"> <span>MaskedTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/numerictextbox" class="u-ff-sans u-fs20"> <span>NumericTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/radiobutton" class="u-ff-sans u-fs20"> <span>RadioButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/radiogroup" class="u-ff-sans u-fs20"> <span>RadioButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/rangeslider" class="u-ff-sans u-fs20"> <span>RangeSlider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/rating" class="u-ff-sans u-fs20"> <span>Rating</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/signature" class="u-ff-sans u-fs20"> <span>Signature</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/slider" class="u-ff-sans u-fs20"> <span>Slider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/switch" class="u-ff-sans u-fs20"> <span>Switch</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/textarea" class="u-ff-sans u-fs20"> <span>TextArea</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Labels</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/error" class="u-ff-sans u-fs20"> <span>Error</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/floating-labels" class="u-ff-sans u-fs20"> <span>Floating Label</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/hint" class="u-ff-sans u-fs20"> <span>Hint</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/labels" class="u-ff-sans u-fs20"> <span>Label</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Layout</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/appbar" class="u-ff-sans u-fs20"> <span>AppBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/avatar" class="u-ff-sans u-fs20"> <span>Avatar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/bottomnavigation" class="u-ff-sans u-fs20"> <span>BottomNavigation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/breadcrumb" class="u-ff-sans u-fs20"> <span>Breadcrumb</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/card" class="u-ff-sans u-fs20"> <span>Card</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/contextmenu" class="u-ff-sans u-fs20"> <span>ContextMenu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/drawer" class="u-ff-sans u-fs20"> <span>Drawer</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/expansionpanel" class="u-ff-sans u-fs20"> <span>ExpansionPanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/gridlayout" class="u-ff-sans u-fs20"> <span>Grid Layout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/menu" class="u-ff-sans u-fs20"> <span>Menu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/panelbar" class="u-ff-sans u-fs20"> <span>PanelBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/splitter" class="u-ff-sans u-fs20"> <span>Splitter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/stacklayout" class="u-ff-sans u-fs20"> <span>Stack Layout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/stepper" class="u-ff-sans u-fs20"> <span>Stepper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/tabstrip" class="u-ff-sans u-fs20"> <span>TabStrip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/tilelayout" class="u-ff-sans u-fs20"> <span>TileLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/timeline" class="u-ff-sans u-fs20"> <span>Timeline</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">ListBox</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/listbox" class="u-ff-sans u-fs20"> <span>ListBox</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">ListView</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/listview" class="u-ff-sans u-fs20"> <span>ListView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Notifications</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/notification" class="u-ff-sans u-fs20"> <span>Notification</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">PDF Processing</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/pdfprocessing" class="u-ff-sans u-fs20"> <span>PDF Generator</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/pdfviewer" class="u-ff-sans u-fs20"> <span>PDF Viewer</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">PivotGrid</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/pivotgrid" class="u-ff-sans u-fs20"> <span>PivotGrid</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Popup</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/popup" class="u-ff-sans u-fs20"> <span>Popup</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Ripple</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/ripple" class="u-ff-sans u-fs20"> <span>Ripple</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduler</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/scheduler" class="u-ff-sans u-fs20"> <span>Scheduler</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">ScrollView</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/scrollview" class="u-ff-sans u-fs20"> <span>ScrollView (Carousel)</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Sortable</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/sortable" class="u-ff-sans u-fs20"> <span>Sortable</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Tooltips</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/popover" class="u-ff-sans u-fs20"> <span>Popover</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/tooltip" class="u-ff-sans u-fs20"> <span>Tooltip</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">TreeList</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/treelist" class="u-ff-sans u-fs20"> <span>TreeList</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">TreeView</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/treeview" class="u-ff-sans u-fs20"> <span>TreeView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Upload</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-react-ui/external-drop-zone" class="u-ff-sans u-fs20"> <span>External Drop Zone</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-react-ui/upload" class="u-ff-sans u-fs20"> <span>Upload</span> </a> </li> </ul> </div> </div></div> <div id="ContentPlaceholder1_C1402_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1404_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Dashboard</h3> <div class="row row--equal" id="templates-dashboards"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/healthcare-analytics.png?sfvrsn=4cf18b11_1" loading="lazy" alt="healthcare analytics dashboard" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/healthcare-admin" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Healthcare Admin</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/social-media-management.png?sfvrsn=cfef7939_1" loading="lazy" alt="social media management" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/social-management" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Social Media Management</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/fintech-analytics.png?sfvrsn=92d50a0a_1" loading="lazy" alt="fintech analytics" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/fintech-dashboard" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Fintech Dashboard</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/machine-manufacturing.png?sfvrsn=f7a814d1_1" loading="lazy" alt="machine manufacturing" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/machine-manufacturing" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Machine Manufacturing</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1407_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Landing Pages</h3> <div class="row row--equal" id="templates-landing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/travel.png?sfvrsn=8c72d4db_1" loading="lazy" alt="travel" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/travel" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Travel</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/automotive-industry.png?sfvrsn=e91b3f6b_1" loading="lazy" alt="automotive" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/automotive-industry" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Automotive Industry</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/saas-product.png?sfvrsn=5dadf515_1" loading="lazy" alt="saas" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/saas-product" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Saas Product</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/international-bank.png?sfvrsn=3ea802c2_1" loading="lazy" alt="international bank" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/international-bank" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">International Bank</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1410_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">E-commerce/Product Listing Page</h3> <div class="row row--equal" id="templates-listing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/fashion.png?sfvrsn=15b8c250_1" loading="lazy" alt="fashion" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/fashion-catalog" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Fashion Catalogue</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/real-estate.png?sfvrsn=71445995_1" loading="lazy" alt="real estate" /></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/templates/real-estate" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Real Estate</a> </div></div></div></div></div> <div class="row u-pb4" data-sf-element="Row"> <div id="ContentPlaceholder1_C1413_Col00" class="sf_colsIn col-3" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a href="/page-templates-and-ui-blocks" class="Btn Btn--prim u-db u-fs20">Learn How it Works</a></div> </div> </div> <div id="ContentPlaceholder1_C1403_Col00" class="sf_colsIn tab-container" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><div id="ContentPlaceholder1_C1415_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Landing Pages</h3> <div class="row row--equal" id="blocks-landing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/hero.png?sfvrsn=c7648b2b_1" loading="lazy" alt="hero" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/hero" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Hero</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/features.png?sfvrsn=27b3e254_1" loading="lazy" alt="features" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/features" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Features</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/incentives.png?sfvrsn=bca82fd9_1" loading="lazy" alt="incentives" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/incentives" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Incentives</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/newsletter.png?sfvrsn=10e59d1f_1" loading="lazy" alt="newsletter" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/newsletter" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Newsletter</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/stats.png?sfvrsn=cff5320f_1" loading="lazy" alt="stats" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/stats" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Stats</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/contact-form.png?sfvrsn=332b5cea_1" loading="lazy" alt="contact form" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/testimonials" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Testimonials</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/contact-form.png?sfvrsn=332b5cea_1" loading="lazy" alt="contact form" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/contact-form" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Contact Form</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/partners-logoclouds.png?sfvrsn=3c910c59_1" loading="lazy" alt="partners or logoclouds" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/partners" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Partners/Logoclouds</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/location.png?sfvrsn=d49f7a1e_1" loading="lazy" alt="location" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/locations" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Location</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/footer.png?sfvrsn=32945fb_1" loading="lazy" alt="footer" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/footer" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Footer</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/cards.png?sfvrsn=40a2221c_1" loading="lazy" alt="offices" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/cards" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Cards</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/pricing-cards.png?sfvrsn=a88767f9_1" loading="lazy" alt="pricing cards" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/landing-page/pricing-section" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Pricing Cards</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1418_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Listing Pages</h3> <div class="row row--equal" id="blocks-listing-pages"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/filter.png?sfvrsn=110390bc_1" loading="lazy" alt="filter" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/filter" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Filter</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/flyout-navigation.png?sfvrsn=8ab8f75f_1" loading="lazy" alt="flyout navigation" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">1 Block</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/flyout-navigation" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Flyout Navigation</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/product-card.png?sfvrsn=9fadd19e_1" loading="lazy" alt="product card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/product-card" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Product Cards</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/sorting.png?sfvrsn=bd069797_1" loading="lazy" alt="sorting" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">2 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/listing-page/sorting" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Sorting</a> </div></div></div></div></div> <div id="ContentPlaceholder1_C1421_Col00" class="sf_colsIn u-mb3" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <h3 class="u-fs30 u-fw4 u-mb3">Dashboards</h3> <div class="row row--equal" id="blocks-dashboards"><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/top-navbar.png?sfvrsn=402b8daf_1" loading="lazy" alt="top navbar" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">3 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/top-navbar" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Top Navbar</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/compact-card.png?sfvrsn=2bbee8ea_1" loading="lazy" alt="compact card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">4 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/compact-card" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Compact Card</a> </div></div></div><div class="col-3 u-mb3"><div class="Elevated u-br10 u-b1 u-oh u-pr u-h100"><div class="Embed Embed--16by9 u-bg-blue2"><div class="Section-bg"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/component-thumbnails/dashboard-card.png?sfvrsn=39c21766_2" loading="lazy" alt="dashboard card" /></div><div class="LabelB u-pa u-b0 u-r0"><span class="u-fs12 u-fw5">10 Blocks</span></div></div><hr class="u-m0" /><div class="u-tint-white u-p2 u-h100"><a href="/design-system/docs/ui-templates/building-blocks/dashboard/dashboard-card/" class="HoverBox u-a-white u-fs22 u-fw5 u-c-link" data-sf-ec-immutable="">Dashboard Card</a> </div></div></div></div></div> <div class="row u-pb4" data-sf-element="Row"> <div id="ContentPlaceholder1_C1424_Col00" class="sf_colsIn col-3" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a href="/page-templates-and-ui-blocks" class="Btn Btn--prim u-db u-fs20">Learn How it Works</a></div> </div> </div> </div> </div> </div> <div id="ContentPlaceholder1_C1140_Col00" class="sf_colsIn Navigator-content Navigator-content--mobile" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <p class="u-fw3 u-fs24 u-c-blue2 u-mb3">The most complete and up-to-date Vue component library available.</p> <style> .LabelB { font-weight: 400 !important; } </style> <div class="row u-hyphenate"> <div class="col-3"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Common Features</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-data-query" class="u-ff-sans u-fs20"> <span>Data Query</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-date-math" class="u-ff-sans u-fs20"> <span>Date Math</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/drawing" class="u-ff-sans u-fs20"> <span>Drawing</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-icons" class="u-ff-sans u-fs20"> <span>Icons</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-pdf-export-library" class="u-ff-sans u-fs20"> <span>PDF Generator</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/svgicon" class="u-ff-sans u-fs20"> <span>SVGIcon</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Management</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/filter" class="u-ff-sans u-fs20"> <span>Filter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/grid" class="u-ff-sans u-fs20"> <span>Grid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-pager" class="u-ff-sans u-fs20"> <span>Pager</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/treelist" class="u-ff-sans u-fs20"> <span>TreeList</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">File Management</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/file-saver" class="u-ff-sans u-fs20"> <span>File Saver</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Labels</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-error" class="u-ff-sans u-fs20"> <span>Error</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/floatinglabel" class="u-ff-sans u-fs20"> <span>FloatingLabel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-hint" class="u-ff-sans u-fs20"> <span>Hint</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-label" class="u-ff-sans u-fs20"> <span>Label</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">ScrollView</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/scrollview" class="u-ff-sans u-fs20"> <span>ScrollView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">TreeView</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/treeview" class="u-ff-sans u-fs20"> <span>TreeView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editor</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/editor" class="u-ff-sans u-fs20"> <span>Rich Text Editor</span> </a> </li> </ul> </div> <div class="col-3"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dropdowns</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/autocomplete" class="u-ff-sans u-fs20"> <span>AutoComplete</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/combobox" class="u-ff-sans u-fs20"> <span>ComboBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/dropdownlist" class="u-ff-sans u-fs20"> <span>DropDownList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/dropdowntree" class="u-ff-sans u-fs20"> <span>DropDownTree</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/multiselect" class="u-ff-sans u-fs20"> <span>MultiSelect</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/multiselecttree" class="u-ff-sans u-fs20"> <span>MultiSelectTree</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-checkbox" class="u-ff-sans u-fs20"> <span>Checkbox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/colorgradient" class="u-ff-sans u-fs20"> <span>ColorGradient</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/colorpalette" class="u-ff-sans u-fs20"> <span>ColorPalette</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/colorpicker" class="u-ff-sans u-fs20"> <span>ColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/flatcolorpicker" class="u-ff-sans u-fs20"> <span>FlatColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/input" class="u-ff-sans u-fs20"> <span>Input</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/maskedtextbox" class="u-ff-sans u-fs20"> <span>MaskedTextBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/numerictextbox" class="u-ff-sans u-fs20"> <span>NumericTextBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-radiobutton" class="u-ff-sans u-fs20"> <span>RadioButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-radiogroup" class="u-ff-sans u-fs20"> <span>RadioGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/rangeslider" class="u-ff-sans u-fs20"> <span>RangeSlider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/rating-" class="u-ff-sans u-fs20"> <span>Rating</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/signature" class="u-ff-sans u-fs20"> <span>Signature</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/slider" class="u-ff-sans u-fs20"> <span>Slider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/switch" class="u-ff-sans u-fs20"> <span>Switch</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/textarea" class="u-ff-sans u-fs20"> <span>TextArea</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Charts</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/area-chart" class="u-ff-sans u-fs20"> <span>Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/bar-chart" class="u-ff-sans u-fs20"> <span>Bar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/box-plot" class="u-ff-sans u-fs20"> <span>Box Plot</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/bubble-chart" class="u-ff-sans u-fs20"> <span>Bubble Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/bullet-chart" class="u-ff-sans u-fs20"> <span>Bullet Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/charts" class="u-ff-sans u-fs20"> <span>Charts</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/donut-chart" class="u-ff-sans u-fs20"> <span>Donut Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/funnel-chart" class="u-ff-sans u-fs20"> <span>Funnel Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/line-chart" class="u-ff-sans u-fs20"> <span>Line Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/pie-chart" class="u-ff-sans u-fs20"> <span>Pie Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/polar-chart" class="u-ff-sans u-fs20"> <span>Polar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/pyramid-chart" class="u-ff-sans u-fs20"> <span>Pyramid Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/radar-chart" class="u-ff-sans u-fs20"> <span>Radar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/range-area-chart" class="u-ff-sans u-fs20"> <span>Range Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/sankey-diagram" class="u-ff-sans u-fs20"> <span>Sankey Diagram</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/scatter-chart" class="u-ff-sans u-fs20"> <span>Scatter Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/sparkline" class="u-ff-sans u-fs20"> <span>Sparkline</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/waterfall-chart" class="u-ff-sans u-fs20"> <span>Waterfall Chart</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Indicators</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/badge" class="u-ff-sans u-fs20"> <span>Badge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/loader" class="u-ff-sans u-fs20"> <span>Loader</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/progressbar" class="u-ff-sans u-fs20"> <span>ProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/skeleton" class="u-ff-sans u-fs20"> <span>Skeleton</span> </a> </li> </ul> </div> <div class="col-3"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduling</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/calendar" class="u-ff-sans u-fs20"> <span>Calendar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/scheduler" class="u-ff-sans u-fs20"> <span>Scheduler</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editors</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/upload" class="u-ff-sans u-fs20"> <span>Upload</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Date Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/dateinput" class="u-ff-sans u-fs20"> <span>DateInput</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/datepicker" class="u-ff-sans u-fs20"> <span>DatePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/daterangepicker" class="u-ff-sans u-fs20"> <span>DateRangePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/datetimepicker" class="u-ff-sans u-fs20"> <span>DateTimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/timepicker" class="u-ff-sans u-fs20"> <span>TimePicker</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dialogs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/aiprompt" class="u-ff-sans u-fs20"> <span>AIPrompt</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/dialog" class="u-ff-sans u-fs20"> <span>Dialog</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/window" class="u-ff-sans u-fs20"> <span>Window</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Progress Bars</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/chunkprogressbar" class="u-ff-sans u-fs20"> <span>ChunkProgressBar</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gauges</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/arcgauge" class="u-ff-sans u-fs20"> <span>ArcGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/circulargauge" class="u-ff-sans u-fs20"> <span>CircularGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/lineargauge" class="u-ff-sans u-fs20"> <span>LinearGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/radialguage" class="u-ff-sans u-fs20"> <span>RadialGauge</span> </a> </li> </ul> </div> <div class="col-3"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Layout</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/actionsheet" class="u-ff-sans u-fs20"> <span>ActionSheet</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/animation" class="u-ff-sans u-fs20"> <span>Animation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/appbar" class="u-ff-sans u-fs20"> <span>AppBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-avatar" class="u-ff-sans u-fs20"> <span>Avatar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/bottomnavigation" class="u-ff-sans u-fs20"> <span>BottomNavigation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-card" class="u-ff-sans u-fs20"> <span>Card</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/drawer" class="u-ff-sans u-fs20"> <span>Drawer</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/expansionpanel" class="u-ff-sans u-fs20"> <span>ExpansionPanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-form" class="u-ff-sans u-fs20"> <span>Form</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/gridlayout" class="u-ff-sans u-fs20"> <span>GridLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/listbox" class="u-ff-sans u-fs20"> <span>ListBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/listview" class="u-ff-sans u-fs20"> <span>ListView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/menu" class="u-ff-sans u-fs20"> <span>Menu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/notification" class="u-ff-sans u-fs20"> <span>Notification</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/panelbar-(accordion)" class="u-ff-sans u-fs20"> <span>PanelBar (Accordion)</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/popup" class="u-ff-sans u-fs20"> <span>Popup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/splitter" class="u-ff-sans u-fs20"> <span>Splitter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/stacklayout" class="u-ff-sans u-fs20"> <span>StackLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/stepper" class="u-ff-sans u-fs20"> <span>Stepper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/vue-tabstrip" class="u-ff-sans u-fs20"> <span>TabStrip</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/tilelayout" class="u-ff-sans u-fs20"> <span>TileLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/toolbar" class="u-ff-sans u-fs20"> <span>Toolbar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/tooltip" class="u-ff-sans u-fs20"> <span>Tooltip</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Buttons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-vue-ui/button" class="u-ff-sans u-fs20"> <span>Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/buttongroup" class="u-ff-sans u-fs20"> <span>ButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/chip" class="u-ff-sans u-fs20"> <span>Chip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/chiplist" class="u-ff-sans u-fs20"> <span>ChipList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/dropdownbutton" class="u-ff-sans u-fs20"> <span>DropDownButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/floatingactionbutton" class="u-ff-sans u-fs20"> <span>FloatingActionButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-vue-ui/splitbutton" class="u-ff-sans u-fs20"> <span>SplitButton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Product Categories</h3> <ul class="List List--links-4 u-mb4"> </ul> </div> </div></div> <div id="ContentPlaceholder1_C1137_Col00" class="sf_colsIn Navigator-content Navigator-content--mobile" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"> <p class="u-fw3 u-fs24 u-c-blue2 u-mb3">An up-to-date library of over 100 components long recognized as the leader in the JavaScript market.</p> <style> .LabelB { font-weight: 400 !important; } </style> <div class="row u-hyphenate"> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Management</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/data-grid-(table)" class="u-ff-sans u-fs20"> <span>Data Grid (Table)</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/filemanager" class="u-ff-sans u-fs20"> <span>FileManager</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/filter" class="u-ff-sans u-fs20"> <span>Filter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/listview" class="u-ff-sans u-fs20"> <span>ListView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pager" class="u-ff-sans u-fs20"> <span>Pager</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pivotgrid" class="u-ff-sans u-fs20"> <span>PivotGrid</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pivotgrid-v2" class="u-ff-sans u-fs20"> <span>PivotGrid v2</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/propertygrid" class="u-ff-sans u-fs20"> <span>PropertyGrid</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/spreadsheet" class="u-ff-sans u-fs20"> <span>Spreadsheet</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/treelist" class="u-ff-sans u-fs20"> <span>TreeList</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Charts</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/charts" class="u-ff-sans u-fs20"> <span>Charts</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pyramid-chart" class="u-ff-sans u-fs20"> <span>Pyramid Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/sparklines" class="u-ff-sans u-fs20"> <span>Sparklines</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduler</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/gantt" class="u-ff-sans u-fs20"> <span>Gantt</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Media</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/mediaplayer" class="u-ff-sans u-fs20"> <span>MediaPlayer</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/scrollview" class="u-ff-sans u-fs20"> <span>ScrollView</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Conversational UI</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/ai-prompt" class="u-ff-sans u-fs20"> <span>AI Prompt</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/chat" class="u-ff-sans u-fs20"> <span>Chat</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gauges</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/arcgauge" class="u-ff-sans u-fs20"> <span>ArcGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/circulargauge" class="u-ff-sans u-fs20"> <span>CircularGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/lineargauge" class="u-ff-sans u-fs20"> <span>LinearGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/radialgauge" class="u-ff-sans u-fs20"> <span>RadialGauge</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Layout</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/avatar" class="u-ff-sans u-fs20"> <span>Avatar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/badge" class="u-ff-sans u-fs20"> <span>Badge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/card" class="u-ff-sans u-fs20"> <span>Card</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dialog" class="u-ff-sans u-fs20"> <span>Dialog</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dockmanager" class="u-ff-sans u-fs20"> <span>DockManager</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/expansionpanel" class="u-ff-sans u-fs20"> <span>ExpansionPanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/form" class="u-ff-sans u-fs20"> <span>Form</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/notification" class="u-ff-sans u-fs20"> <span>Notification</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/panelbar" class="u-ff-sans u-fs20"> <span>PanelBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/popover" class="u-ff-sans u-fs20"> <span>PopOver</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/popup" class="u-ff-sans u-fs20"> <span>Popup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/responsivepanel" class="u-ff-sans u-fs20"> <span>ResponsivePanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/ripple-container" class="u-ff-sans u-fs20"> <span>Ripple Container</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/splitter" class="u-ff-sans u-fs20"> <span>Splitter</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/tabstrip" class="u-ff-sans u-fs20"> <span>TabStrip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/tilelayout" class="u-ff-sans u-fs20"> <span>TileLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/timeline" class="u-ff-sans u-fs20"> <span>TimeLine</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/tooltip" class="u-ff-sans u-fs20"> <span>Tooltip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/window" class="u-ff-sans u-fs20"> <span>Window</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editors</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/autocomplete" class="u-ff-sans u-fs20"> <span>AutoComplete</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/captcha" class="u-ff-sans u-fs20"> <span>Captcha</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/checkbox" class="u-ff-sans u-fs20"> <span>Checkbox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/checkboxgroup" class="u-ff-sans u-fs20"> <span>CheckBoxGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/colorgradient" class="u-ff-sans u-fs20"> <span>ColorGradient</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/colorpicker" class="u-ff-sans u-fs20"> <span>ColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/combobox" class="u-ff-sans u-fs20"> <span>ComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dateinput" class="u-ff-sans u-fs20"> <span>DateInput</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/datepicker" class="u-ff-sans u-fs20"> <span>DatePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/datetimepicker" class="u-ff-sans u-fs20"> <span>DateTimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dropdownlist" class="u-ff-sans u-fs20"> <span>DropDownList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dropdowntree" class="u-ff-sans u-fs20"> <span>DropDownTree</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/image-editor" class="u-ff-sans u-fs20"> <span>Image Editor</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/listbox" class="u-ff-sans u-fs20"> <span>ListBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/maskedtextbox" class="u-ff-sans u-fs20"> <span>MaskedTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/multicolumncombobox" class="u-ff-sans u-fs20"> <span>MultiColumnComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/multiselect" class="u-ff-sans u-fs20"> <span>MultiSelect</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/numerictextbox" class="u-ff-sans u-fs20"> <span>NumericTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/radiobutton" class="u-ff-sans u-fs20"> <span>RadioButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/radiogroup" class="u-ff-sans u-fs20"> <span>RadioGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/rangeslider" class="u-ff-sans u-fs20"> <span>RangeSlider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/rating" class="u-ff-sans u-fs20"> <span>Rating</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/rich-text-editor" class="u-ff-sans u-fs20"> <span>Rich Text Editor</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/signature" class="u-ff-sans u-fs20"> <span>Signature</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/slider" class="u-ff-sans u-fs20"> <span>Slider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/switch" class="u-ff-sans u-fs20"> <span>Switch</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/text-area" class="u-ff-sans u-fs20"> <span>TextArea</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/textbox" class="u-ff-sans u-fs20"> <span>TextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/timedurationpicker" class="u-ff-sans u-fs20"> <span>TimeDurationPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/timepicker" class="u-ff-sans u-fs20"> <span>TimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/validator" class="u-ff-sans u-fs20"> <span>Validator</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Interactivity & UX</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/circularprogressbar" class="u-ff-sans u-fs20"> <span>CircularProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/drag-and-drop" class="u-ff-sans u-fs20"> <span>Drag and Drop</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/effects" class="u-ff-sans u-fs20"> <span>Effects</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/loader" class="u-ff-sans u-fs20"> <span>Loader</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/progressbar" class="u-ff-sans u-fs20"> <span>ProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/skeletoncontainer" class="u-ff-sans u-fs20"> <span>SkeletonContainer</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/sortable" class="u-ff-sans u-fs20"> <span>Sortable</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/taskboard" class="u-ff-sans u-fs20"> <span>TaskBoard</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Bar & QR Codes</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/qrcode" class="u-ff-sans u-fs20"> <span>QRCode</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Product Categories</h3> <ul class="List List--links-4 u-mb4"> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Document Processing</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pdf-viewer" class="u-ff-sans u-fs20"> <span>PDF Viewer</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduling</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/calendar" class="u-ff-sans u-fs20"> <span>Calendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/daterangepicker" class="u-ff-sans u-fs20"> <span>DateRangePicker</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/multiviewcalendar" class="u-ff-sans u-fs20"> <span>MultiViewCalendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/scheduler" class="u-ff-sans u-fs20"> <span>Scheduler</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Navigation</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/actionsheet" class="u-ff-sans u-fs20"> <span>ActionSheet</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/appbar" class="u-ff-sans u-fs20"> <span>AppBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/bottomnavigation" class="u-ff-sans u-fs20"> <span>BottomNavigation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/breadcrumb" class="u-ff-sans u-fs20"> <span>Breadcrumb</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/button" class="u-ff-sans u-fs20"> <span>Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/buttongroup" class="u-ff-sans u-fs20"> <span>ButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/chip" class="u-ff-sans u-fs20"> <span>Chip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/chiplist" class="u-ff-sans u-fs20"> <span>ChipList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/drawer" class="u-ff-sans u-fs20"> <span>Drawer</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/dropdownbutton" class="u-ff-sans u-fs20"> <span>DropDownButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/floatingactionbutton" class="u-ff-sans u-fs20"> <span>FloatingActionButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/menu" class="u-ff-sans u-fs20"> <span>Menu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/splitbutton" class="u-ff-sans u-fs20"> <span>SplitButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/stepper" class="u-ff-sans u-fs20"> <span>Stepper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/togglebutton" class="u-ff-sans u-fs20"> <span>ToggleButton</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/toolbar" class="u-ff-sans u-fs20"> <span>Toolbar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/treeview" class="u-ff-sans u-fs20"> <span>TreeView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/wizard" class="u-ff-sans u-fs20"> <span>Wizard</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">File Management</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/upload" class="u-ff-sans u-fs20"> <span>Upload</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Diagrams and Maps</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/diagram" class="u-ff-sans u-fs20"> <span>Diagram</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/map" class="u-ff-sans u-fs20"> <span>Map</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/orgchart" class="u-ff-sans u-fs20"> <span>OrgChart</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Barcodes</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/barcode" class="u-ff-sans u-fs20"> <span>BarCode</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Framework</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-jquery-ui/datasource" class="u-ff-sans u-fs20"> <span>DataSource</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/drawing-api" class="u-ff-sans u-fs20"> <span>Drawing API</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/mvvm" class="u-ff-sans u-fs20"> <span>MVVM</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/pdf-export" class="u-ff-sans u-fs20"> <span>PDF Export</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/single-page-app" class="u-ff-sans u-fs20"> <span>Single-Page App</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/templates" class="u-ff-sans u-fs20"> <span>Templates</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-jquery-ui/touch" class="u-ff-sans u-fs20"> <span>Touch</span> </a> </li> </ul> </div> </div></div> </div> </div> </div> </div> </section> <section class="Section sctn-DesignTools" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1355_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <div class="row"><div class="col-11 u-l-col-12"><h2 class="u-c-black">Simple to Advanced, Style Your Components<br />the Easy Way</h2><p class="u-mb6 u-fw3 u-fs24 u-c-blue2">We combine our UI components with front-end documentation and tools into a Design System Kit to help you satisfy your styling requirements and produce consistent UI without hassle. You and/or designers can leverage these resources: </p></div></div><div class="row row--equal row--aligned"><div class="col-4 u-mb0 u-m-col-6 u-s-col-12 u-m-mb4"><div class="u-b1 u-br10 u-oh u-tint-white"><a class="u-c-grey4 u-tdn u-m0" href="/design-system/docs"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/figma/front-end_documentation_370x2109.png?sfvrsn=5efc3ae5_11" alt="Front-End Documentation" class="u-full u-mb1" data-sf-ec-immutable="" /><h4 class="u-fs28 u-fw5 u-m0 u-p2 u-pb1 u-c-link">Front-End Documentation</h4><p class="u-pl2 u-pr2 u-pb2 u-m0">Leverage our detailed design and front-end documentation on how to make the necessary customizations to Telerik and Kendo UI themes. </p></a> </div></div><div class="col-4 u-mb0 u-m-col-6 u-s-col-12 u-m-mb4"><div class="u-b1 u-br10 u-oh u-tint-white"><a href="/themebuilder" class="u-c-grey4 u-tdn u-m0"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/figma/apply-your-brand_banner_370x210.png?sfvrsn=a9628287_5" alt="apply your brand" class="u-full u-mb1" /><h4 class="u-fs28 u-fw5 u-m0 u-p2 u-pb1 u-c-link">ThemeBuilder</h4><p class="u-pl2 u-pr2 u-pb2 u-m0">Point, click and customize its built-in themes and avoid tedious CSS. Choose between the free ThemeBuilder or subscribe to the new ThemeBuilder Pro for deeper customization options.</p></a> </div></div><div class="col-4 u-mb0 u-m-col-6 u-s-col-12"><div class="u-b1 u-br10 u-oh u-tint-white"><a href="/figma-kits" class="u-c-grey4 u-tdn u-m0"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/figma/figma-kits_370x210.png?sfvrsn=bb8da007_3" class="u-full u-mb1" alt="Figma Kits" data-sf-ec-immutable="" /><h4 class="u-fs28 u-fw5 u-m0 u-p2 u-pb1 u-c-link">Figma Kits</h4><p class="u-pl2 u-pr2 u-pb2 u-m0">Designers using Figma leverage our design kits to mock up design changes directly to representations of our components. These are free and will help streamline the communication between you and your design team.</p></a> </div></div></div> </div> </section> <section class="Section u-pt8 u-pb8 u-tint-blue4 sctn-Pricing track--dcupgrade" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1149_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <h2 class="u-mb1" id="pricing">Flexible Packaging Tailored to Your Needs</h2><p class="u-fs28 u-fw3">You can buy Kendo UI bundle individually or as part of the DevCraft bundle.</p><div class="row row--aligned row--separated u-mt5 u-s-pt2" data-sf-element="Row"> <div id="ContentPlaceholder1_C1435_Col00" class="sf_colsIn col-4 u-s-full" data-sf-element="Column 1" data-placeholder-label="Column 1"> <img loading="lazy" class="u-mb3 u-m-h10 u-wa u-s-mb4" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/pricing/ninja-175x175px-min.png?sfvrsn=375571ef_7" title="Kendo UI" alt="Kendo UI" /> <h3 class="h4 u-mb1">Buy Kendo UI Bundle</h3> <p class="u-fs20 u-mb3">Buy Kendo UI bundle with all four component libraries built natively for jQuery, Angular, React and Vue.</p><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1442_Col00" class="sf_colsIn col-10 u-mb0 u-l-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a class="Btn Btn--sec u-fs24 u-mb1" href="/purchase/kendo-ui">See Pricing</a></div> </div> <p class="u-fs18">Starting at $1,049</p></div> <div id="ContentPlaceholder1_C1435_Col01" class="sf_colsIn col-4 u-s-full" data-sf-element="Column 2" data-placeholder-label="Column 2"> <img loading="lazy" class="u-mb3 u-m-h10 u-wa u-s-mb4" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/pricing/characters_kendo_ninja.png?sfvrsn=7d1d8164_36" title="DevCraft Bundle" alt="DevCraft Bundle" /> <h3 class="h4 u-mb1">Buy DevCraft Bundle</h3> <p class="u-fs20 u-mb3">Get the complete bundle of .NET controls, Kendo UI JavaScript components, reporting, automated testing and productivity tools.</p><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1447_Col00" class="sf_colsIn col-10 u-mb0 u-l-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <a class="Btn Btn--plain u-c-black u-fs24 u-mb1" href="/purchase.aspx">See Pricing</a></div> </div> <p class="u-fs18">Starting at $1,499</p></div> <div id="ContentPlaceholder1_C1435_Col02" class="sf_colsIn col-4 u-s-full" data-sf-element="Column 3" data-placeholder-label="Column 3"> <img loading="lazy" class="u-mb3 u-m-h10 u-m-wa u-s-mb4" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/page-templates-and-building-blocks/ui-accelerator-kendo.svg?sfvrsn=44daf094_0" title="ui accelerator kendo" alt="ui accelerator kendo" /> <div class="u-pr u-ha u-m-pt3"><div class="TK-New u-nmt3 u-pa u-pt1" style="margin-left:-5px;"></div><h3 class="h4 u-mb1">Buy Page Templates and Building Blocks</h3></div><p class="u-fs20 u-mb3">Enhance your application development with a collection of professionally designed and easily customizable Page Templates and Building Blocks.</p><div class="row"><div class="col-10 u-mb0 u-l-col-12"><a class="Btn Btn--plain u-c-black u-fs24 u-mb1" href="/purchase.aspx?filter=ui-accelerator#individual-products" data-sf-ec-immutable="">See Pricing</a> </div></div><p class="u-fs18">Starting at $549</p></div> </div> </div> </section> <section class="Section u-bg-blue1 u-pt8 u-pb6 u-s-pb4 sctn-CaseStudy" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1154_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <h2 class="u-mb4" id="case-study">Featured Case Study</h2> <div class="Testimonials-single"> <p class="u-ff-sans0 Text--b9 u-fs31 u-mb6">“Kendo UI is a force multiplier for our dev process, for our design process. Kendo UI allows me to focus on the things I do best, to spend more time designing the user experience and less time fighting with the functionality.” </p> <p class="u-ff-sans2 Text--b9 u-fs24 u-mb0">Bekah Rice </p> <p class="Text--b9 u-fs16 u-ttu">Designer/Developer, Truematter</p> </div> <div class="Testimonials-single u-no-pseudo u-mt2"> <a data-sf-ec-immutable="" class="Btn Btn--ghost litebox u-c-white u-fs20" href="https://www.youtube.com/embed/u0vMSEjx-jA" data-lite-info="video" data-lite-width="1366" data-lite-height="768">Watch Video </a> </div> </div> </section> <section class="Section Section--patch u-tint-orange u-pt2 u-pb2 u-pr u-s-p0 u-zi2" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1158_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <div class="row row--separated u-tac u-l-pt2 u-m-p0"><div class="col-4 u-s-m0 u-small-tal u-l-mb2 u-s-mb0"><div class="u-fs60 u-fw5 u-lh1">275K+ <span class="u-ff-sans2 u-fs20">customers</span> </div></div><div class="col-4 u-s-m0 u-small-tal u-l-mb2 u-s-mb0"><div class="u-fs60 u-fw5 u-lh1">3.5M+ <span class="u-ff-sans2 u-fs20">developers</span> </div></div><div class="col-4 u-s-m0 u-small-tal u-l-mb1 u-m-mb1 u-s-mb0"><div class="u-fs60 u-fw5 u-lh1">400+ <span class="u-ff-sans2 u-fs20">awards</span> </div></div></div> </div> </section> <section class="Section u-pt8 u-pb8 u-bg-blue sctn-CustomerWords" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1160_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <h3 class="h4 u-c-grey8 u-fs17 u-lsn u-mb2 h6">Telerik is trusted by these household names</h3><div class="u-tac"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/devcraft/logos-custumers.svg?sfvrsn=8147a074_3" alt="" sf-size="44118" /></div> </div> </section> <section class="Section u-pt8 u-pb8 sctn-FAQs u-zi2" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C1162_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <h2 id="faqs">Frequently Asked Questions</h2><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1163_Col00" class="sf_colsIn col-6 u-small-nm" data-sf-element="Column 1" data-placeholder-label="Column 1"> <style type="text/css"> .List--accordion>li { border-top: 1px solid #e0e5e8; } .List--accordion .Question { display: block; position: relative; padding: 12px 30px 0px 0; margin-bottom: 12px; } .List--accordion .Question:active, .List--accordion .Question:focus, .List--accordion .Question:hover { text-decoration: none; } .List--accordion .Question::before { transform: rotate(180deg); font-family: tlrk-icon-font; font-size: .70em; color: #3d57d8; line-height: 1.5; position: absolute; top: 14px; right: 0; -webkit-transition: all .4s ease; transition: all .4s ease; } .List--accordion .Question.expanded { color: #555; } .List--accordion .Question.expanded::before { transform: rotate(0deg); } .List--accordion .Answer { background-color: #f5f6f7; line-height: 1.4; font-size: 18px; padding: 18px 24px 20px 20px; margin-top: 12px; } @media only screen and (max-width: 620px) { .List--accordion { margin-top: -1px; } } </style> <ul class="List List--accordion" data-sf-role="lists"> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">Why Should I Use Kendo UI JavaScript components? </a> <div class="Answer" style="display:none;"> <ul> <li> You get hundreds of components natively built for the four most popular frameworks: jQuery, Angular, React, and Vue. </li> <li> Each component is meticulously documented, and you can easily access demos for virtually every feature. </li> <li> Our support team is constantly acclaimed by professional associations and the user community alike. </li> <li> Kendo UI JavaScript components have earned Trust Radius’s Top Rated award two years in a row. </li> </ul> </div> </li> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">Are Kendo UI JavaScript components free?</a> <div class="Answer" style="display:none;"> No, Kendo UI is commercial product. </div> </li> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">How can I try Kendo UI JavaScript components? </a> <div class="Answer" style="display:none;"> <p>Any user can start a free 30-day trial using the button below by selecting your desired product and creating an account. Your trial account comes with unlimited usage of the JavaScript Components plus support for the duration of your evaluation period. </p> <div class="Dropdown" data-tlrk-plugin="dropdown"><a href="#download-trial-file" class="Dropdown-control Btn Btn--prim2 u-db u-fs20">Start Free Trial <span class="Dropdown-arrow"></span></a> <div class="DashMenu u-pa u-fs20 u-tac"> <a class="u-db u-wsn" href="/try/kendo-ui">UI for jQuery</a> <a class="u-db u-wsn" href="/try/kendo-angular-ui">UI for Angular</a> <a class="u-db u-wsn" href="/try/kendo-react-ui">UI for React</a> <a class="u-db u-wsn" href="/try/kendo-vue-ui">UI for Vue</a> </div> </div> </div> </li> </ul> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { if (typeof FAQPAGEINITIALIZED == "undefined") { var FAQSchema = document.createElement('script'); FAQSchema.setAttribute("type", "application/ld+json"); var arr = []; document.querySelectorAll("a.Question").forEach(function(item){ arr.push( { "@type": "Question", "name": item.innerText, "acceptedAnswer": { "@type": "Answer", "text": item.nextElementSibling.innerText.trim().replace("\\s+", " ") } } ) }); FAQSchema.innerHTML = '{"@context": "https://schema.org","@type": "FAQPage","mainEntity": [' + JSON.stringify(arr) + ']}' document.head.append(FAQSchema); FAQPAGEINITIALIZED = 1; } }); if (!window.faqToggleScriptLoaded) { window.faqToggleScriptLoaded=true; document.addEventListener("DOMContentLoaded", function(event) { $('.Question').on('click', function(e) { var wrapper = $(this).closest('[data-sf-role=lists]'); var content = $(this).closest('li').find('.Answer'); $('[data-sf-role=toggleLink]').not($(this)).removeClass('expanded'); $('.Answer').not(content).css('display', 'none'); }); }); } </script> </div> <div id="ContentPlaceholder1_C1163_Col01" class="sf_colsIn col-6" data-sf-element="Column 2" data-placeholder-label="Column 2"> <style type="text/css"> .List--accordion>li { border-top: 1px solid #e0e5e8; } .List--accordion .Question { display: block; position: relative; padding: 12px 30px 0px 0; margin-bottom: 12px; } .List--accordion .Question:active, .List--accordion .Question:focus, .List--accordion .Question:hover { text-decoration: none; } .List--accordion .Question::before { transform: rotate(180deg); font-family: tlrk-icon-font; font-size: .70em; color: #3d57d8; line-height: 1.5; position: absolute; top: 14px; right: 0; -webkit-transition: all .4s ease; transition: all .4s ease; } .List--accordion .Question.expanded { color: #555; } .List--accordion .Question.expanded::before { transform: rotate(0deg); } .List--accordion .Answer { background-color: #f5f6f7; line-height: 1.4; font-size: 18px; padding: 18px 24px 20px 20px; margin-top: 12px; } @media only screen and (max-width: 620px) { .List--accordion { margin-top: -1px; } } </style> <ul class="List List--accordion" data-sf-role="lists"> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">How are Kendo UI JavaScript components licensed?</a> <div class="Answer" style="display:none;"> Each developer wishing to use Kendo UI JavaScript components needs a license. Licenses are perpetual and include a renewable one-year support and maintenance plan. No additional licenses are required for deployment. </div> </li> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">Do you have Kendo UI JavaScript Component demos? </a> <div class="Answer" style="display:none;"> Yes, each component has multiple demos, documentation, and sample code. Find them for <a href="https://demos.telerik.com/kendo-ui" target="_blank">jQuery</a>, <a href="/kendo-angular-ui/components/" target="_blank">Angular</a>, <a href="/kendo-react-ui/components/" target="_blank">React</a>, and <a href="/kendo-vue-ui/components/" target="_blank">Vue</a>. </div> </li> <li > <a class="Question icon-arrow-up track--faq-link" href="javascript:void(0)" data-sf-role="toggleLink">What is included in the Kendo UI JavaScript Component bundle? </a> <div class="Answer" style="display:none;"> <ul> <li>Kendo UI is a bundle that includes four products: Kendo UI for jQuery, Kendo UI for Angular, Kendo UI for React, and Kendo UI for React. </li> <li>Each library contains components natively built for their associated framework </li> <li>Documentation and demos </li> <li>Virtual Classroom for quick onboarding </li> <li>Support </li> </ul> </div> </li> </ul> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { if (typeof FAQPAGEINITIALIZED == "undefined") { var FAQSchema = document.createElement('script'); FAQSchema.setAttribute("type", "application/ld+json"); var arr = []; document.querySelectorAll("a.Question").forEach(function(item){ arr.push( { "@type": "Question", "name": item.innerText, "acceptedAnswer": { "@type": "Answer", "text": item.nextElementSibling.innerText.trim().replace("\\s+", " ") } } ) }); FAQSchema.innerHTML = '{"@context": "https://schema.org","@type": "FAQPage","mainEntity": [' + JSON.stringify(arr) + ']}' document.head.append(FAQSchema); FAQPAGEINITIALIZED = 1; } }); if (!window.faqToggleScriptLoaded) { window.faqToggleScriptLoaded=true; document.addEventListener("DOMContentLoaded", function(event) { $('.Question').on('click', function(e) { var wrapper = $(this).closest('[data-sf-role=lists]'); var content = $(this).closest('li').find('.Answer'); $('[data-sf-role=toggleLink]').not($(this)).removeClass('expanded'); $('.Answer').not(content).css('display', 'none'); }); }); } </script> </div> </div> </div> </section> <div class="Section u-bg-blue4 u-pt2 u-pb1 DC-Scroller--end" data-sf-element="Section" data-placeholder-label="Section Banner"> <div id="ContentPlaceholder1_C1168_Col00" class="sf_colsIn Section-bg Section-bg--n" data-sf-element="Section Background" data-placeholder-label="Section Background"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/decorations/get-started-waves.svg?sfvrsn=f770ce3b_2" loading="lazy" title="Get Started" alt="Get Started" /></div> <div id="ContentPlaceholder1_C1168_Col01" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1170_Col00" class="sf_colsIn col-9 u-m-col-12" data-sf-element="Column 1" data-placeholder-label="Column 1"> <h2 class="u-c-white u-mt2 u-mb7">Get Started</h2><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C1171_Col00" class="sf_colsIn col-5" data-sf-element="Column 1" data-placeholder-label="Column 1"> <div class="Dropdown" data-tlrk-plugin="dropdown"><a data-sf-ec-immutable="" aria-label="Start Free Trial Button" href="#download-trial-file" class="Dropdown-control u-db Btn Btn--prim2 Btn--l u-fs24 track--kui-trial-cta3-dropdown">Start Free Trial <span class="Dropdown-arrow"></span></a> <div class="DashMenu u-pa u-fs20 u-tac"><a class="u-db u-wsn track--kui-trial-cta3-jquery" href="/try/kendo-ui">UI for jQuery</a> <a class="u-db u-wsn track--kui-trial-cta3-angular" href="/try/kendo-angular-ui">UI for Angular</a> <a class="u-db u-wsn track--kui-trial-cta3-react" href="/try/kendo-react-ui">UI for React</a> <a class="u-db u-wsn track--kui-trial-cta3-vue" href="/try/kendo-vue-ui">UI for Vue</a> </div></div></div> </div> </div> <div id="ContentPlaceholder1_C1170_Col01" class="sf_colsIn col-3 u-tar u-pl0 u-l-pl2 u-m-dn" data-sf-element="Column 2" data-placeholder-label="Column 2"> <img loading="lazy" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/productsimages/kendo-ui-web/kendo-illustration-prefooter@2x-min.png?sfvrsn=686d7abf_2" alt="kendo-illustration-prefooter@2x-min" /></div> </div> </div> </div> </div> <footer class="TK-Footer" data-tlrk-nav-version="3.5.52" data-tlrk-nav-template="footer-big-rel-markup"><div class="TK-container"><div class="TK-row TK-No-Print"><div class="TK-col-8 TK--Footer-Desktop"><div class="TK-Footer-Featured-Item"><div class="TK-Footer-H">Complete .NET Toolbox</div><a href="/devcraft" class="TK-Footer-Featured-Link">Telerik DevCraft</a></div><div class="TK-Footer-Featured-Item"><div class="TK-Footer-H">Complete JavaScript Toolbox</div><a href="/kendo-ui" class="TK-Footer-Featured-Link">Kendo UI</a></div></div><div class="TK-col-16"><div class="TK-row"><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Get Products</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/download" class="TK-Footer-Link">Free Trials</a></li><li class="TK-Footer-List-Item"><a href="/purchase.aspx" class="TK-Footer-Link">Pricing</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Resources</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/support/demos" class="TK-Footer-Link">Demos</a></li><li class="TK-Footer-List-Item"><a href="/documentation" class="TK-Footer-Link">Documentation</a></li><li class="TK-Footer-List-Item"><a href="/support/whats-new/release-history" class="TK-Footer-Link">Release History</a></li><li class="TK-Footer-List-Item"><a href="/forums" class="TK-Footer-Link">Forums</a></li><li class="TK-Footer-List-Item"><a href="/blogs" class="TK-Footer-Link">Blogs</a></li><li class="TK-Footer-List-Item"><a href="/webinars" class="TK-Footer-Link">Webinars</a></li><li class="TK-Footer-List-Item"><a href="/videos" class="TK-Footer-Link">Videos</a></li><li class="TK-Footer-List-Item"><a href="/services" class="TK-Footer-Link">Professional Services</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/partners/partner-locator?Products=KendoUI+and+Telerik" class="TK-Footer-Link">Partners</a></li><li class="TK-Footer-List-Item"><a href="/support/virtual-classroom" class="TK-Footer-Link">Virtual Classroom</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/events" class="TK-Footer-Link">Events</a></li><li class="TK-Footer-List-Item"><a href="/faqs" class="TK-Footer-Link">FAQs</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Recognition</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/about/success-stories" class="TK-Footer-Link">Success Stories</a></li><li class="TK-Footer-List-Item"><a href="/about/testimonials" class="TK-Footer-Link">Testimonials</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Get in touch</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/contact" class="TK-Footer-Link">Contact Us</a></li><li><ul class="TK-Footer-List--inner"><li class="TK-Footer-List-Item"><a href="tel:+18886790442" class="TK-Footer-Phone-Link u-db">USA: <span class="TK-wsn">+1 888 679 0442</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+441344838186" class="TK-Footer-Phone-Link u-db">UK: <span class="TK-wsn">+44 13 4483 8186</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+914069019447" class="TK-Footer-Phone-Link u-db">India: <span class="TK-wsn">+91 406 9019447</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+35928099850" class="TK-Footer-Phone-Link u-db">Bulgaria: <span class="TK-wsn">+359 2 8099850</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+61370688610" class="TK-Footer-Phone-Link u-db">Australia: <span class="TK-wsn">+61 3 7068 8610</span></a></li></ul></li><li><ul class="TK-Footer-List--inner TK-Footer-List-Horizontal TK-Footer-List-Social"><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.facebook.com/telerik" title="Facebook" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16 7h-1.924C13.461 7 13 7.252 13 7.889V9h3l-.238 3H13v8h-3v-8H8V9h2V7.077C10 5.055 11.064 4 13.461 4H16zM5 0a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">165k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://x.com/telerik" title="X" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">50k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.linkedin.com/company/telerik" title="LinkedIn" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 19h-3v-5.6c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.4-2.586 7-2.777 7 2.476zM6.5 6.732a1.757 1.757 0 01-1.75-1.764A1.757 1.757 0 016.5 3.2a1.758 1.758 0 011.75 1.764A1.757 1.757 0 016.5 6.728zM5 19h3V8H5zM19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" fill-rule="evenodd"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">17k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.twitch.tv/codeitlive" title="Twitch" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 23 24.05"><path d="M1.57.02L0 4.18V20.9h5.75v3.12h3.14l3.13-3.14h4.71L23 14.61V.02zm2.09 2.07h17.25v11.5l-3.66 3.66H11.5l-3.13 3.13v-3.13H3.66zm5.75 10.45h2.09V6.27H9.41zm5.75 0h2.09V6.27h-2.09z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">4k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.youtube.com/c/telerik" title="YouTube" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="18.287" viewBox="0 0 26 18.287"><path fill="#010101" d="M25.74 3.945a5.625 5.625 0 0 0-1.034-2.581 3.718 3.718 0 0 0-2.605-1.1c-3.638-.263-9.1-.263-9.1-.263h-.011s-5.458 0-9.1.263a3.719 3.719 0 0 0-2.605 1.1A5.623 5.623 0 0 0 .26 3.945 39.324 39.324 0 0 0 0 8.154v1.972a39.323 39.323 0 0 0 .26 4.208 5.623 5.623 0 0 0 1.033 2.58 4.408 4.408 0 0 0 2.867 1.112c2.08.2 8.84.261 8.84.261s5.463-.008 9.1-.271a3.719 3.719 0 0 0 2.605-1.1 5.625 5.625 0 0 0 1.035-2.582 39.377 39.377 0 0 0 .26-4.208V8.154a39.377 39.377 0 0 0-.26-4.209Zm-15.388 8.6V5.211l6.974 3.665Z"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">14k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://github.com/telerik" title="GitHub" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,0A12.047,12.047,0,0,0,0,12,12.455,12.455,0,0,0,9.188,24V20.03a2.889,2.889,0,0,1-3.239-1.441c-.273-.46-.756-.959-1.26-.922l-.124-1.4a2.892,2.892,0,0,1,2.593,1.6,1.555,1.555,0,0,0,.9.772,1.89,1.89,0,0,0,1.181-.1,3.3,3.3,0,0,1,.827-1.691h0C6.942,16.382,5.7,14.724,5.2,13.415a5.506,5.506,0,0,1,.855-5.281A.188.188,0,0,0,6.1,7.989a4.6,4.6,0,0,1,.14-3.073,4.858,4.858,0,0,1,2.663,1l.337.2c.141.084.1.036.238.025A10.182,10.182,0,0,1,12,5.792a10.225,10.225,0,0,1,2.553.363l.109.011c-.01,0,.03-.007.1-.046,2.436-1.476,2.349-.993,3-1.206A4.682,4.682,0,0,1,17.9,7.989c-.071.218,2.112,2.217.9,5.426-.494,1.309-1.74,2.968-4.866,3.434h0a3.086,3.086,0,0,1,.879,2.2V24A12.454,12.454,0,0,0,24,12,12.047,12.047,0,0,0,12,0Z"></path></svg></a></li></ul></li></ul></div></div><div class="TK-row TK-row--M2 TK--Footer-Mobile"><div class="TK-col-24"><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/contact" class="TK-Footer-Link">Contact Us</a></li><li><ul class="TK-Footer-List--inner TK-Footer-List-Horizontal TK-Footer-List-Social"><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.facebook.com/telerik" title="Facebook" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16 7h-1.924C13.461 7 13 7.252 13 7.889V9h3l-.238 3H13v8h-3v-8H8V9h2V7.077C10 5.055 11.064 4 13.461 4H16zM5 0a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">165k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://x.com/telerik" title="X" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">50k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.linkedin.com/company/telerik" title="LinkedIn" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 19h-3v-5.6c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.4-2.586 7-2.777 7 2.476zM6.5 6.732a1.757 1.757 0 01-1.75-1.764A1.757 1.757 0 016.5 3.2a1.758 1.758 0 011.75 1.764A1.757 1.757 0 016.5 6.728zM5 19h3V8H5zM19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" fill-rule="evenodd"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">17k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.twitch.tv/codeitlive" title="Twitch" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 23 24.05"><path d="M1.57.02L0 4.18V20.9h5.75v3.12h3.14l3.13-3.14h4.71L23 14.61V.02zm2.09 2.07h17.25v11.5l-3.66 3.66H11.5l-3.13 3.13v-3.13H3.66zm5.75 10.45h2.09V6.27H9.41zm5.75 0h2.09V6.27h-2.09z" fill="#000"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">4k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.youtube.com/c/telerik" title="YouTube" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="18.287" viewBox="0 0 26 18.287"><path fill="#010101" d="M25.74 3.945a5.625 5.625 0 0 0-1.034-2.581 3.718 3.718 0 0 0-2.605-1.1c-3.638-.263-9.1-.263-9.1-.263h-.011s-5.458 0-9.1.263a3.719 3.719 0 0 0-2.605 1.1A5.623 5.623 0 0 0 .26 3.945 39.324 39.324 0 0 0 0 8.154v1.972a39.323 39.323 0 0 0 .26 4.208 5.623 5.623 0 0 0 1.033 2.58 4.408 4.408 0 0 0 2.867 1.112c2.08.2 8.84.261 8.84.261s5.463-.008 9.1-.271a3.719 3.719 0 0 0 2.605-1.1 5.625 5.625 0 0 0 1.035-2.582 39.377 39.377 0 0 0 .26-4.208V8.154a39.377 39.377 0 0 0-.26-4.209Zm-15.388 8.6V5.211l6.974 3.665Z"/></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">14k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://github.com/telerik" title="GitHub" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,0A12.047,12.047,0,0,0,0,12,12.455,12.455,0,0,0,9.188,24V20.03a2.889,2.889,0,0,1-3.239-1.441c-.273-.46-.756-.959-1.26-.922l-.124-1.4a2.892,2.892,0,0,1,2.593,1.6,1.555,1.555,0,0,0,.9.772,1.89,1.89,0,0,0,1.181-.1,3.3,3.3,0,0,1,.827-1.691h0C6.942,16.382,5.7,14.724,5.2,13.415a5.506,5.506,0,0,1,.855-5.281A.188.188,0,0,0,6.1,7.989a4.6,4.6,0,0,1,.14-3.073,4.858,4.858,0,0,1,2.663,1l.337.2c.141.084.1.036.238.025A10.182,10.182,0,0,1,12,5.792a10.225,10.225,0,0,1,2.553.363l.109.011c-.01,0,.03-.007.1-.046,2.436-1.476,2.349-.993,3-1.206A4.682,4.682,0,0,1,17.9,7.989c-.071.218,2.112,2.217.9,5.426-.494,1.309-1.74,2.968-4.866,3.434h0a3.086,3.086,0,0,1,.879,2.2V24A12.454,12.454,0,0,0,24,12,12.047,12.047,0,0,0,12,0Z"></path></svg></a></li></ul></li></ul></div></div></div></div><div class="TK-row TK-row--M1"><div class="TK-col-24"><a href="https://www.progress.com" aria-label="Go to Progress.com" class="TK-PRGS-Logo-Footer"><svg xmlns="http://www.w3.org/2000/svg" width="130" height="30" viewBox="0 0 512 120"><path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path><path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path></svg></a></div></div><div class="TK-row"><div class="TK-col-12"><p class="TK-Footer-About">Telerik and Kendo UI are part of Progress product portfolio. Progress is the leading provider of application development and digital experience technologies.</p></div><div class="TK-col-24"><div class="TK-row--M3 TK--Footer-Desktop"><ul class="TK-Footer-List-Horizontal"><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/company">Company</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/products">Technology</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/company/awards">Awards</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://investors.progress.com/press-releases">Press Releases</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/company/press-coverage">Media Coverage</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/company/careers">Careers</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://www.progress.com/company/offices">Offices</a></li></ul></div></div></div><div class="TK-row TK-row--M2 TK--Footer-Mobile"><div class="TK-col-24"><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="https://www.progress.com/company" class="TK-Footer-Link">Company</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/products" class="TK-Footer-Link">Technology</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/company/awards" class="TK-Footer-Link">Awards</a></li><li class="TK-Footer-List-Item"><a href="https://investors.progress.com/press-releases" class="TK-Footer-Link">Press Releases</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/company/press-coverage" class="TK-Footer-Link">Media Coverage</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/company/careers" class="TK-Footer-Link">Careers</a></li><li class="TK-Footer-List-Item"><a href="https://www.progress.com/company/offices" class="TK-Footer-Link">Offices</a></li></ul></div></div><div class="TK-row"><div class="TK-col-16"><p class="TK-Footer-Copy">Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p><p class="TK-Footer-Copy">Progress and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See <a href="https://www.progress.com/legal/trademarks" class="TK-Footer-Link-Tiny">Trademarks</a> for appropriate markings.</p></div><div class="TK-col-8 TK-tar"><ul class="TK-Footer-List-Horizontal"><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="/about/terms-of-use" class="TK-Footer-Link-Tiny">Terms of Use</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="/feedback" class="TK-Footer-Link-Tiny">Site Feedback</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="https://www.progress.com/legal/privacy-center" class="TK-Footer-Link-Tiny" target="_blank" rel="noopener">Privacy Center</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="https://www.progress.com/trust-center" class="TK-Footer-Link-Tiny" target="_blank" rel="noopener">Trust Center</a></li></ul><div class="TLRK-CCPA"><a href="https://forms.progress.com/ccpa-subscription" target="_blank" rel="nofollow noopener">Do Not Sell or Share My Personal Information</a></div><p class="TK-Footer-Power">Powered by <a href="https://www.progress.com/sitefinity-cms" class="TK-Footer-Link-Tiny">Progress Sitefinity</a></p></div></div></div></footer> <script type="text/javascript" src="/WebResource.axd?d=wnB2OjhYopty-dCFa4b2kKCIWGgLoaj0QQ4I7F_PiSysmtqnVBUtsGpmlAymZDgXEXdRjhe5BdfNkuyybLSHMhRnbzI9oh6WXC-y-EwOrJPY0qCvfWaOo0ltV4TVm8apzRlzF5O244Y4u7-m5V8Vv2yC1Tun7PurVRoOxfv28sPwY-isOJNAi7MSqc1tycGYAkqZXHU_zlVNorSTBDv4W4jemDM1&t=638646398980000000"> </script><script data-sf-pers-id="6b5ac4dc-8fd0-4043-bd0a-e9ffd31e3bc8" data-sf-pers-raise-events="True" data-sf-pers-page-node-id="17d7f764-6099-4dba-8b75-aa7981fca36c" data-sf-pers-page-data-id="707621bb-4212-4ef2-a562-12222c631fa5" data-sf-pers-page-node-key="17D7F764-6099-4DBA-8B75-AA7981FCA36C/b31ca85c-a1c5-4a9d-8b5d-e7b0736a8b16/SitefinitySiteMap" data-sf-app-path="/" data-sf-loaded-scripts="['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js', '/Frontend-Assembly/Telerik.Sitefinity.Frontend.Lists/Mvc/Scripts/Lists/lists.js?package=PureMvc&v=MTQuNC44MTM0LjA%3d', 'https://dtzbdy9anri2p.cloudfront.net/cache/cb8bae07640f6f03e4c39d07edd14ee3339cbba8/telerik/js/dist/all.min.js']"></script> <script defer async type="module" id="mjs-promotion-1"> const cdn = "https://d6vtbcy3ong79.cloudfront.net"; const id = "promotion-1"; const response = await fetch(`/webapi/Announcements/GetPromo?url=${window.location.href}`, { method: "GET", cache: "no-cache", }); const json = await response.json(); const model = json?.content?.promoViewModel; if (model) { let version = model.scriptVersion || "stable"; let stylesheet = cdn + "/sticky-notification/" + version + "/style.min.css"; let javascript = cdn + "/sticky-notification/" + version + "/index.min.mjs"; let cookieName = "promotion-" + model.id.replace("-", ""); let imageUrl = model.image || "https://d585tldpucybw.cloudfront.net/sfimages/default-source/ninjas/sticky-notification-illustration.svg"; let campaignName = model.campaignName || model.title; let html = model.htmlRawContent; let button = `<div><a class='tsn__cta-button' href='${model.ctaUrl}'>${model.ctaText}</a></div>`; if (model.ctaText && model.ctaUrl) { html += button; } function track(eventType) { try { if (!OptanonActiveGroups) { return; } } catch (e) { return; } if (!OptanonActiveGroups.includes("2")) { return; } window.dataLayer = window.dataLayer || []; let banner = document.querySelector(`.tsn--${id}`); let bannerType = "Right Side Banner"; let bannerTopic = campaignName; let bannerExpandEventName = "Popup Banner Expand"; let bannerCollapseEventName = "Popup Banner Collapse"; let bannerImpressionEventName = "Popup Banner Impression"; let bannerCtaClickEventName = "Popup Banner CTA Click"; let bannerExpandedState = "expanded"; let bannerCollapsedState = "collapsed"; if (eventType === "impression") { dataLayer.push({ event: bannerImpressionEventName, state: banner.classList.contains("tsn--is-expanded") ? bannerExpandedState : bannerCollapsedState, type: bannerType, promoting: bannerTopic }); } if (eventType === "expand") { dataLayer.push({ event: bannerExpandEventName, type: bannerType, promoting: bannerTopic }); } if (eventType === "collapse") { dataLayer.push({ event: bannerCollapseEventName, type: bannerType, promoting: bannerTopic }); } if (eventType === "cta-click") { dataLayer.push({ event: bannerCtaClickEventName, type: bannerType, promoting: bannerTopic, ctaLandingPage: window.location.href }); } } async function importStyles(stylesheetUrl) { return new Promise((resolve, reject) => { const link = document.createElement("link"); link.id = `css-${id}`; link.rel = "stylesheet"; link.type = "text/css"; link.href = stylesheetUrl; link.addEventListener("load", resolve); link.addEventListener("error", reject); document.body.append(link); }); } async function initPromotion() { const [{ StickyNotification }] = await Promise.all([ import(javascript), importStyles(stylesheet), ]); StickyNotification.create({ autoShow: true, autoExpand: true, autoCollapse: false, label: model.label, title: model.title, content: html, image: imageUrl, imageAlt: model.imageAltText, useImageAsBanner: model.useImageAsHero, useAltExpandButton: false, useAuth: model.isPersonalized, useCookie: true, cookieName: cookieName, modifierClass: `tsn--${id}`, onReady: () => track("impression"), onCtaClick: () => track("cta-click"), onManualExpand: () => track("expand"), onManualCollapse: () => track("collapse"), }); } requestAnimationFrame(initPromotion); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js" type="text/javascript"></script> <script type="text/javascript"> var oneTrustHelper = (function () { function evalGTMScript() { var gtmScript = document.getElementById("GTMScript"); gtmScript.type = "text/javascript"; gtmScript.classList.remove("optanon-category-1"); eval(gtmScript.innerHTML); }; return { gtmFallback: function () { console.warn('OneTrust not loaded.'); if (document.readyState !== 'loading') { evalGTMScript(); } else { document.addEventListener('readystatechange', function () { if (document.readyState === 'interactive') { evalGTMScript(); } }); }; } }; })(); </script> <script onerror="oneTrustHelper.gtmFallback()" src="https://cdn.cookielaw.org/consent/3dfce4f2-dab6-4128-9f33-df7e0597da82/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" data-domain-script="3dfce4f2-dab6-4128-9f33-df7e0597da82"></script> <script type="text/javascript"> (function (w) { w.OptanonGroups = {"StrictlyNecessaryCookies":"1","PerformanceCookies":"2","FunctionalCookies":"3","TargetingCookies":"4"}; w.isOptanonGroupActive = function (groupId, explicit) { if (!w.OptanonActiveGroups) return false; var groupMatchKey = ',' + groupId + ','; return w.OptanonActiveGroups.indexOf(groupMatchKey) !== -1; } function toggleSitefinityTrackingConsent() { var performanceCookiesGroupId = w.OptanonGroups.PerformanceCookies; var isPerformanceCookiesGroupIdActive = w.isOptanonGroupActive(performanceCookiesGroupId, true); if (w.TrackingConsentManager) { w.TrackingConsentManager.updateUserConsent(isPerformanceCookiesGroupIdActive); } }; var trackingScriptsQueue = []; w.invokeTrackingScript = function (thisReference, trackingGroup, functionReference) { if (isOptanonGroupActive(trackingGroup, true)) { functionReference.call(thisReference); } else { trackingScriptsQueue.push({ thisReference: thisReference, trackingGroup: trackingGroup, functionReference: functionReference }); } } var isOptanonToggled = false; var preferenceChangeHandlerAdded = false; w.OptanonWrapper = function () { var newTrackingScriptsQueue = []; for (var i = 0; i < trackingScriptsQueue.length; i++) { var trackingScriptData = trackingScriptsQueue[i]; if (isOptanonGroupActive(trackingScriptData.trackingGroup, true)) { trackingScriptData.functionReference.call(trackingScriptData.thisReference); } else { newTrackingScriptsQueue.push(trackingScriptData); } } trackingScriptsQueue = newTrackingScriptsQueue; if (!isOptanonToggled && w.location.hash === '#cookie-settings' && true) { isOptanonToggled = true; Optanon.ToggleInfoDisplay(); } if(!preferenceChangeHandlerAdded){ OneTrust.OnConsentChanged(function() { // Trigger cookie check process after user makes changes to allowed cookie groups from the OneTrust cookie settings dialog. $.ajax( { url: '/webapi/CookiePreferences/Update', type: 'HEAD' }); }); preferenceChangeHandlerAdded = true; } toggleSitefinityTrackingConsent(); } })(window); </script> <script type='text/javascript'>telerikId=null;var tlrkUser={isAuthenticated:!!telerikId};if(document.addEventListener){window.dataLayer=window.dataLayer||[];dataLayer.push({uniqueId:'073c7e0c-0070-4997-aebd-394516e65056',telerikId:telerikId});dataLayer.push({event:'persistuuid'})}</script> <script id="GTMScript" type="text/plain" class="optanon-category-1" > function isMobileDevice() { var result = false; var matches = [ /(Windows Phone(?: OS)?)\s(\d+)\.(\d+(\.\d+)?)/, /(Silk)\/(\d+)\.(\d+(\.\d+)?)/, /(Android|Android.*(?:Opera|Firefox).*?\/)\s*(\d+)\.?(\d+(\.\d+)?)?/, /(iPhone|iPod).*OS\s+(\d+)[\._]([\d\._]+)/, /(iPad).*OS\s+(\d+)[\._]([\d_]+)/, /(MeeGo).+NokiaBrowser\/(\d+)\.([\d\._]+)/, /(webOS)\/(\d+)\.(\d+(\.\d+)?)/, /(BlackBerry|BB10).*?Version\/(\d+)\.(\d+(\.\d+)?)/, /(PlayBook).*?Tablet\s*OS\s*(\d+)\.(\d+(\.\d+)?)/, /(MSIE)\s+(\d+)\.(\d+(\.\d+)?)/, /(tizen).*?Version\/(\d+)\.(\d+(\.\d+)?)/i, /(sailfish).*rv:(\d+)\.(\d+(\.\d+)?).*firefox/i, /(Mobile).*rv:(\d+)\.(\d+(\.\d+)?).*Firefox/ ]; for (var i = 0; i < matches.length; i++) { result = matches[i].test(window.navigator.userAgent); if (result) { break; } } return result; } (function () { 'use strict'; window.dataLayer = window.dataLayer || []; dataLayer.push({ isTelerikMarketingWebsite: true }); if (isMobileDevice()) { return; } (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92'); })(); </script> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe> </noscript> <script type="text/plain" class="optanon-category-2"> !function (e) { function n() { if (e && r()) { var n = t(); i(e, n) } } function i(e, n) { l.post(u, new c({ telerikId: e, uniqueId: n })) } function t() { for (var e = document.cookie.split(";"), n = "gauuid", i = 0; i < e.length; i++) { for (var t = e[i]; " " === t.charAt(0);)t = t.substring(1, t.length); if (0 === t.indexOf(n)) return t.substring(n.length, t.length).replace("=", "") } return null } function r() { var e = new Date; if (null === localStorage.getItem(a)) return o(e), !0; var n = Date.parse(localStorage.getItem(a)); if (isNaN(n)) return !1; var i = new Date(n); return i.setTime(i.getTime() + 6048e5) < e ? (o(e), !0) : !1 } function o(e) { localStorage.setItem(a, e.toISOString()) } if (window.jQuery) { var l = window.jQuery, u = window.location.origin + "/services/callhomeservice/api/userlogged", a = "call-home-client-key-user-logged", c = function (e) { this.telerikId = e.telerikId, this.uniqueId = e.uniqueId }; l(document).ready(function () { n() }), window.__callhome__ || (window.__callhome__ = {}), window.__callhome__.verify = r, window.__callhome__.init = n } }(telerikId); </script> <script src="/Frontend-Assembly/Telerik.Sitefinity.Frontend.Lists/Mvc/Scripts/Lists/lists.min.js?package=PureMvc&v=MTQuNC44MTM0LjA%3d" type="text/javascript"></script><script src="https://dtzbdy9anri2p.cloudfront.net/cache/cb8bae07640f6f03e4c39d07edd14ee3339cbba8/telerik/js/dist/all.min.js" type="text/javascript"></script> <script type="text/javascript"> (function() { if (window._dataLayerTimeout) { clearTimeout(window._dataLayerTimeout); } window._dataLayerTaxLoadedEvent = {"tax_pagenode_products":"kendo-ui","event":"tax_loaded"}; window._dataLayerTimeout = setTimeout(function() { window.dataLayer = window.dataLayer || []; window.dataLayer.push(window._dataLayerTaxLoadedEvent); }); })(); </script><script type="text/plain" class="optanon-category-2"> (function() { var script = '//s1325.t.eloqua.com/visitor/v200/svrGP?pps=70&siteid=1325'; (function getScript(source, callback) { var script = document.createElement('script'); var prior = document.getElementsByTagName('script')[0]; script.async = 1; prior.parentNode.insertBefore(script, prior); script.onload = script.onreadystatechange = function( _, isAbort ) { if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { script.onload = script.onreadystatechange = null; script = undefined; if(!isAbort) { if(callback) callback(); } } }; script.src = source; })(script, function() { if (typeof GetElqCustomerGUID == 'function') { var userId = GetElqCustomerGUID(); document.cookie = 'elqUserId=' + userId + '; path=/;SameSite=Lax;'; } }); })(); </script><script type="application/json" id="PersonalizationTracker"> {"IsPagePersonalizationTarget":false,"IsUrlPersonalizationTarget":false,"PageId":"17d7f764-6099-4dba-8b75-aa7981fca36c"} </script><script type="text/javascript" src="/WebResource.axd?d=NjxTqR2bqTw1rewxxlkHPoKtHrXAWC0HAaoiA_KkRcUyXkV02CSw2viy3BbwqQQWnOeUM4JljOrJ6SdN8P6xkcmc02D5IE0_hoR3ujKOHMUMV0D80Ax-2HQgUBn3JFGVcQMIptO-sbrJg4UhPcfKleFkBd3KXta5g771qRLz1--cqQWHZet4VERXE7zwP_V-_reX4bmQVhWS6yxLXOsj2Tnqll01&t=638646398980000000"> </script><script type="text/javascript"> window.addEventListener("DOMContentLoaded",()=>{var h=$('[class*="sctn-"]'),t=!1,n=$(".DC-scroller"),u=$(".DC-Scroller--end"),i=n.children("a:not(.Btn)"),f=$("html, body");function c(n){n.preventDefault();f.not(":animated").addClass("is-scrolling").animate({scrollTop:$("."+$(n.target).data("scrollto")).offset().top},1200,"easeInOutQuart").promise().done(function(){f.removeClass("is-scrolling");let t=document.querySelector("."+n.target.getAttribute("data-scrollto"));t.tabIndex=0;t.focus();t.tabIndex=-1})}function r(t){var r=t||!1;if(r){var u=i.filter('[data-scrollto="'+r+'"]'),f=u.hasClass("has-light-bg")?!0:!1;u.addClass("is-active").siblings().removeClass("is-active");f?n.addClass("DC-scroller--light"):n.removeClass("DC-scroller--light")}else i.removeClass("is-active")}function e(n){var r=n.offset().top,f=r+n.outerHeight(),t=$(window).scrollTop(),i=t+$(window).height();return n==u?f-1/4*(i-t)>t&&r<i-1/4*(i-t):f-1/2*(i-t)>t&&r<i-1/2*(i-t)}function o(){if(!n.hasClass("is-paused")){var t=n.offset();n.css({position:"absolute",left:t.left+"px",top:t.top+"px"});n.addClass("is-paused")}}function l(){n.hasClass("is-paused")&&(n.removeAttr("style"),n.removeClass("is-paused"))}function s(i){t=i||t;var f=0;if(t){if(t=!1,e(u))return r("sctn-FAQs"),o(),!1;h.each(function(t,i){var u=$(i);if(e(u)){var s=u.attr("class").match(/(sctn-[a-zA-Z0-9-_]*)/g)[0]||!1;return s==="sctn-CTA-bottom"?(o(),n.css({visibility:"hidden"}),!1):(r(s),l(),f++,!1)}});f===0&&r(!1)}}function a(){t=!0}i.on("click",c);$(window).on("scroll",a);window.setInterval(s,16);s(!0)}) </script><script type="text/javascript"> function lazyLoadCSS(){if(window.innerWidth>960){const n=document.createElement("link");n.type="text/css";n.rel="stylesheet";n.href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css";const t=document.getElementsByTagName("link")[0];t.parentNode.insertBefore(n,t)}}document.addEventListener("DOMContentLoaded",function(){lazyLoadCSS()}) </script><script type="text/javascript"> (function(){const t=window.location.hash.split("#"),i=document.querySelectorAll(".Question");function r(n){n.preventDefault();history.pushState(null,null,n.currentTarget.getAttribute("href"))}function u(){i.forEach(function(n){const t=n.innerText.replace("➡","").trim().replace(/\?|,/g,"").replace(/\s|\.|[^a-zA-Z-]/g,"-").toLowerCase();n.setAttribute("id",t);n.setAttribute("href","#"+t);n.addEventListener("click",r)})}function n(){t.forEach(function(n){if(n!==""&&n!="all-components"){const t=document.querySelector("#"+n);t&&(t.classList.add("expanded"),t.nextElementSibling.style.display="block",document.querySelector("#faqs").scrollIntoView())}})}function f(){u();n()}window.addEventListener("load",f);window.addEventListener("hashchange",n)})() </script><script type="text/javascript"> $(function(){$(".TK-Menu-Item-Link").each(function(){$(this).text().indexOf("Overview")==0&&$(this).addClass("TK-Item--Selected").attr("href",document.location.href)})}) </script> <script type="text/plain" class="optanon-category-2"> !function () { function loadEloqua() { if (void 0 === window._elqQ || window._elqQ.constructor !== Array || "elqSetSiteId" !== window._elqQ[0][0] || "1325" !== window._elqQ[0][1]) { window.dataLayer = window.dataLayer || [], window._elqQ = window._elqQ || [], window._elqQ.push(["elqSetSiteId", "1325"]), window._elqQ.push(["elqTrackPageView", window.location.href]), window.dataLayer.push({ event: "elqQ_loaded" }); var s = document.createElement("script"); s.type = "text/javascript", s.async = !0, s.src = "//img.en25.com/i/elqCfg.min.js"; var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x) } } function loadGA() { window._gaq = window._gaq || [], window._gaq.push(["_setAccount","UA-111455-1"], ["_setDomainName", ".telerik.com"], ["_addIgnoredRef", "telerik.com"], ["_trackPageview"]); var ga = document.createElement("script"); ga.type = "text/javascript", ga.async = !0, ga.src = ("https:" == document.location.protocol ? "https://" : "http://") + "stats.g.doubleclick.net/dc.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s) } isMobileDevice() && (loadGA(), loadEloqua()) }();</script> <script type="text/javascript" defer src='https://d585tldpucybw.cloudfront.net/Frontend-Assembly/Web.SitefinityExtensions.EloquaConnector/Scripts/BrowserSessionStorage.min.js?package=PureMvc&v=Q2NzWmRUZmg5UHpIS3RyRDhtYkJmUT09'></script> <script type="text/javascript" defer src='https://d585tldpucybw.cloudfront.net/Frontend-Assembly/Web.SitefinityExtensions.EloquaConnector/Scripts/SetBrowserSessionStorage.min.js?package=PureMvc&v=SURNTlNWL0Q2UU9sSFp4Z2dmYnp0UT09)'></script> </body> </html>