<!DOCTYPE html> <html> <head itemscope itemtype="https://schema.org/WebSite" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#"> <meta charset="utf-8"> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"50be1a5c2f","applicationID":"10371034","transactionName":"JlhdRhEOCQhdExoUEQpTRlEXThYMVxY=","queueTime":4,"applicationTime":54,"agent":""}</script> <script type="text/javascript">(window.NREUM||(NREUM={})).init={ajax:{deny_list:["bam.nr-data.net"]}};(window.NREUM||(NREUM={})).loader_config={licenseKey:"50be1a5c2f",applicationID:"10371034"};;/*! For license information please see nr-loader-rum-1.274.0.min.js.LICENSE.txt */ (()=>{var e,t,r={8122:(e,t,r)=>{"use strict";r.d(t,{a:()=>i});var n=r(944);function i(e,t){try{if(!e||"object"!=typeof e)return(0,n.R)(3);if(!t||"object"!=typeof t)return(0,n.R)(4);const r=Object.create(Object.getPrototypeOf(t),Object.getOwnPropertyDescriptors(t)),o=0===Object.keys(r).length?e:r;for(let a in o)if(void 0!==e[a])try{if(null===e[a]){r[a]=null;continue}Array.isArray(e[a])&&Array.isArray(t[a])?r[a]=Array.from(new Set([...e[a],...t[a]])):"object"==typeof e[a]&&"object"==typeof t[a]?r[a]=i(e[a],t[a]):r[a]=e[a]}catch(e){(0,n.R)(1,e)}return r}catch(e){(0,n.R)(2,e)}}},2555:(e,t,r)=>{"use strict";r.d(t,{Vp:()=>c,fn:()=>s,x1:()=>u});var n=r(384),i=r(8122);const o={beacon:n.NT.beacon,errorBeacon:n.NT.errorBeacon,licenseKey:void 0,applicationID:void 0,sa:void 0,queueTime:void 0,applicationTime:void 0,ttGuid:void 0,user:void 0,account:void 0,product:void 0,extra:void 0,jsAttributes:{},userAttributes:void 0,atts:void 0,transactionName:void 0,tNamePlain:void 0},a={};function s(e){try{const t=c(e);return!!t.licenseKey&&!!t.errorBeacon&&!!t.applicationID}catch(e){return!1}}function c(e){if(!e)throw new Error("All info objects require an agent identifier!");if(!a[e])throw new Error("Info for ".concat(e," was never set"));return a[e]}function u(e,t){if(!e)throw new Error("All info objects require an agent identifier!");a[e]=(0,i.a)(t,o);const r=(0,n.nY)(e);r&&(r.info=a[e])}},9417:(e,t,r)=>{"use strict";r.d(t,{D0:()=>g,gD:()=>h,xN:()=>p});var n=r(993);const i=e=>{if(!e||"string"!=typeof e)return!1;try{document.createDocumentFragment().querySelector(e)}catch{return!1}return!0};var o=r(2614),a=r(944),s=r(384),c=r(8122);const u="[data-nr-mask]",d=()=>{const e={mask_selector:"*",block_selector:"[data-nr-block]",mask_input_options:{color:!1,date:!1,"datetime-local":!1,email:!1,month:!1,number:!1,range:!1,search:!1,tel:!1,text:!1,time:!1,url:!1,week:!1,textarea:!1,select:!1,password:!0}};return{ajax:{deny_list:void 0,block_internal:!0,enabled:!0,harvestTimeSeconds:10,autoStart:!0},distributed_tracing:{enabled:void 0,exclude_newrelic_header:void 0,cors_use_newrelic_header:void 0,cors_use_tracecontext_headers:void 0,allowed_origins:void 0},feature_flags:[],generic_events:{enabled:!0,harvestTimeSeconds:30,autoStart:!0},harvest:{tooManyRequestsDelay:60},jserrors:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},logging:{enabled:!0,harvestTimeSeconds:10,autoStart:!0,level:n.p_.INFO},metrics:{enabled:!0,autoStart:!0},obfuscate:void 0,page_action:{enabled:!0},page_view_event:{enabled:!0,autoStart:!0},page_view_timing:{enabled:!0,harvestTimeSeconds:30,autoStart:!0},performance:{capture_marks:!1,capture_measures:!1},privacy:{cookies_enabled:!0},proxy:{assets:void 0,beacon:void 0},session:{expiresMs:o.wk,inactiveMs:o.BB},session_replay:{autoStart:!0,enabled:!1,harvestTimeSeconds:60,preload:!1,sampling_rate:10,error_sampling_rate:100,collect_fonts:!1,inline_images:!1,fix_stylesheets:!0,mask_all_inputs:!0,get mask_text_selector(){return e.mask_selector},set mask_text_selector(t){i(t)?e.mask_selector="".concat(t,",").concat(u):""===t||null===t?e.mask_selector=u:(0,a.R)(5,t)},get block_class(){return"nr-block"},get ignore_class(){return"nr-ignore"},get mask_text_class(){return"nr-mask"},get block_selector(){return e.block_selector},set block_selector(t){i(t)?e.block_selector+=",".concat(t):""!==t&&(0,a.R)(6,t)},get mask_input_options(){return e.mask_input_options},set mask_input_options(t){t&&"object"==typeof t?e.mask_input_options={...t,password:!0}:(0,a.R)(7,t)}},session_trace:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},soft_navigations:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},spa:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},ssl:void 0,user_actions:{enabled:!0}}},l={},f="All configuration objects require an agent identifier!";function g(e){if(!e)throw new Error(f);if(!l[e])throw new Error("Configuration for ".concat(e," was never set"));return l[e]}function p(e,t){if(!e)throw new Error(f);l[e]=(0,c.a)(t,d());const r=(0,s.nY)(e);r&&(r.init=l[e])}function h(e,t){if(!e)throw new Error(f);var r=g(e);if(r){for(var n=t.split("."),i=0;i<n.length-1;i++)if("object"!=typeof(r=r[n[i]]))return;r=r[n[n.length-1]]}return r}},3371:(e,t,r)=>{"use strict";r.d(t,{V:()=>f,f:()=>l});var n=r(8122),i=r(384),o=r(6154),a=r(9324);let s=0;const c={buildEnv:a.F3,distMethod:a.Xs,version:a.xv,originTime:o.WN},u={customTransaction:void 0,disabled:!1,isolatedBacklog:!1,loaderType:void 0,maxBytes:3e4,onerror:void 0,ptid:void 0,releaseIds:{},appMetadata:{},session:void 0,denyList:void 0,timeKeeper:void 0,obfuscator:void 0},d={};function l(e){if(!e)throw new Error("All runtime objects require an agent identifier!");if(!d[e])throw new Error("Runtime for ".concat(e," was never set"));return d[e]}function f(e,t){if(!e)throw new Error("All runtime objects require an agent identifier!");d[e]={...(0,n.a)(t,u),...c},Object.hasOwnProperty.call(d[e],"harvestCount")||Object.defineProperty(d[e],"harvestCount",{get:()=>++s});const r=(0,i.nY)(e);r&&(r.runtime=d[e])}},9324:(e,t,r)=>{"use strict";r.d(t,{F3:()=>i,Xs:()=>o,xv:()=>n});const n="1.274.0",i="PROD",o="CDN"},6154:(e,t,r)=>{"use strict";r.d(t,{OF:()=>c,RI:()=>i,WN:()=>d,bv:()=>o,gm:()=>a,mw:()=>s,sb:()=>u});var n=r(1863);const i="undefined"!=typeof window&&!!window.document,o="undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self.navigator instanceof WorkerNavigator||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis.navigator instanceof WorkerNavigator),a=i?window:"undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis),s=Boolean("hidden"===a?.document?.visibilityState),c=/iPad|iPhone|iPod/.test(a.navigator?.userAgent),u=c&&"undefined"==typeof SharedWorker,d=((()=>{const e=a.navigator?.userAgent?.match(/Firefox[/\s](\d+\.\d+)/);Array.isArray(e)&&e.length>=2&&e[1]})(),Date.now()-(0,n.t)())},1687:(e,t,r)=>{"use strict";r.d(t,{Ak:()=>c,Ze:()=>l,x3:()=>u});var n=r(7836),i=r(3606),o=r(860),a=r(2646);const s={};function c(e,t){const r={staged:!1,priority:o.P3[t]||0};d(e),s[e].get(t)||s[e].set(t,r)}function u(e,t){e&&s[e]&&(s[e].get(t)&&s[e].delete(t),g(e,t,!1),s[e].size&&f(e))}function d(e){if(!e)throw new Error("agentIdentifier required");s[e]||(s[e]=new Map)}function l(e="",t="feature",r=!1){if(d(e),!e||!s[e].get(t)||r)return g(e,t);s[e].get(t).staged=!0,f(e)}function f(e){const t=Array.from(s[e]);t.every((([e,t])=>t.staged))&&(t.sort(((e,t)=>e[1].priority-t[1].priority)),t.forEach((([t])=>{s[e].delete(t),g(e,t)})))}function g(e,t,r=!0){const o=e?n.ee.get(e):n.ee,s=i.i.handlers;if(!o.aborted&&o.backlog&&s){if(r){const e=o.backlog[t],r=s[t];if(r){for(let t=0;e&&t<e.length;++t)p(e[t],r);Object.entries(r).forEach((([e,t])=>{Object.values(t||{}).forEach((t=>{t[0]?.on&&t[0]?.context()instanceof a.y&&t[0].on(e,t[1])}))}))}}o.isolatedBacklog||delete s[t],o.backlog[t]=null,o.emit("drain-"+t,[])}}function p(e,t){var r=e[1];Object.values(t[r]||{}).forEach((t=>{var r=e[0];if(t[0]===r){var n=t[1],i=e[3],o=e[2];n.apply(i,o)}}))}},7836:(e,t,r)=>{"use strict";r.d(t,{P:()=>c,ee:()=>u});var n=r(384),i=r(8990),o=r(3371),a=r(2646),s=r(5607);const c="nr@context:".concat(s.W),u=function e(t,r){var n={},s={},d={},l=!1;try{l=16===r.length&&(0,o.f)(r).isolatedBacklog}catch(e){}var f={on:p,addEventListener:p,removeEventListener:function(e,t){var r=n[e];if(!r)return;for(var i=0;i<r.length;i++)r[i]===t&&r.splice(i,1)},emit:function(e,r,n,i,o){!1!==o&&(o=!0);if(u.aborted&&!i)return;t&&o&&t.emit(e,r,n);for(var a=g(n),c=h(e),d=c.length,l=0;l<d;l++)c[l].apply(a,r);var p=m()[s[e]];p&&p.push([f,e,r,a]);return a},get:v,listeners:h,context:g,buffer:function(e,t){const r=m();if(t=t||"feature",f.aborted)return;Object.entries(e||{}).forEach((([e,n])=>{s[n]=t,t in r||(r[t]=[])}))},abort:function(){f._aborted=!0,Object.keys(f.backlog).forEach((e=>{delete f.backlog[e]}))},isBuffering:function(e){return!!m()[s[e]]},debugId:r,backlog:l?{}:t&&"object"==typeof t.backlog?t.backlog:{},isolatedBacklog:l};return Object.defineProperty(f,"aborted",{get:()=>{let e=f._aborted||!1;return e||(t&&(e=t.aborted),e)}}),f;function g(e){return e&&e instanceof a.y?e:e?(0,i.I)(e,c,(()=>new a.y(c))):new a.y(c)}function p(e,t){n[e]=h(e).concat(t)}function h(e){return n[e]||[]}function v(t){return d[t]=d[t]||e(f,t)}function m(){return f.backlog}}(void 0,"globalEE"),d=(0,n.Zm)();d.ee||(d.ee=u)},2646:(e,t,r)=>{"use strict";r.d(t,{y:()=>n});class n{constructor(e){this.contextId=e}}},9908:(e,t,r)=>{"use strict";r.d(t,{d:()=>n,p:()=>i});var n=r(7836).ee.get("handle");function i(e,t,r,i,o){o?(o.buffer([e],i),o.emit(e,t,r)):(n.buffer([e],i),n.emit(e,t,r))}},3606:(e,t,r)=>{"use strict";r.d(t,{i:()=>o});var n=r(9908);o.on=a;var i=o.handlers={};function o(e,t,r,o){a(o||n.d,i,e,t,r)}function a(e,t,r,i,o){o||(o="feature"),e||(e=n.d);var a=t[o]=t[o]||{};(a[r]=a[r]||[]).push([e,i])}},3878:(e,t,r)=>{"use strict";function n(e,t){return{capture:e,passive:!1,signal:t}}function i(e,t,r=!1,i){window.addEventListener(e,t,n(r,i))}function o(e,t,r=!1,i){document.addEventListener(e,t,n(r,i))}r.d(t,{DD:()=>o,jT:()=>n,sp:()=>i})},5607:(e,t,r)=>{"use strict";r.d(t,{W:()=>n});const n=(0,r(9566).bz)()},9566:(e,t,r)=>{"use strict";r.d(t,{LA:()=>s,bz:()=>a});var n=r(6154);const i="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";function o(e,t){return e?15&e[t]:16*Math.random()|0}function a(){const e=n.gm?.crypto||n.gm?.msCrypto;let t,r=0;return e&&e.getRandomValues&&(t=e.getRandomValues(new Uint8Array(30))),i.split("").map((e=>"x"===e?o(t,r++).toString(16):"y"===e?(3&o()|8).toString(16):e)).join("")}function s(e){const t=n.gm?.crypto||n.gm?.msCrypto;let r,i=0;t&&t.getRandomValues&&(r=t.getRandomValues(new Uint8Array(e)));const a=[];for(var s=0;s<e;s++)a.push(o(r,i++).toString(16));return a.join("")}},2614:(e,t,r)=>{"use strict";r.d(t,{BB:()=>a,H3:()=>n,g:()=>u,iL:()=>c,tS:()=>s,uh:()=>i,wk:()=>o});const n="NRBA",i="SESSION",o=144e5,a=18e5,s={STARTED:"session-started",PAUSE:"session-pause",RESET:"session-reset",RESUME:"session-resume",UPDATE:"session-update"},c={SAME_TAB:"same-tab",CROSS_TAB:"cross-tab"},u={OFF:0,FULL:1,ERROR:2}},1863:(e,t,r)=>{"use strict";function n(){return Math.floor(performance.now())}r.d(t,{t:()=>n})},944:(e,t,r)=>{"use strict";function n(e,t){"function"==typeof console.debug&&console.debug("New Relic Warning: https://github.com/newrelic/newrelic-browser-agent/blob/main/docs/warning-codes.md#".concat(e),t)}r.d(t,{R:()=>n})},5284:(e,t,r)=>{"use strict";r.d(t,{t:()=>c,B:()=>s});var n=r(7836),i=r(6154);const o="newrelic";const a=new Set,s={};function c(e,t){const r=n.ee.get(t);s[t]??={},e&&"object"==typeof e&&(a.has(t)||(r.emit("rumresp",[e]),s[t]=e,a.add(t),function(e={}){try{i.gm.dispatchEvent(new CustomEvent(o,{detail:e}))}catch(e){}}({loaded:!0})))}},8990:(e,t,r)=>{"use strict";r.d(t,{I:()=>i});var n=Object.prototype.hasOwnProperty;function i(e,t,r){if(n.call(e,t))return e[t];var i=r();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,t,{value:i,writable:!0,enumerable:!1}),i}catch(e){}return e[t]=i,i}},6389:(e,t,r)=>{"use strict";function n(e,t=500,r={}){const n=r?.leading||!1;let i;return(...r)=>{n&&void 0===i&&(e.apply(this,r),i=setTimeout((()=>{i=clearTimeout(i)}),t)),n||(clearTimeout(i),i=setTimeout((()=>{e.apply(this,r)}),t))}}function i(e){let t=!1;return(...r)=>{t||(t=!0,e.apply(this,r))}}r.d(t,{J:()=>i,s:()=>n})},5289:(e,t,r)=>{"use strict";r.d(t,{GG:()=>o,sB:()=>a});var n=r(3878);function i(){return"undefined"==typeof document||"complete"===document.readyState}function o(e,t){if(i())return e();(0,n.sp)("load",e,t)}function a(e){if(i())return e();(0,n.DD)("DOMContentLoaded",e)}},384:(e,t,r)=>{"use strict";r.d(t,{NT:()=>o,US:()=>d,Zm:()=>a,bQ:()=>c,dV:()=>s,nY:()=>u,pV:()=>l});var n=r(6154),i=r(1863);const o={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net"};function a(){return n.gm.NREUM||(n.gm.NREUM={}),void 0===n.gm.newrelic&&(n.gm.newrelic=n.gm.NREUM),n.gm.NREUM}function s(){let e=a();return e.o||(e.o={ST:n.gm.setTimeout,SI:n.gm.setImmediate,CT:n.gm.clearTimeout,XHR:n.gm.XMLHttpRequest,REQ:n.gm.Request,EV:n.gm.Event,PR:n.gm.Promise,MO:n.gm.MutationObserver,FETCH:n.gm.fetch,WS:n.gm.WebSocket}),e}function c(e,t){let r=a();r.initializedAgents??={},t.initializedAt={ms:(0,i.t)(),date:new Date},r.initializedAgents[e]=t}function u(e){let t=a();return t.initializedAgents?.[e]}function d(e,t){a()[e]=t}function l(){return function(){let e=a();const t=e.info||{};e.info={beacon:o.beacon,errorBeacon:o.errorBeacon,...t}}(),function(){let e=a();const t=e.init||{};e.init={...t}}(),s(),function(){let e=a();const t=e.loader_config||{};e.loader_config={...t}}(),a()}},2843:(e,t,r)=>{"use strict";r.d(t,{u:()=>i});var n=r(3878);function i(e,t=!1,r,i){(0,n.DD)("visibilitychange",(function(){if(t)return void("hidden"===document.visibilityState&&e());e(document.visibilityState)}),r,i)}},3434:(e,t,r)=>{"use strict";r.d(t,{YM:()=>c});var n=r(7836),i=r(5607);const o="nr@original:".concat(i.W);var a=Object.prototype.hasOwnProperty,s=!1;function c(e,t){return e||(e=n.ee),r.inPlace=function(e,t,n,i,o){n||(n="");const a="-"===n.charAt(0);for(let s=0;s<t.length;s++){const c=t[s],u=e[c];d(u)||(e[c]=r(u,a?c+n:n,i,c,o))}},r.flag=o,r;function r(t,r,n,s,c){return d(t)?t:(r||(r=""),nrWrapper[o]=t,function(e,t,r){if(Object.defineProperty&&Object.keys)try{return Object.keys(e).forEach((function(r){Object.defineProperty(t,r,{get:function(){return e[r]},set:function(t){return e[r]=t,t}})})),t}catch(e){u([e],r)}for(var n in e)a.call(e,n)&&(t[n]=e[n])}(t,nrWrapper,e),nrWrapper);function nrWrapper(){var o,a,d,l;try{a=this,o=[...arguments],d="function"==typeof n?n(o,a):n||{}}catch(t){u([t,"",[o,a,s],d],e)}i(r+"start",[o,a,s],d,c);try{return l=t.apply(a,o)}catch(e){throw i(r+"err",[o,a,e],d,c),e}finally{i(r+"end",[o,a,l],d,c)}}}function i(r,n,i,o){if(!s||t){var a=s;s=!0;try{e.emit(r,n,i,t,o)}catch(t){u([t,r,n,i],e)}s=a}}}function u(e,t){t||(t=n.ee);try{t.emit("internal-error",e)}catch(e){}}function d(e){return!(e&&"function"==typeof e&&e.apply&&!e[o])}},993:(e,t,r)=>{"use strict";r.d(t,{ET:()=>o,p_:()=>i});var n=r(860);const i={ERROR:"ERROR",WARN:"WARN",INFO:"INFO",DEBUG:"DEBUG",TRACE:"TRACE"},o="log";n.K7.logging},3969:(e,t,r)=>{"use strict";r.d(t,{TZ:()=>n,XG:()=>s,rs:()=>i,xV:()=>a,z_:()=>o});const n=r(860).K7.metrics,i="sm",o="cm",a="storeSupportabilityMetrics",s="storeEventMetrics"},6630:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewEvent},782:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewTiming},6344:(e,t,r)=>{"use strict";r.d(t,{G4:()=>i});var n=r(2614);r(860).K7.sessionReplay;const i={RECORD:"recordReplay",PAUSE:"pauseReplay",REPLAY_RUNNING:"replayRunning",ERROR_DURING_REPLAY:"errorDuringReplay"};n.g.ERROR,n.g.FULL,n.g.OFF},4234:(e,t,r)=>{"use strict";r.d(t,{W:()=>o});var n=r(7836),i=r(1687);class o{constructor(e,t){this.agentIdentifier=e,this.ee=n.ee.get(e),this.featureName=t,this.blocked=!1}deregisterDrain(){(0,i.x3)(this.agentIdentifier,this.featureName)}}},7603:(e,t,r)=>{"use strict";r.d(t,{j:()=>P});var n=r(860),i=r(2555),o=r(3371),a=r(9908),s=r(7836),c=r(1687),u=r(5289),d=r(6154),l=r(944),f=r(3969),g=r(384),p=r(6344);const h=["setErrorHandler","finished","addToTrace","addRelease","addPageAction","setCurrentRouteName","setPageViewName","setCustomAttribute","interaction","noticeError","setUserId","setApplicationVersion","start",p.G4.RECORD,p.G4.PAUSE,"log","wrapLogger"],v=["setErrorHandler","finished","addToTrace","addRelease"];var m=r(1863),b=r(2614),y=r(993);var w=r(2646),A=r(3434);function R(e,t,r,n){if("object"!=typeof t||!t||"string"!=typeof r||!r||"function"!=typeof t[r])return(0,l.R)(29);const i=function(e){return(e||s.ee).get("logger")}(e),o=(0,A.YM)(i),a=new w.y(s.P);return a.level=n.level,a.customAttributes=n.customAttributes,o.inPlace(t,[r],"wrap-logger-",a),i}function E(){const e=(0,g.pV)();h.forEach((t=>{e[t]=(...r)=>function(t,...r){let n=[];return Object.values(e.initializedAgents).forEach((e=>{e&&e.api?e.exposed&&e.api[t]&&n.push(e.api[t](...r)):(0,l.R)(38,t)})),n.length>1?n:n[0]}(t,...r)}))}const x={};function _(e,t,g=!1){t||(0,c.Ak)(e,"api");const h={};var w=s.ee.get(e),A=w.get("tracer");x[e]=b.g.OFF,w.on(p.G4.REPLAY_RUNNING,(t=>{x[e]=t}));var E="api-",_=E+"ixn-";function N(t,r,n,o){const a=(0,i.Vp)(e);return null===r?delete a.jsAttributes[t]:(0,i.x1)(e,{...a,jsAttributes:{...a.jsAttributes,[t]:r}}),j(E,n,!0,o||null===r?"session":void 0)(t,r)}function T(){}h.log=function(e,{customAttributes:t={},level:r=y.p_.INFO}={}){(0,a.p)(f.xV,["API/log/called"],void 0,n.K7.metrics,w),function(e,t,r={},i=y.p_.INFO){(0,a.p)(f.xV,["API/logging/".concat(i.toLowerCase(),"/called")],void 0,n.K7.metrics,e),(0,a.p)(y.ET,[(0,m.t)(),t,r,i],void 0,n.K7.logging,e)}(w,e,t,r)},h.wrapLogger=(e,t,{customAttributes:r={},level:i=y.p_.INFO}={})=>{(0,a.p)(f.xV,["API/wrapLogger/called"],void 0,n.K7.metrics,w),R(w,e,t,{customAttributes:r,level:i})},v.forEach((e=>{h[e]=j(E,e,!0,"api")})),h.addPageAction=j(E,"addPageAction",!0,n.K7.genericEvents),h.setPageViewName=function(t,r){if("string"==typeof t)return"/"!==t.charAt(0)&&(t="/"+t),(0,o.f)(e).customTransaction=(r||"http://custom.transaction")+t,j(E,"setPageViewName",!0)()},h.setCustomAttribute=function(e,t,r=!1){if("string"==typeof e){if(["string","number","boolean"].includes(typeof t)||null===t)return N(e,t,"setCustomAttribute",r);(0,l.R)(40,typeof t)}else(0,l.R)(39,typeof e)},h.setUserId=function(e){if("string"==typeof e||null===e)return N("enduser.id",e,"setUserId",!0);(0,l.R)(41,typeof e)},h.setApplicationVersion=function(e){if("string"==typeof e||null===e)return N("application.version",e,"setApplicationVersion",!1);(0,l.R)(42,typeof e)},h.start=()=>{try{(0,a.p)(f.xV,["API/start/called"],void 0,n.K7.metrics,w),w.emit("manual-start-all")}catch(e){(0,l.R)(23,e)}},h[p.G4.RECORD]=function(){(0,a.p)(f.xV,["API/recordReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(p.G4.RECORD,[],void 0,n.K7.sessionReplay,w)},h[p.G4.PAUSE]=function(){(0,a.p)(f.xV,["API/pauseReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(p.G4.PAUSE,[],void 0,n.K7.sessionReplay,w)},h.interaction=function(e){return(new T).get("object"==typeof e?e:{})};const S=T.prototype={createTracer:function(e,t){var r={},i=this,o="function"==typeof t;return(0,a.p)(f.xV,["API/createTracer/called"],void 0,n.K7.metrics,w),g||(0,a.p)(_+"tracer",[(0,m.t)(),e,r],i,n.K7.spa,w),function(){if(A.emit((o?"":"no-")+"fn-start",[(0,m.t)(),i,o],r),o)try{return t.apply(this,arguments)}catch(e){const t="string"==typeof e?new Error(e):e;throw A.emit("fn-err",[arguments,this,t],r),t}finally{A.emit("fn-end",[(0,m.t)()],r)}}}};function j(e,t,r,i){return function(){return(0,a.p)(f.xV,["API/"+t+"/called"],void 0,n.K7.metrics,w),i&&(0,a.p)(e+t,[(0,m.t)(),...arguments],r?null:this,i,w),r?void 0:this}}function k(){r.e(296).then(r.bind(r,8778)).then((({setAPI:t})=>{t(e),(0,c.Ze)(e,"api")})).catch((e=>{(0,l.R)(27,e),w.abort()}))}return["actionText","setName","setAttribute","save","ignore","onEnd","getContext","end","get"].forEach((e=>{S[e]=j(_,e,void 0,g?n.K7.softNav:n.K7.spa)})),h.setCurrentRouteName=g?j(_,"routeName",void 0,n.K7.softNav):j(E,"routeName",!0,n.K7.spa),h.noticeError=function(t,r){"string"==typeof t&&(t=new Error(t)),(0,a.p)(f.xV,["API/noticeError/called"],void 0,n.K7.metrics,w),(0,a.p)("err",[t,(0,m.t)(),!1,r,!!x[e]],void 0,n.K7.jserrors,w)},d.RI?(0,u.GG)((()=>k()),!0):k(),h}var N=r(9417),T=r(8122);const S={accountID:void 0,trustKey:void 0,agentID:void 0,licenseKey:void 0,applicationID:void 0,xpid:void 0},j={};var k=r(5284);const I=e=>{const t=e.startsWith("http");e+="/",r.p=t?e:"https://"+e};let O=!1;function P(e,t={},r,n){let{init:a,info:c,loader_config:u,runtime:l={},exposed:f=!0}=t;l.loaderType=r;const p=(0,g.pV)();c||(a=p.init,c=p.info,u=p.loader_config),(0,N.xN)(e.agentIdentifier,a||{}),function(e,t){if(!e)throw new Error("All loader-config objects require an agent identifier!");j[e]=(0,T.a)(t,S);const r=(0,g.nY)(e);r&&(r.loader_config=j[e])}(e.agentIdentifier,u||{}),c.jsAttributes??={},d.bv&&(c.jsAttributes.isWorker=!0),(0,i.x1)(e.agentIdentifier,c);const h=(0,N.D0)(e.agentIdentifier),v=[c.beacon,c.errorBeacon];O||(h.proxy.assets&&(I(h.proxy.assets),v.push(h.proxy.assets)),h.proxy.beacon&&v.push(h.proxy.beacon),E(),(0,g.US)("activatedFeatures",k.B),e.runSoftNavOverSpa&&=!0===h.soft_navigations.enabled&&h.feature_flags.includes("soft_nav")),l.denyList=[...h.ajax.deny_list||[],...h.ajax.block_internal?v:[]],l.ptid=e.agentIdentifier,(0,o.V)(e.agentIdentifier,l),e.ee=s.ee.get(e.agentIdentifier),void 0===e.api&&(e.api=_(e.agentIdentifier,n,e.runSoftNavOverSpa)),void 0===e.exposed&&(e.exposed=f),O=!0}},8374:(e,t,r)=>{r.nc=(()=>{try{return document?.currentScript?.nonce}catch(e){}return""})()},860:(e,t,r)=>{"use strict";r.d(t,{$J:()=>o,K7:()=>n,P3:()=>i});const n={ajax:"ajax",genericEvents:"generic_events",jserrors:"jserrors",logging:"logging",metrics:"metrics",pageAction:"page_action",pageViewEvent:"page_view_event",pageViewTiming:"page_view_timing",sessionReplay:"session_replay",sessionTrace:"session_trace",softNav:"soft_navigations",spa:"spa"},i={[n.pageViewEvent]:1,[n.pageViewTiming]:2,[n.metrics]:3,[n.jserrors]:4,[n.spa]:5,[n.ajax]:6,[n.sessionTrace]:7,[n.softNav]:8,[n.sessionReplay]:9,[n.logging]:10,[n.genericEvents]:11},o={[n.pageViewTiming]:"events",[n.ajax]:"events",[n.spa]:"events",[n.softNav]:"events",[n.metrics]:"jserrors",[n.jserrors]:"jserrors",[n.sessionTrace]:"browser/blobs",[n.sessionReplay]:"browser/blobs",[n.logging]:"browser/logs",[n.genericEvents]:"ins"}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>"nr-rum-1.274.0.min.js",i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="NRBA-1.274.0.PROD:",i.l=(r,n,o,a)=>{if(e[r])e[r].push(n);else{var s,c;if(void 0!==o)for(var u=document.getElementsByTagName("script"),d=0;d<u.length;d++){var l=u[d];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+o){s=l;break}}if(!s){c=!0;var f={296:"sha512-gkYkZDAwQ9PwaDXs2YM+rNIdRej1Ac1mupWobRJ8eahQcXz6/sunGZCKklrzi5kWxhOGRZr2tn0rEKuLTXzfAA=="};(s=document.createElement("script")).charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",t+o),s.src=r,0!==s.src.indexOf(window.location.origin+"/")&&(s.crossOrigin="anonymous"),f[a]&&(s.integrity=f[a])}e[r]=[n];var g=(t,n)=>{s.onerror=s.onload=null,clearTimeout(p);var i=e[r];if(delete e[r],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(n))),t)return t(n)},p=setTimeout(g.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=g.bind(null,s.onerror),s.onload=g.bind(null,s.onload),c&&document.head.appendChild(s)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.p="https://js-agent.newrelic.com/",(()=>{var e={840:0,374:0};i.f.j=(t,r)=>{var n=i.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var o=new Promise(((r,i)=>n=e[t]=[r,i]));r.push(n[2]=o);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var o=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",s.name="ChunkLoadError",s.type=o,s.request=a,n[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,o,[a,s,c]=r,u=0;if(a.some((t=>0!==e[t]))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(c)c(i)}for(t&&t(r);u<a.length;u++)o=a[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=self["webpackChunk:NRBA-1.274.0.PROD"]=self["webpackChunk:NRBA-1.274.0.PROD"]||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),(()=>{"use strict";i(8374);var e=i(944),t=i(6344),r=i(9566);class n{agentIdentifier;constructor(e=(0,r.LA)(16)){this.agentIdentifier=e}#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}addPageAction(e,t){return this.#e("addPageAction",e,t)}setPageViewName(e,t){return this.#e("setPageViewName",e,t)}setCustomAttribute(e,t,r){return this.#e("setCustomAttribute",e,t,r)}noticeError(e,t){return this.#e("noticeError",e,t)}setUserId(e){return this.#e("setUserId",e)}setApplicationVersion(e){return this.#e("setApplicationVersion",e)}setErrorHandler(e){return this.#e("setErrorHandler",e)}addRelease(e,t){return this.#e("addRelease",e,t)}log(e,t){return this.#e("log",e,t)}}class o extends n{#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}start(){return this.#e("start")}finished(e){return this.#e("finished",e)}recordReplay(){return this.#e(t.G4.RECORD)}pauseReplay(){return this.#e(t.G4.PAUSE)}addToTrace(e){return this.#e("addToTrace",e)}setCurrentRouteName(e){return this.#e("setCurrentRouteName",e)}interaction(){return this.#e("interaction")}wrapLogger(e,t,r){return this.#e("wrapLogger",e,t,r)}}var a=i(860),s=i(9417);const c=Object.values(a.K7);function u(e){const t={};return c.forEach((r=>{t[r]=function(e,t){return!0===(0,s.gD)(t,"".concat(e,".enabled"))}(r,e)})),t}var d=i(7603);var l=i(1687),f=i(4234),g=i(5289),p=i(6154),h=i(384);const v=e=>p.RI&&!0===(0,s.gD)(e,"privacy.cookies_enabled");function m(e){return!!(0,h.dV)().o.MO&&v(e)&&!0===(0,s.gD)(e,"session_trace.enabled")}var b=i(6389);class y extends f.W{constructor(e,t,r=!0){super(e.agentIdentifier,t),this.auto=r,this.abortHandler=void 0,this.featAggregate=void 0,this.onAggregateImported=void 0,!1===e.init[this.featureName].autoStart&&(this.auto=!1),this.auto?(0,l.Ak)(e.agentIdentifier,t):this.ee.on("manual-start-all",(0,b.J)((()=>{(0,l.Ak)(e.agentIdentifier,this.featureName),this.auto=!0,this.importAggregator(e)})))}importAggregator(t,r={}){if(this.featAggregate||!this.auto)return;let n;this.onAggregateImported=new Promise((e=>{n=e}));const o=async()=>{let o;try{if(v(this.agentIdentifier)){const{setupAgentSession:e}=await i.e(296).then(i.bind(i,3861));o=e(t)}}catch(t){(0,e.R)(20,t),this.ee.emit("internal-error",[t]),this.featureName===a.K7.sessionReplay&&this.abortHandler?.()}try{if(t.sharedAggregator)await t.sharedAggregator;else{t.sharedAggregator=i.e(296).then(i.bind(i,9337));const{EventAggregator:e}=await t.sharedAggregator;t.sharedAggregator=new e}if(!this.#t(this.featureName,o))return(0,l.Ze)(this.agentIdentifier,this.featureName),void n(!1);const{lazyFeatureLoader:e}=await i.e(296).then(i.bind(i,6103)),{Aggregate:a}=await e(this.featureName,"aggregate");this.featAggregate=new a(t,r),n(!0)}catch(t){(0,e.R)(34,t),this.abortHandler?.(),(0,l.Ze)(this.agentIdentifier,this.featureName,!0),n(!1),this.ee&&this.ee.abort()}};p.RI?(0,g.GG)((()=>o()),!0):o()}#t(e,t){switch(e){case a.K7.sessionReplay:return m(this.agentIdentifier)&&!!t;case a.K7.sessionTrace:return!!t;default:return!0}}}var w=i(6630);class A extends y{static featureName=w.T;constructor(e,t=!0){super(e,w.T,t),this.importAggregator(e)}}var R=i(9908),E=i(2843),x=i(3878),_=i(782),N=i(1863);class T extends y{static featureName=_.T;constructor(e,t=!0){super(e,_.T,t),p.RI&&((0,E.u)((()=>(0,R.p)("docHidden",[(0,N.t)()],void 0,_.T,this.ee)),!0),(0,x.sp)("pagehide",(()=>(0,R.p)("winPagehide",[(0,N.t)()],void 0,_.T,this.ee))),this.importAggregator(e))}}var S=i(3969);class j extends y{static featureName=S.TZ;constructor(e,t=!0){super(e,S.TZ,t),this.importAggregator(e)}}new class extends o{constructor(t,r){super(r),p.gm?(this.features={},(0,h.bQ)(this.agentIdentifier,this),this.desiredFeatures=new Set(t.features||[]),this.desiredFeatures.add(A),this.runSoftNavOverSpa=[...this.desiredFeatures].some((e=>e.featureName===a.K7.softNav)),(0,d.j)(this,t,t.loaderType||"agent"),this.run()):(0,e.R)(21)}get config(){return{info:this.info,init:this.init,loader_config:this.loader_config,runtime:this.runtime}}run(){try{const t=u(this.agentIdentifier),r=[...this.desiredFeatures];r.sort(((e,t)=>a.P3[e.featureName]-a.P3[t.featureName])),r.forEach((r=>{if(!t[r.featureName]&&r.featureName!==a.K7.pageViewEvent)return;if(this.runSoftNavOverSpa&&r.featureName===a.K7.spa)return;if(!this.runSoftNavOverSpa&&r.featureName===a.K7.softNav)return;const n=function(e){switch(e){case a.K7.ajax:return[a.K7.jserrors];case a.K7.sessionTrace:return[a.K7.ajax,a.K7.pageViewEvent];case a.K7.sessionReplay:return[a.K7.sessionTrace];case a.K7.pageViewTiming:return[a.K7.pageViewEvent];default:return[]}}(r.featureName).filter((e=>!(e in this.features)));n.length>0&&(0,e.R)(36,{targetFeature:r.featureName,missingDependencies:n}),this.features[r.featureName]=new r(this)}))}catch(t){(0,e.R)(22,t);for(const e in this.features)this.features[e].abortHandler?.();const r=(0,h.Zm)();delete r.initializedAgents[this.agentIdentifier]?.api,delete r.initializedAgents[this.agentIdentifier]?.features,delete this.sharedAggregator;return r.ee.get(this.agentIdentifier).abort(),!1}}}({features:[A,T,j],loaderType:"lite"})})()})();</script> <meta http-equiv="Cache-Control" max-age="2592000"> <meta http-equiv="Expires" content="1" /> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta name="viewport" content="width=device-width" /> <meta name="p:domain_verify" content="96e683d0045e44dfac2deaec70e57185"/> <link rel="icon" type="image/x-icon" href="/assets/favicon-9d06eb31fc41af6ef76f2954364a3a0b75637640a367d1816b9bf8b9ce392cb6.ico" /> <link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-precomposed-24e2ef01d16313b2007bc178c55d64c564f71fb746290e81f4cf57f9d394a4c6.png"> <link rel="canonical" href="https://www.creative-tim.com/product/notus-design-system-pro" data-turbolinks-track="false" itemprop="url"/> <title itemprop="name"> Notus Design System PRO: Premium Tailwind CSS Design System @ Creative Tim </title> <meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@CreativeTim" /> <meta name="twitter:creator" content="@CreativeTim" /> <meta name="twitter:title" content="Notus Design System PRO by Creative Tim" /> <meta name="twitter:description" content="Premium Tailwind CSS Design System" /> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/588/original/notus-design-system-pro.jpg?1642090568" /> <meta name="twitter:url" content="https://www.creative-tim.com/product/notus-design-system-pro" /> <meta name="description" content="Download Notus Design System PRO, a Tailwind CSS Design System developed by Creative Tim. Over 370 components, see the live demo on our site and join over 1.774.000 creatives!"> <meta name="keywords" content="creativetim, creative tim, bootstrap, theme, freebies, bootstrap kit, bootstrap template, free items, beautiful ui"> <meta property="og:app_id" content="655968634437471"> <meta property="og:type" content="product"> <meta property="og:title" content="Notus Design System PRO by Creative Tim"> <meta property="og:url" content="https://www.creative-tim.com/product/notus-design-system-pro"> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/588/original/notus-design-system-pro.jpg?1642090568"> <meta property="product:price:amount" content="69.0"> <meta property="product:price:currency" content="USD"> <meta property="product:availability" content="in Stock"> <meta property="product:brand" content="Creative Tim"> <meta property="product:category" content="All Templates"> <meta name="data-turbolinks-track" content="false"> <link rel="stylesheet" href="/assets/creative-tim-product-page-af73bccda9b6f6101c76507d159faeaa4f9c16760a49cd1794956fc07432db6a.css" media="screen" data-turbolinks-track="reload" async="async" cache="true" />  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" media="screen" rel="stylesheet" async="true" cache="true"> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="r2cruGEryqAADJO-Wi126io-_G0XoUlWvH2ZxF5Oail2BFtbI5iLm4GcgDF5wdn0yfFtEiLYYBBn-OIrHGZNWA" />  <script src="/assets/creative-tim/creative-tim-product-page-cb2b38ed16093ecdb67038649ccbbb3c1962b718c35711c5dd6b9af516fef632.js" data-turbolinks-track="reload" defer="defer"></script> <script src="/assets/jquery.mentions-ccf0bcb7d286a81af7cfebe23797febdb5f306672cf2d600bb4f641912b6c99a.js" data-turbolinks-track="reload" defer="defer"></script>  <style defer="defer">.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-K9BGS8K':true});</script>  <script defer="defer"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46172202-22', 'auto', {allowLinker: true}); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com","avangate.com"]); </script>   <script defer="defer"> // dataLayer product var dataLayer = dataLayer || []; dataLayer.push({ 'pageType':'Product', 'productName':'Notus Design System PRO', 'singleProductID':'588', 'singleAvangateProductID':'37887580', 'productPrice':'69.0', 'pageDomain':'MainDomain' }); // end dataLayer product </script>  <script defer="defer">(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-NKDMSK6');</script>  </head> <body class="product-page"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=655968634437471&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript"> function shareFacebookWithCallBack(){ $.post('/share',{social_network : 1, product_id : parseInt('588'), provider: 'facebook' },function(data){ if(data['status'] == 'ok'){ console.log('ShareUp'); } }); } //twitter share window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); // On ready, register the callback... twttr.ready(function (twttr) { twttr.events.bind('tweet', function (event) { $.post('/share',{social_network : 2, product_id : parseInt('588'), provider: 'twitter' },function(data){ if(data['status'] == 'ok'){ console.log('ShareUp'); } }); }); }); function googleShare(event){ var width = 575, height = 400, left = ($(window).width() - width) / 2, top = ($(window).height() - height) / 2, url = 'https://plus.google.com/share?url=https://www.creative-tim.com/product/notus-design-system-pro', opts = 'status=1' + ',width=' + width + ',height=' + height + ',top=' + top + ',left=' + left; window.open(url, 'Google+', opts); $.post('/share',{social_network : 3, product_id : parseInt('588'), provider: 'google' },function(data){ if(data['status'] == 'ok'){ console.log('ShareUp'); } }); return false; } </script> <div id="offer-bar-celebrating" class="alert alert-celebrating alert-black" data-turbolinks="false"> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-9 text-left"> 🔥🔥🔥 <b> Black Friday 2024 </b>: Get your All-Access Pass to use AI, Development, and UI/UX top tools! <b> 85% OFF</b>! </div> <div class="col-md-3 col-sm-12"> <div class="d-flex-center"> <a href="https://www.creative-tim.com/campaign" class="btn btn-fill btn-neutral" target="_blank"> View Offer </a> <a id="close-bar" class="close-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="15"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg> </a> </div> </div> </div> </div> </div>  <input type="hidden" id="product_id" value="588"> <div class="top-moving-bar" data-turbolinks="false"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="d-flex-center"> <a class="" href="/"> <div class="logo"> <img class="img-logo" alt="logoCt" loading="lazy" src="/assets/logo/logo-ct-simple-0e135addaeddc410e2e0a2af78b5222369fe90933115fbb7659278a7be5b675e.png" /> </div> </a> <h4>Notus Design System PRO</h4> </div> </div> <div class="col-md-8 col-sm-12 col-xs-12 text-right mt-5"> <div class="btn-wrapper-1"> <a class="btn btn-info btn-simple" target="blank" href="https://www.creative-tim.com/services/updivision?ref=ct-product-page-navbar">Custom development</a> <a class="btn btn-info btn-simple" target="_blank" href="https://demos.creative-tim.com/notus-design-system-pro">Preview</a> <a class="btn btn-info btn-simple" target="_blank" href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus">Docs</a> </div> <div class="btn-wrapper-2"> <button type="button" name="button" onclick="pricingMoveSmooth('#pricingCard')" class="btn btn-danger btn-fill btn-round">Buy now</button> </div> </div> </div> </div> </div> <div itemscope itemtype="https://schema.org/Product"> <div id="productPage" class="section-header gradient-light-blue" data-turbolinks="false"> <nav id="navbar" class="navbar filter-bar fixed-absolute"> <div class="container navbar-elements-position"> <div class="notification"> <div id="notif-message" class="notif-message" style="display: none;" notice-type=success> </div> </div> <div class="row"> <div class="col-md-12 col-lg-4"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand" data-turbolinks="false"> <img class="img-logo" alt="logoCt" loading="lazy" src="/assets/logo/logo-ct-white-478efc355eb3b29de4ee5894211455c1e31e78fadfb1304ca66528bfd4265c60.svg" /> </a> </div> </div> <div class="col-md-12 col-lg-8"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-new-categories navbar-right" data-turbolinks="false"> <li data-turbolinks="false" class="mr-24"> <a href="#search-modal" role="button" data-toggle="modal"> <i class="fa fa-search" aria-hidden="true"></i> <p class="d-flex">Search</p> </a> </li> <li class="dropdown technologies-nav dropdown-categories mr-24" data-turbolinks="false"> <a href="/templates" class="dropdown-toggle" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" /> </svg> <p class="d-flex">Technologies <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row"> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <a href="https://www.creative-tim.com/templates">Front-end</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/tailwind"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-tailwind-d8f0cfa7eee592c9287e9a390d5c924bb11176bbeb0db897a83903b00f27c937.png" /> Tailwind CSS </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/bootstrap-themes"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-bootstrap-d76ab1ad4c5721f9bf2e532dbd5814fbe7ce7838b2624cb54549af2eeb825446.png" /> Bootstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/angular"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-angular-9e87a27f7fb611f8a0fbfae5bd64e886b764bef62fd9f863c8694d7323a6235a.png" /> Angular </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-react-42be32ce0f9d3f7e068637991c1c74362b290655ab58b447d63f50f87b5f8c42.png" /> React </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuejs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vue-c12f877d0cba4c9350dad981e8fa3761f94758db252f963528839132eed25c64.png" /> Vuejs </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react-native"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-react-native-9c2d324e5f881c431ce7dec31907c191c9ffd6e981e742c6a55c2b0f052e5d0c.png" /> React Native </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/svelte"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-svelte-e5eb72242fe961387486d369f7ae00beb73a3c0ffac499dc2d2af31ed5286f22.png" /> Svelte </a> </li> </ul> </div> <div class="col-md-4"> <h6 class="dropdown-header technology-size mt-0"> <a href="javascript:;"> </a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/material-ui"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-material-ui-84e1e41635aa43bd8a4b211c16df072caef5487d9bbb41fd54d4474f35f1ab10.png" /> Material UI </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuetifyjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vuetify-befea6f05110a8f0148607a6831f947585c838cfcc174aa9cf6a4d83d91c2b4d.png" /> Vuetify </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/flutter"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-flutter-b8fed1604fdcb5d9370f702b8c3c616ff0ae3e3db5a2c9d02d054741363347f0.png" /> Flutter </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vue-material"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vuematerial-f670dbc95e72d34aa5b146ab0bf41ae5df1e806fc46745ed2edec59ab8ebe405.png" /> Vue Material </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/reactstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-reactstrap-d0017791ea0e56ab0001d1f08c45459fc55a6e5e7c7fe1f208041c3964db6b4d.png" /> Reactstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react-bootstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-reactbootstrap-290853783a73c5dc70a8a83a705d7c2e0da95c7b1a44f861d9cc55730bc15f71.png" /> React Bootstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuejs-bootstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-bootstrapvue-f943dee16250053498987da3ff5de0d352c636bd87c26640c8364566513ce412.png" /> Vue Bootstrap </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <a href="https://www.creative-tim.com/templates">Back-end</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/laravel"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-laravel-6a1dcc81e9b159b1e7ff38fa103fcab7d4ab47daaa81a067f449dc8ef54d662b.png" /> Laravel </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/django"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-django-01febaaad5f6fbb71292d543f1569af355660269a156521c89575c99eb0acc29.png" /> Django </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/flask"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-flask-d39b6df587b1527e2e68196123ef8e9e1b8ef59a1136b63d8a64321961ba1cb9.png" /> Flask </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nextjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nextjs-050dc61ffdbf8ca9741a58f25bdc2ab0f17ba4f5140a829e1dcbc4d3548b516f.png" /> Next </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nuxtjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nuxtjs-24fd91d33ee4af6a88ff8f3c1d370e373e4ccb9f7f6b2af84f2c7d5e215e9b90.png" /> Nuxt </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nodejs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nodejs-e140490a59b28bdddd17abccc0498e4c7107bde45508ac7ff9cba5c76de0d850.png" /> Nodejs </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/aspnet"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-aspnet-b18cdec2351717a7629604749f0f3fd759b91107027cc71c87ee7fab37cfdff0.png" /> Aspnet </a> </li> </ul> </div> </div> </div> <div class="dropdown-footer"> <div class="row"> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/premium"> Premium Templates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/free"> Free Templates </a> </li> </ul> </div> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/admin-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/ui-kit"> UI Kits </a> </li> </ul> </div> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates"> All Templates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/bootstrap-themes/landing-page"> Landing Pages </a> </li> </ul> </div> </div> </div> </div> </div> </li> <li class="dropdown dropdown-small dropdown-categories mr-24" data-turbolinks="false"> <a href="/templates" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="35" height="20" fill="currentColor" viewBox="7 0 21 21"> <path d="M11.782 5.72a4.773 4.773 0 0 0-4.8 4.173 3.43 3.43 0 0 1 2.741-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.934-2.865 3.137-3.921-.969 1.379-2.44 2.207-4.259 1.231-1.253-.673-2.19-3.438-5.959-3.318ZM6.8 11.979A4.772 4.772 0 0 0 2 16.151a3.431 3.431 0 0 1 2.745-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.933-2.865 3.137-3.921-.97 1.379-2.44 2.208-4.259 1.231-1.253-.673-2.19-3.443-5.963-3.317Z"/> </svg> <p class="d-flex">Tailwind CSS <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-wrapper"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <div class="mr-5 icon-shape"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 23"> <path d="M11.782 5.72a4.773 4.773 0 0 0-4.8 4.173 3.43 3.43 0 0 1 2.741-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.934-2.865 3.137-3.921-.969 1.379-2.44 2.207-4.259 1.231-1.253-.673-2.19-3.438-5.959-3.318ZM6.8 11.979A4.772 4.772 0 0 0 2 16.151a3.431 3.431 0 0 1 2.745-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.933-2.865 3.137-3.921-.97 1.379-2.44 2.208-4.259 1.231-1.253-.673-2.19-3.443-5.963-3.317Z"/> </svg> </div> <a href="/templates/tailwind">Tailwind CSS</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-free"> Free Products </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-premium"> Premium Products </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/docs/react/installation?ref=ct-lp-tailwindcss"> Material Tailwind React </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/docs/html/installation?ref=ct-lp-tailwindcss"> Material Tailwind HTML </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/figma?ref=ct-lp-tailwindcss"> Material Tailwind Figma </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.creative-tim.com/twcomponents?ref=ct-lp-tailwindcss"> Components for TailwindCSS </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.creative-tim.com/builder?ref=ct-lp-tailwindcss"> Drag & Drop for TailwindCSS </a> </li> </ul> </div> </div> </li> <li class="dropdown dropdown-categories bundles mr-24" data-turbolinks="false"> <a href="https://www.creative-tim.com/campaign" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path d="M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6.75a2.25 2.25 0 0 0 2.25-2.25v-6.75h-9Z" /> </svg> <p class="d-flex">Bundles <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <span class="notification-badge">NEW</span> <div class="dropdown-menu py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row d-flex"> <div class="col-md-6"> <h6 class="dropdown-header text-capitalize technology-size mt-0 ml-5"> <div class="mr-5 icon-shape"><i class="nc-icon nc-present-2 text-white"></i></div> <a href="https://www.creative-tim.com/campaign">Bundles</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/summer-bundle"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/navbar/icon-bundle-f8d166cf8240747eec6bc8c267b25a92fea41d7eb2754a60a150a4db815ad730.png" /></div> Big Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-react"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-react-42be32ce0f9d3f7e068637991c1c74362b290655ab58b447d63f50f87b5f8c42.png" /></div> React Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-tailwind"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-tailwind-d8f0cfa7eee592c9287e9a390d5c924bb11176bbeb0db897a83903b00f27c937.png" /></div> Tailwind Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-vuejs"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-vue-c12f877d0cba4c9350dad981e8fa3761f94758db252f963528839132eed25c64.png" /></div> Vuejs Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-angular"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-angular-9e87a27f7fb611f8a0fbfae5bd64e886b764bef62fd9f863c8694d7323a6235a.png" /></div> Angular Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-laravel"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-laravel-6a1dcc81e9b159b1e7ff38fa103fcab7d4ab47daaa81a067f449dc8ef54d662b.png" /></div> Laravel Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-bootstrap"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-bootstrap-d76ab1ad4c5721f9bf2e532dbd5814fbe7ce7838b2624cb54549af2eeb825446.png" /></div> Bootstrap Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-mobile"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-react-native-9c2d324e5f881c431ce7dec31907c191c9ffd6e981e742c6a55c2b0f052e5d0c.png" /></div> Mobile Bundle </a> </li> </ul> </div> <div class="col-md-6"> <a href="/club" target="_blank" class="d-block h-100"> <div class="position-relative image-bundle h-100"> <div class="content h-100"> </div> </div> </a> </div> </div> </div> </div> </div> </li> <li class="dropdown bootstrap dropdown-small dropdown-categories mr-24" data-turbolinks="false"> <a href="https://www.creative-tim.com/bootstrap-themes" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20" height="20" fill="currentColor"><path d="M333.5 201.4c0-22.1-15.6-34.3-43-34.3h-50.4v71.2h42.5C315.4 238.2 333.5 225 333.5 201.4zM517 188.6c-9.5-30.9-10.9-68.8-9.8-98.1c1.1-30.5-22.7-58.5-54.7-58.5H123.7c-32.1 0-55.8 28.1-54.7 58.5c1 29.3-.3 67.2-9.8 98.1c-9.6 31-25.7 50.6-52.2 53.1v28.5c26.4 2.5 42.6 22.1 52.2 53.1c9.5 30.9 10.9 68.8 9.8 98.1c-1.1 30.5 22.7 58.5 54.7 58.5h328.7c32.1 0 55.8-28.1 54.7-58.5c-1-29.3 .3-67.2 9.8-98.1c9.6-31 25.7-50.6 52.1-53.1v-28.5C542.7 239.2 526.5 219.6 517 188.6zM300.2 375.1h-97.9V136.8h97.4c43.3 0 71.7 23.4 71.7 59.4c0 25.3-19.1 47.9-43.5 51.8v1.3c33.2 3.6 55.5 26.6 55.5 58.3C383.4 349.7 352.1 375.1 300.2 375.1zM290.2 266.4h-50.1v78.4h52.3c34.2 0 52.3-13.7 52.3-39.5C344.7 279.6 326.1 266.4 290.2 266.4z"/></svg> <p class="d-flex">Bootstrap <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-wrapper"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <div class="mr-5 icon-shape"><img class="img-shape" src="https://www.creative-tim.com/assets/categories/bootstrap-logo-vector-09fd59e12977ed2b6b03781c02a97d4fd024c669f3770a4af39e07d8703ada46.svg"></div> <a href="https://www.creative-tim.com/bootstrap-themes">Bootstrap</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/admin-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/free"> Free Themes </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/premium"> Premium Themes</a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/ui-kit"> UI Kits </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/landing-page"> Landing Pages </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/e-commerce"> E-Commerce </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/one-page-template"> One Page Themes </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/login-form"> Login Forms </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/wizard"> Wizards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/calendar"> Calendar </a> </li> </ul> </div> </div> </li> <li class="dropdown dropdown-categories mr-24" data-turbolinks="false"> <a href="javascript:;" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /> </svg> <p class="d-flex">Resources & AI <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu dropdown-lateral py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row d-flex"> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> Resources </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/blocks?ref=ct-lp-resources"> Blocks for TailwindCSS <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=ct-lp-resources"> Book - Roots of UI/UX Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/twcomponents?ref=ct-lp-resources"> TW Components <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/services/updivision"> Custom Development </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/builder?ref=resources"> Drag & Drop Builders </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/bits"> Bits - code snippets </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/blog"> Blog </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> AI Tools </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://galichat.com?ref=ct-lp-resources"> GaliChat AI Assistant <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://code-mentor.ai?ref=ct-lp-resources"> AI Code Mentor </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/magic-ai?ref=ct-lp-resources"> Magic AI Tailwind </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/search?q=boilerplate&button="> AI Boilerplates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/cheatsheet/chatgpt-prompts/"> ChatGPT Prompts </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/gpts"> GPT's Collection </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> Design Systems </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/soft"> Soft Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/argon"> Argon Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/black"> Black Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/light"> Light Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/material"> Material Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/now-ui"> Now UI Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/paper"> Paper Design </a> </li> </ul> </div> </div> </div> </div> </div> </li>        <li data-turbolinks="false" class="login"> <a href="javascript:;" onclick="openLoginModal();" role="button" data-toggle="modal" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /> </svg> <p class="d-flex">Login/Register</p> </a> </li> </ul> </div> </div> </div> </div> </nav> <div class="container product-header-centered"> <div class="row d-flex-center text-center"> <div class="col-sm-12 col-md-6"> <div class="product-image"> <a href="https://demos.creative-tim.com/notus-design-system-pro" target="_blank"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/588/original/notus-design-system-pro.jpg?1642090568" alt="Notus Design System PRO Image" , loading="lazy"/> <link itemprop="image" href="https://s3.amazonaws.com/creativetim_bucket/products/588/original/notus-design-system-pro.jpg?1642090568" /> </a> </div> <div class="preview-area"> <a href="https://demos.creative-tim.com/notus-design-system-pro" target="_blank" class="hidden-xs btn btn-neutral btn-new btn-round"> Live Preview </a> <a href="https://demos.creative-tim.com/notus-design-system-pro" target="_blank" class="hidden-sm hidden-md hidden-lg btn btn-neutral btn-new btn-round"> Live Preview </a> <a href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus" target="_blank" class="btn btn-neutral btn-new btn-fill btn-round"> Docs </a> </div> </div> <div class="col-sm-12 col-md-5 col-md-offset-1"> <div class="pay-area"> <div class="text-center"> <h1 itemprop="name" class="product-name"> Notus Design System PRO </h1> <h3 class="tagline"> Premium Tailwind CSS Design System </h3> <div class="choose-license"> <p class="text-center"> <a class="text-white" href="/license" rel="tooltip" title="Something unclear regarding the licenses? Click and see more details." target="_blank"> <i class="fa fa-balance-scale"></i> License (EULA) </a> </p> <div class="clearfix"></div> </div> <div class="tab-content" itemprop="offers" itemscope itemtype="https://schema.org/Offer"> <meta content="69.00" itemprop="price"> <meta content="USD" itemprop="priceCurrency"> <meta content="instock" itemprop="availability"> <button type="button" name="button" onclick="pricingMoveSmooth('#pricingCard')" class="btn btn-neutral btn-new btn-fill btn-round">Buy now · $69</button> </div> </div> </div> </div> </div> </div> </div> <div class="section-product-description section-white-gradient section-scaled" data-turbolinks="false"> <div class="container product"> <div class="row"> <div class="col-md-8"> <div class="description text-left"> <h3 class="sub-title">Premium Design System for Tailwind CSS</h3> <h4 class="legend"> Product description </h4> <br> <span itemprop="description"> <p>Start your development with a premium UI Kit and Admin components library for Tailwind CSS. Let Notus Design System PRO amaze you with its cool features and build tools that will get your project to a whole new level!</p> <p>Notus Design System PRO features multiple HTML elements. It is based on <a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=ndsp-github-readme" target="_blank" rel="tooltip">Tailwind Starter Kit</a> and <a href="https://www.creative-tim.com/product/notus-js?ref=ndsp-github-readme" target="_blank" rel="tooltip">Notus JS</a> by Creative Tim. </p> <p>This beautiful UI Kit & Admin is built with multiple components for different projects, such as Presentation websites, Blog websites, E-Commerce website platforms, and Admin Dashboard websites. It also features components for authentication and error handling. </p> <p>Besides these sections, it also comes with an extra components category that can be used for different purposes, such as blog sections, features sections, FAQ sections, Pricing, and many more. Check all the sections <a href="https://demos.creative-tim.com/notus-design-system-pro/#presentation-id" target="_blank" rel="tooltip">here</a>.</p> <p>Speed up your web development with an awesome product made by <a href="https://www.creative-tim.com/" target="_blank" rel="tooltip">Creative Tim</a>. If you like bright and fresh colors, you will love this Tailwind CSS Template! It features a huge number of components that can help you create amazing websites.</p> <h3>Get Started</h3> <ul> <li> Install NodeJS <strong>LTS</strong> version from <a href="https://nodejs.org/en/" target="_blank" rel="tooltip">NodeJS Official Page</a></li> <li> Go to <a href="https://www.creative-tim.com/" target="_blank" rel="tooltip">Creative Tim website</a> and login into your account</li> <li> Go to <a href="https://www.creative-tim.com/product/notus-design-system-pro" target="_blank" rel="tooltip">Notus Design System PRO</a> page and purchase the product</li> </ul> <h3>Pages</h3> <p>If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.</p> <p>Here are all the page from the project: - Presentation - <a href="https://demos.creative-tim.com/notus-design-system-pro/presentation/pages/landing.html?ref=ndsp-readme" target="_blank" rel="tooltip">Landings</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/presentation/pages/about-us.html?ref=ndsp-readme" target="_blank" rel="tooltip">About Us</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/presentation/pages/contact-us.html?ref=ndsp-readme" target="_blank" rel="tooltip">Contact Us</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/error/pages.html?ref=ndsp-readme" target="_blank" rel="tooltip">Error Pages</a> - Admin - <a href="https://demos.creative-tim.com/notus-design-system-pro/admin/pages/dashboards.html?ref=ndsp-readme" target="_blank" rel="tooltip">Dashboard</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/admin/pages/maps.html?ref=ndsp-readme" target="_blank" rel="tooltip">Map</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/admin/pages/settings.html?ref=ndsp-readme" target="_blank" rel="tooltip">Settings</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/admin/pages/tables.html?ref=ndsp-readme" target="_blank" rel="tooltip">Tables</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/admin/pages/layouts.html?ref=ndsp-readme" target="_blank" rel="tooltip">Layouts</a> - Auth - <a href="https://demos.creative-tim.com/notus-design-system-pro/auth/pages/login.html?ref=ndsp-readme" target="_blank" rel="tooltip">Logins</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/auth/pages/register.html?ref=ndsp-readme" target="_blank" rel="tooltip">Registers</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/auth/pages/reset.html?ref=ndsp-readme" target="_blank" rel="tooltip">Reset</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/auth/pages/layouts.html?ref=ndsp-readme" target="_blank" rel="tooltip">Layouts</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/presentation/sections/blogs.html?ref=ndsp-readme" target="_blank" rel="tooltip">Blogs</a> - E-Commerce - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/chat.html?ref=ndsp-readme" target="_blank" rel="tooltip">Chat</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/checkout.html?ref=ndsp-readme" target="_blank" rel="tooltip">Checkout</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/e-commerce.html?ref=ndsp-readme" target="_blank" rel="tooltip">E-Commerce</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/invoice.html?ref=ndsp-readme" target="_blank" rel="tooltip">Invoice</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/pricing.html?ref=ndsp-readme" target="_blank" rel="tooltip">Pricing</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/product.html?ref=ndsp-readme" target="_blank" rel="tooltip">Product</a> - <a href="https://demos.creative-tim.com/notus-design-system-pro/ecommerce/pages/profile.html?ref=ndsp-readme" target="_blank" rel="tooltip">Profile</a></p> <h3>Sections</h3> <p>Or you can jump-start your development with our pre-built sections and create your own layouts and pages. You can check all the sections provided in this product here:</p> <ul> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#presentation-id" target="_blank" rel="tooltip">Presentation website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#error-id" target="_blank" rel="tooltip">Error handling sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#blog-id" target="_blank" rel="tooltip">Blog website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#e-commerce-id" target="_blank" rel="tooltip">E-Commerce website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#misc-id" target="_blank" rel="tooltip">Misc website sections</a></li> </ul> <h3>Tailwind CSS Fully Coded Components</h3> <p>Notus Design System PRO is built with over 350 frontend components such as <a href="https://demos.creative-tim.com/notus-design-system-pro/misc/components/alert.html?ref=ndsp-github-readme" target="_blank" rel="tooltip">Alerts</a>, <a href="https://demos.creative-tim.com/notus-design-system-pro/misc/components/buttons.html?ref=ndsp-github-readme" target="_blank" rel="tooltip">Buttons</a>, <a href="https://demos.creative-tim.com/notus-design-system-pro/misc/components/input.html?ref=ndsp-github-readme" target="_blank" rel="tooltip">Inputs</a>, <a href="https://demos.creative-tim.com/notus-design-system-pro/misc/components/dropdowns.html?ref=ndsp-github-readme" target="_blank" rel="tooltip">Dropdowns</a>, <a href="https://demos.creative-tim.com/notus-design-system-pro/misc/components/media.html?ref=ndsp-github-readme" target="_blank" rel="tooltip">Media Players</a>, and many more, giving you the freedom of choosing and combining. Most components can take variations in colors that you can easily modify using Tailwind CSS classes.</p> <p>You will save a lot of time going from prototyping to full-functional code because all elements are implemented.</p> <p>Check all of them here:</p> <ul> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#presentation-id" target="_blank" rel="tooltip">Presentation website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#error-id" target="_blank" rel="tooltip">Error handling sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#blog-id" target="_blank" rel="tooltip">Blog website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#e-commerce-id" target="_blank" rel="tooltip">E-Commerce website sections</a></li> <li><a href="https://demos.creative-tim.com/notus-design-system-pro/#misc-id" target="_blank" rel="tooltip">Misc website sections</a></li> </ul> </span> </div> <h6 class="text-center">Product certified by: <span>Creative Tim</span> <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope> <meta itemprop="name" content="Creative Tim" /> </div> </h6> </div> <div class="col-md-4 text-center"> <div class="product-details-container"> <div class="technologies"> <div class="mask"> <img rel="tooltip" title="Fully Coded Tailwind" alt="Notus Design System PRO - Fully Coded Tailwind" loading="lazy" src="/assets/icon-tailwind-b40c389d6a97c8188748a59729e41bde3e33b0d23ce98c3dabcbe74597de1a7c.jpg" /> </div> <div class="mask"> <img rel="tooltip" title="Fully Coded and Responsive HTML5" alt="Notus Design System PRO - Fully Coded and Responsive HTML5" loading="lazy" src="/assets/icon-html-fbffeea849d7e6726178dd5ac4b998f14b1f2f6b12c8bf5a5af08acc99ffd85c.jpg" /> </div> </div>  <ul class="nav nav-tabs"> <li class="active"> <a class="btn btn-switch" href="#home" data-toggle="tab"> <i class="icon-book"></i> Details </a> </li> <li><a class="btn btn-switch" href="#profile" data-toggle="tab"> <i class="icon-info-sign"></i> Product Info </a> </li> </ul>  <div class="tab-content"> <div class="tab-pane fade active in" id="home"> <div class="product-flex"> <div class="product-details"> <i class="icon-cloud-download"></i> Downloads </div> <div class="small-info"> <h6 class="numbers">16</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-circle-arrow-up"></i> Version </div> <div class="small-info"> <h6 class="numbers"> 1.0.0 </h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-list-ol"></i> Changelog </div> <div class="small-info"> <h6 class="numbers"> <a href="#product-version-logs-modal-588" role="button" data-toggle="modal"> view </a> </h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-refresh"></i> Updated </div> <div class="small-info"> <h6 class="numbers">2 years ago</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-suitcase"></i> Released </div> <div class="small-info"> <h6 class="numbers">2 years ago</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-star-empty"></i> Reviews </div> <div class="small-info"> <h6 class="numbers">No reviews yet</h6> </div> </div> </div> <div class="tab-pane fade" id="profile"> <div class="product-flex"> <div class="product-details"> <i class="icon-th-large"></i> Handcrafted Elements </div> <div class="small-info"> <h6 class="numbers">370</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-gears"></i> Customized Plugins </div> <div class="small-info"> <h6 class="numbers">3</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-picture"></i> Example Pages </div> <div class="small-info"> <h6 class="numbers">13</h6> </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-medkit"></i> Premium Support </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-file-text-alt"></i> Documentation </div> </div> <div class="product-flex"> <div class="product-details"> <i class="icon-mobile-phone"></i> Fully Responsive </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="pricing-main-title text-center" id="pricingCard"> <h3>Trusted by <b>2,625,652</b> developers and these companies</h3> </div> <div class="media-logos media-logos-product"> <a href="javascript:;"> <img alt="No image" loading="lazy" src="/assets/logo_amazon-d71c7073b6bff6ebc7d263c44b8e9890d001103ba12e23d11a203faec45d7526.png" /> </a> <a href="javascript:;"> <img alt="No image" loading="lazy" src="/assets/logo_IBM-38fa66ff0e392776589fadfc7aac18d45f7a14393fa59adaa3ff1fca7ccdc7fa.png" /> </a> <a href="javascript:;"> <img alt="No image" loading="lazy" src="/assets/logo_microsoft-7bf1b0a5ce4187fb37c54296aa5d4565f0b5fb4b2a6cd277522b38da0110cc31.png" /> </a> <a href="javascript:;"> <img alt="No image" loading="lazy" src="/assets/logo_samsung-f015cb3da92edd7895bd73492572dd0060a8d669822bceb93cebd319a5096cde.png" /> </a> <a href="javascript:;"> <img alt="No image" loading="lazy" src="/assets/logo_vodafone-940a54dcc87255c62b44fe127dd99c0188f7cc00c0aed28892beb55779f55479.png" /> </a> </div>  <table class="card-pricing dark" id="pricing"> <thead> <tr> <th> </th> <th > <div class="pricing-title"> <h3 class="">Freelancer</h3> <div class="pricing-description"> Good for a personal or client web/mobile app. </div> <h2 class="pricing-subtitle"> $69 </h2> <form id="FREELANCER" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="FREELANCER" checked> </form> </div> </th> <th> <div class="pricing-title"> <h3 class="">Startup</h3> <div class="pricing-description"> Build your startup or client web/mobile app. </div> <h2 class="pricing-subtitle"> $149 </h2> <form id="STARTUP" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="STARTUP" checked> </form> </div> </th> <th class="column-black active"> <div class="pricing-title"> <h3 class="text-white">Company</h3> <div class="pricing-description"> Perfect for web/mobile apps or SaaS projects. </div> <h2 class="pricing-subtitle"> $249 </h2> <form id="COMPANY" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-pricing-active btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="COMPANY" checked> </form> </div> </th> <th> <div class="pricing-title"> <small> *one time payment - no hidden fees, no subscription </small> <h3 class=""> Creative Tim Club </h3> <div class="pricing-description"> Lifetime Access to all our Present & Future Premium Products! </div> <h2 class="pricing-subtitle" style="color: #f5365c;"> <small style="text-decoration: line-through;"> $749 </small> $349 </h2> <span id="buyEnterprise"> <form id="company-pricing-fiat-club" action="/send-product-to-avangate/creative-tim-club" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy Now </button> <input class="hidden" type="radio" name="license_type" value="COMPANY" checked> </form> </span> </div> </th> </tr> </thead> <tbody> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="It consists of the product technical manuals like getting started, build tools and also is described every component with code examples">Documentation   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> <td class="column-black text-white"> <i class="fa fa-check m-0"></i> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive access to entire code for HTML, JS and SCSS files depends on the different package of each Product">Full Code   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> <td class="column-black text-white"> <i class="fa fa-check m-0"></i> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service)">Use in SaaS   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <span class="unchecked">―</span> </td> <td class=""> <span class="unchecked">―</span> </td> <td class="column-black text-white"> <i class="fa fa-check m-0"></i> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can create End Products and deploy them on domains like endproduct1.com, endproduct2.com, endproductx.com">Projects   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 1 </td> <td class=""> 1 </td> <td class="column-black text-white"> <strong>unlimited</strong> </td> <td class=""> <strong>unlimited</strong> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="How many people can work and have access to the source code of our items. You have an “Invite Team” option in your Downloads dashboard to invite your team members.">Team Size   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 1 </td> <td class=""> up to 5 </td> <td class="column-black text-white"> <strong>up to 20</strong> </td> <td class=""> <strong>up to 20</strong> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive bug fixes and responses directly from the creators of the products in a couple of hours during business days with the Priority Support. The regular Support meaning that you will get responses and bug fixes in 24 hours during business days.">Tech Support   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> support </td> <td class=""> support </td> <td class="column-black text-white"> <strong>priority support</strong> </td> <td class=""> <strong>priority support</strong> </td> </tr> <tr> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive Free Updates that contains bug fixes and new features for 6/12/18 months depending on the Product you bought. After that period, if you need new access to our latests Updates you have to purchase the Product again. If you don’t need our latest Updates you can continue using our products for how many months/years you want.">Free Updates   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 6 months </td> <td class=""> 12 months </td> <td class="column-black text-white"> <strong>12 months</strong> </td> <td class=""> <strong>unlimited</strong> </td> </tr> </tbody> </table>   <div class="row dark"> <div class="col-md-6"> <div class="card-pricing text-center responsive hidden" id="pricing"> <div class="pricing-title"> <h3 class="">Freelancer</h3> <div class="pricing-description"> Good for a personal or client web/mobile app. </div> <h2 class="pricing-subtitle"> $69 </h2> <form id="FREELANCER" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="FREELANCER" checked> </form> </div> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div id="collapseOne" class=""> <div class="panel-body"> <table> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="It consists of the product technical manuals like getting started, build tools and also is described every component with code examples">Documentation   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive access to entire code for HTML, JS and SCSS files depends on the different package of each Product">Full Code   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service)">Use in SaaS   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <span class="unchecked text-gray">―</span> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can create End Products and deploy them on domains like endproduct1.com, endproduct2.com, endproductx.com">Projects   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 1 </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="How many people can work and have access to the source code of our items. You have an “Invite Team” option in your Downloads dashboard to invite your team members.">Team Size   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 1 </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive bug fixes and responses directly from the creators of the products in a couple of hours during business days with the Priority Support. The regular Support meaning that you will get responses and bug fixes in 24 hours during business days.">Tech Support   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> support </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive Free Updates that contains bug fixes and new features for 6/12/18 months depending on the Product you bought. After that period, if you need new access to our latests Updates you have to purchase the Product again. If you don’t need our latest Updates you can continue using our products for how many months/years you want.">Free Updates   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 6 months </td> </tr> </table> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="card-pricing text-center responsive hidden"> <div class="pricing-title"> <h3 class="">Startup</h3> <div class="pricing-description"> Build your startup or client web/mobile app. </div> <h2 class="pricing-subtitle"> $149 </h2> <form id="STARTUP" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="STARTUP" checked> </form> </div> <div class="panel-group"> <div class="panel panel-default"> <div id="collapseTwo"> <div class="panel-body"> <table> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="It consists of the product technical manuals like getting started, build tools and also is described every component with code examples">Documentation   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive access to entire code for HTML, JS and SCSS files depends on the different package of each Product">Full Code   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service)">Use in SaaS   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <span class="unchecked text-gray">―</span> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can create End Products and deploy them on domains like endproduct1.com, endproduct2.com, endproductx.com">Projects   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 1 </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="How many people can work and have access to the source code of our items. You have an “Invite Team” option in your Downloads dashboard to invite your team members.">Team Size   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> up to 5 </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive bug fixes and responses directly from the creators of the products in a couple of hours during business days with the Priority Support. The regular Support meaning that you will get responses and bug fixes in 24 hours during business days.">Tech Support   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> support </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive Free Updates that contains bug fixes and new features for 6/12/18 months depending on the Product you bought. After that period, if you need new access to our latests Updates you have to purchase the Product again. If you don’t need our latest Updates you can continue using our products for how many months/years you want.">Free Updates   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 12 months </td> </tr> </table> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="card-pricing text-center responsive hidden column-black"> <div class="pricing-title active"> <h3 class="text-white">Company</h3> <div class="pricing-description"> Perfect for web/mobile apps or SaaS projects. </div> <h2 class="pricing-subtitle text-white column-black"> $249 </h2> <form id="COMPANY" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-pricing-active btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="COMPANY" checked> </form> </div> <div class="panel-group"> <div class="panel panel-default"> <div id="collapseThree" class="column-black"> <div class="panel-body"> <table> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="It consists of the product technical manuals like getting started, build tools and also is described every component with code examples">Documentation   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="You receive access to entire code for HTML, JS and SCSS files depends on the different package of each Product">Full Code   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service)">Use in SaaS   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="You can create End Products and deploy them on domains like endproduct1.com, endproduct2.com, endproductx.com">Projects   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> unlimited </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="How many people can work and have access to the source code of our items. You have an “Invite Team” option in your Downloads dashboard to invite your team members.">Team Size   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> up to 20 </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="You receive bug fixes and responses directly from the creators of the products in a couple of hours during business days with the Priority Support. The regular Support meaning that you will get responses and bug fixes in 24 hours during business days.">Tech Support   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> priority support </td> </tr> <tr class=""> <td> <span class="bf-image-category text-white" rel="tooltip" title="" data-original-title="You receive Free Updates that contains bug fixes and new features for 6/12/18 months depending on the Product you bought. After that period, if you need new access to our latests Updates you have to purchase the Product again. If you don’t need our latest Updates you can continue using our products for how many months/years you want.">Free Updates   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class="text-white"> 12 months </td> </tr> </table> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="card-pricing text-center responsive hidden"> <div class="pricing-title"> <h3>Enterprise</h3> <div class="pricing-description"> Deploy large-scale projects which include redistribution rights. </div> <h2 class="pricing-subtitle"> Free </h2> <form id="ENTERPRISE" action="/send-product-to-avangate/notus-design-system-pro" accept-charset="UTF-8" method="get"> <button type="button" onclick="submitPaymentForm(this)" class="btn btn-pricing btn-round btn-add-cart btn-block"> Buy now </button> <input class="hidden" type="radio" name="license_type" value="ENTERPRISE" checked> </form> </div> <div class="panel-group"> <div class="panel panel-default"> <div id="collapseFour" class=""> <div class="panel-body"> <table> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="It consists of the product technical manuals like getting started, build tools and also is described every component with code examples">Documentation   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive access to entire code for HTML, JS and SCSS files depends on the different package of each Product">Full Code   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service)">Use in SaaS   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> <i class="fa fa-check m-0"></i> </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You can create End Products and deploy them on domains like endproduct1.com, endproduct2.com, endproductx.com">Projects   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> unlimited </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="How many people can work and have access to the source code of our items. You have an “Invite Team” option in your Downloads dashboard to invite your team members.">Team Size   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> more than 20 </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive bug fixes and responses directly from the creators of the products in a couple of hours during business days with the Priority Support. The regular Support meaning that you will get responses and bug fixes in 24 hours during business days.">Tech Support   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> priority support </td> </tr> <tr class=""> <td> <span class="bf-image-category " rel="tooltip" title="" data-original-title="You receive Free Updates that contains bug fixes and new features for 6/12/18 months depending on the Product you bought. After that period, if you need new access to our latests Updates you have to purchase the Product again. If you don’t need our latest Updates you can continue using our products for how many months/years you want.">Free Updates   <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td class=""> 24 months months </td> </tr> </table> </div> </div> </div> </div> </div> </div> </div>   <div class="row dark"> <div class="col-md-12"> <p class="text-center "> <i class="fa fa-lock"></i> Secured Payment by <b> 2Checkout </b> with: <br><br> <i class="fa fa-cc-paypal fa-2x"></i> <i class="fa fa-cc-visa fa-2x"></i> <i class="fa fa-cc-mastercard fa-2x"></i> <i class="fa fa-cc-amex fa-2x"></i> </p> <p class="text-center mw-550 mx-auto mb-115 "> <b>Info:</b> If you are a Registered Company inside the European Union you will be able to add your VAT ID after your Press "Buy Now" </p> </div> </div>  <script src="/assets/creative-tim/partials/pricing-card-responsive-5e81b949eb77dc0b49df415e24e69d48af81ed0e6f4f2888471549d04857d862.js" defer="defer"></script> <div class="row mb-50 panel-text-color-dark"> <div class="col-md-12 text-center"> <h3 class="mb-50 faq-title">Frequently asked questions</h3> </div> <div class="col-md-6"> <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="collapsed desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#1" aria-expanded="true" aria-controls="1"> <div class=""> What does "Use in Saas" refer to? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service). </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#2" aria-expanded="false" aria-controls="2"> <div class=""> What are the differences between the licenses on the website? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> The Freelancer license is aimed at people who work on their own. It grants you the right to use the purchased product <strong>only for one project</strong> (either yours or for a client). This license is not compatible with SaaS-based projects. <br><br> The Startup license is aimed at smaller teams. It grants you and your team (up to 5 people) the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects. <br><br> The Company license is aimed at agencies or larger teams. It grants you the right to create other licensed products base on the template that you purchase form us. This license it's compatible with SaaS-based projects. <br><br> The Enterprise license is aimed at large companies with multiple projects. It grants you the right to create <strong>any kind of software, SaaS, digital products and sell them</strong>. For restrictions, please check <a href="https://www.creative-tim.com/knowledge-center/is-there-any-type-of-restriction-regarding-the-enterprise-license/">here</a> <br><br> Also, the differences between our 3 types of Licenses is given by the <a href="https://www.creative-tim.com/knowledge-center/what-does-tech-support-include/">Tech Support</a> / <a href="https://www.creative-tim.com/knowledge-center/what-do-free-updates-mean/">Free Updates</a> availability and <a href="https://www.creative-tim.com/knowledge-center/how-many-developers-can-access-the-product/">Team Size</a>. <br><br> More info <a href="https://www.creative-tim.com/license">here</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#3" aria-expanded="false" aria-controls="3"> <div class=""> What is the difference between a Free and a Pro product? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> The differences between the Free and Pro products consists of the number of components, plugins, sections, pages in each. <br><br> More info <a href="https://www.creative-tim.com/knowledge-center/what-is-the-difference-between-a-free-and-a-pro-product/">here</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#4" aria-expanded="false" aria-controls="4"> <div class=""> How can I upgrade my license? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> You can upgrade from one license plan to the next one whenever you want simply by paying the cost difference. You only have to send us <strong>an email in which you specify the product that you have and the Order ID</strong>. We will give you an unique coupon for the upgrade. <br><br> More info <a href="https://www.creative-tim.com/knowledge-center/how-can-i-upgrade-my-license/">here</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingSeventh"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#5" aria-expanded="false" aria-controls="5"> <div class=""> Can I use a premium product in an open source project? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeventh"> <div class="panel-body"> Yes, of course! You can use the PRO product for an open source project if you add in the Readme file (on github) or in the description of your product that you built the project using “X product from Creative Tim” and a link to the product page. <br><br> More info <a href="https://www.creative-tim.com/knowledge-center/can-i-use-a-premium-product-in-an-open-source-project/">here</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingSeventh"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion1" href="#6" aria-expanded="false" aria-controls="6"> <div class=""> Is there any type of restriction regarding the Enterprise License? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeventh"> <div class="panel-body"> You don't have any restrictions using the Enterprise License; you just cannot create products or businesses that are in direct competition to us using our products: <br><br> <ul> <li>You can’t re-distribute the Item as stock, in a tool or template, or with source files. You can’t do this with an Item either on its own or bundled with other items. You can’t re-distribute or make available the Item as-is or with superficial modifications. <i>For example: You can’t license an item and then make it available as-is on your website for your users to download</i>.</li> <br> <li>You can’t use the Item in any application allowing an end-user to customize a digital or physical product to their specific needs, such as an “on-demand”, “made to order” or “build it yourself” application. You can use the Item in this way only if you purchase a separate License for each final product incorporating the Item that is created using the application. <i>For example: you can't create a website builder</i>.</li> </ul> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#19" aria-expanded="false" aria-controls="collapseThree"> <div class=""> What does the number of "Projects" refer to? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="19" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Depending on the License you purchase, you can use our products to either code a website/web application for you, for a client, or for multiple clients, which will be hosted on one or multiple domains: <br><br> <ul> <li>For example, if you purchased the Freelancer License or Startup License, you can create only one website (for you or a client). Same, if you have multiple subdomains, like "test.yoursite.com" or "dev.yoursite.com", you can use the Freelancer License or Startup License.</li> <br> <li>If you want to create multiple websites, you will need a bigger License (like Company or Enterprise). Same, if you have a complex application like a SaaS and have "client1.yoursite.com" and "client2.yoursite.com" and "clientx.yoursite.com", you will need a multi-domain License like Company or Enterprise.</li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#12" aria-expanded="false" aria-controls="collapseThree"> <div class=""> How many Developers can access the product? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Depending on the License type you purchased, one or more developers (from your team, for example) can access the product: <br><br> <ul> <li>If you purchased the Freelancer License, only you (one developer) can use the product.</li> <br> <li>If you purchased the Startup License, up to 5 developers (including you) can use the product.</li> <br> <li>If you purchased the Company License, up to 20 developers (including you) can access the product.</li> <br> <li>If you purchased the Enterprise License, you can work with a bigger team - more than 20 developers can access the product.</li> </ul> <a href="https://www.creative-tim.com/knowledge-center/how-can-i-invite-team-members-to-access-a-product/">Here are the steps to give product access to your team members</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#13" aria-expanded="false" aria-controls="collapseThree"> <div class=""> What does the "Documentation" refer to? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> It consists of the product technical manuals like getting started, build tools, and it also describes every component with code examples. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#14" aria-expanded="false" aria-controls="collapseThree"> <div class=""> What does the "Fully Coded" refer to? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> It means that you receive access to the entire code for HTML, JS, and SCSS files depending on the different packages of each product. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#15" aria-expanded="false" aria-controls="collapseThree"> <div class=""> What does "Tech Support" include? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="15" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> When you buy our products you have access to our Support Team so you can submit any ticket to us regarding product functionalities and bug fixes (learning and tutorials related requests are not included). You will get responses directly from the product’s creators in 24 hours for regular <strong>Support</strong> and in a couple of hours for <strong>Priority Support</strong> (during business days). </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#16" aria-expanded="false" aria-controls="collapseThree"> <div class=""> What do "Free Updates" mean? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Depending on your license type, you have a determined period when you receive product updates that include <strong>bug fixes and new features</strong>. <br><br> More info <a href="https://www.creative-tim.com/knowledge-center/what-do-free-updates-mean/">here</a>. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#17" aria-expanded="false" aria-controls="collapseThree"> <div class=""> If I bought a Company Bundle, but I want an Enterprise Bundle instead, what can I do? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="17" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Please send us an email at <a href="https://www.creative-tim.com/contact-us" target="_blank"><span class="__cf_email__" data-cfemail="40333530302f32340023322521342936256d34292d6e232f2d">[email protected]</span></a>. We will send you an upgrade coupon for your desired Bundle, and you will only pay the price difference. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="desc-section-title" role="button" data-toggle="collapse" data-parent="#accordion2" href="#20" aria-expanded="false" aria-controls="collapseThree"> <div class=""> Can I transfer my License from a company to another one? </div> <i class="fa fa-angle-down" aria-hidden="true"></i> </a> </h4> </div> <div id="20" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Yes, you can. It is available for all Licenses type as long as the <strong>support</strong> included in the License is still valid. <br><br> More info <a href="https://www.creative-tim.com/knowledge-center/can-i-transfer-my-license-from-a-company-to-another-one/">here</a>. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="main main-dark section-creators"> <div class="container"> <div class="creators"> <div class="row"> <div class="col-md-8 col-md-offset-2" id="comments"> <div class="creators collaborators-card"> <h2 class="legend text-center">We are here to help you!</h2> <div class="collaborators" data-turbolinks="false"> <div class="btn-area text-center"> <h4 class="commented">0 Web Developers commented on this product</h4> <div> <a target="_blank" class="btn btn-default btn-round" href="https://github.com/creativetimofficial/ct-notus-design-system-pro"> <i class="fa fa-github-alt"></i> Github </a> <a target="_blank" class="btn btn-default btn-round" href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"> <i class="fa fa-book"></i> Docs </a> <a target="_blank" class="btn btn-default btn-round" href="https://www.creative-tim.com/knowledge-center"> <i class=" fa fa-question-circle"></i> Knowledge Center </a> </div> <div class="mt-10"> <a target="_blank" class="btn btn-default btn-round" href="https://www.creative-tim.com/services/updivision?ref=ct-product-page"> <i class=" fa fa-code"></i> Custom Development </a> <a target="_blank" class="btn btn-default btn-round" href="https://discord.com/invite/FhCJCaHdQa"> <i class="fa fa-comments" aria-hidden="true"></i> Discord Server </a> </div> <input id="keep_product" class="hidden" value="588"> <div id="load-comments"> <h2 class="legend">Loading...</h2> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center"> <div class="sharing-area"> <div class="big-icon"> <i class="icon-comments"></i> </div> <h2 class="legend text-center">Sharing is caring!</h2> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/notus-design-system-pro?src=sdkpreparse" class="fb-xfbml-parse-ignore btn btn-new btn-wd btn-social btn-facebook btn-fill btn-round" onclick="shareFacebookWithCallBack()"> <i class="fa fa-facebook-square"></i> Facebook </a> <a href="https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/notus-design-system-pro&text=Checkout this awesome product for web developers&via=creativetim" class="btn btn-new btn-wd btn-social btn-twitter btn-fill btn-round"> <i class="fa fa-twitter"></i> Twitter </a> <a href="/cdn-cgi/l/email-protection#8db2fef8efe7e8eef9b0cee5e8eee6e2f8f9adf9e5e4feabefe2e9f4b0c5e4a1c4adebe2f8e3e9adf9e5e4feadece3e9adf9e5e2f8eae5f9adf4e2f8ade0e4eae5f9ade1e4e6e8ade4f9ade5f9f9fdfeb7a2a2fafafaa3eeffe8ecf9e4fbe8a0f9e4e0a3eee2e0a2fdffe2e9f8eef9a2e3e2f9f8fea0e9e8fee4eae3a0fef4fef9e8e0a0fdffe2" class="btn btn-new btn-wd btn-social btn-neutral btn-email btn-fill btn-round"> <i class="fa fa-paper-plane"></i> Email </a> </div> </div> </div> </div> </div> </div> <div class="main-white"> <div class="container"> <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" > <a itemprop="item" href="https://www.creative-tim.com/"> <span itemprop="name">Home</span> </a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" > <a itemprop="item" href="https://www.creative-tim.com/templates"> <span itemprop="name">All Templates</span> </a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class=active> <a itemprop="item" href="https://www.creative-tim.com/product/notus-design-system-pro"> <span itemprop="name">Notus Design System PRO</span> </a> <meta itemprop="position" content="3" /> </li> </ol> </div> </div> <div class="modal fade modal-product-log" id="product-version-logs-modal-588" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header text-center"> <h5 class="mb-0" id="exampleModalLabel"> Updates and Changelogs</h5> </div> <hr class="horizontal dark mb-4 mt-0"> <div class="modal-body"> <p> <h2>[1.0.0] - 2022-01-20</h2> <h3>Initial Release</h3> </p> </div> <div class="modal-footer border-0"> <button type="button" class="btn btn-default mb-0" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="footer"> <div class="overlayer"> <div class="container"> <div class="pb-70 pt-50"> <div class="row d-flex"> <div class="col-md-4 col-sm-12 col-md-offset-2"> <div class="section-numbers"> <div class="numbers"> <h4 class="numbers-dont-lie"><b>2,625,652</b> accounts</h4> <h4 class="numbers-dont-lie"><b>4,617,468</b> downloads</h4> <h4 class="numbers-dont-lie"><a href="https://www.creative-tim.com/templates?ref=footer-ct" target="_blank" class="text-white"><b>305</b> products</a></h4> </div> </div> </div> <div class="col-md-4 col-sm-12"> <p class="title h1">Join our newsletter</p> <style> #sib-form-container .sib-form-block { padding: 0 0 0 0 !important; } #sib-container { padding: 0 0 0 0 !important; background: transparent !important; } #sib-form-container .email { background-color: rgba(255,255,255,.1); color: #fff; border: none; border-radius: 3px; border: none; font-size: 16px; height: 40px; margin-right: 15px; padding: 3px 12px; width: 100%; } .sib-form { padding: 0 0 0 0 !important; } </style> <link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">   <div class="sib-form"> <div id="sib-form-container" > <div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; border-radius:3px; border-color:#ff4949;max-width:540px;background:#fff;"> <div class="sib-form-message-panel__text sib-form-message-panel__text--center"> <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon"> <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z" /> </svg> <span class="sib-form-message-panel__inner-text"> Your subscription could not be saved. Please try again. </span> </div> </div> <div></div> <div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#085229; border-radius:3px; border-color:#13ce66;max-width:540px;background:#fff"> <div class="sib-form-message-panel__text sib-form-message-panel__text--center"> <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon"> <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" /> </svg> <span class="sib-form-message-panel__inner-text"> Your subscription has been successful. </span> </div> </div> <div></div> <div id="sib-container" class="sib-container--large sib-container--vertical"> <form id="sib-form" class="form-inline method="POST" action="https://e961ea6f.sibforms.com/serve/MUIFAJsaIYuBJhLcwkC8_U00aM-IDkZTqyzNo1HoBuvYzICssMcBKi58EoDO4tkVZnPwr7FBwjLjzqr9pkPY0N8FNsCWsycqoTHoABzsqh2FTGs8u3v5Rr7HyNcUcP5BQXxk8MW4HoK40NkvgUGOI6slMiqr5Y8a_98tF_9T_dfAdpADVTKzg2m0UtMv6NOaSaGMVy9oXwaQl0o8" data-type="subscription"> <div style="padding: 8px 0; width:100%"> <div class="sib-form-block form-inline"> <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; border-radius:3px; border-color:#ff4949;"></label> <input class="email form-control" type="text" id="EMAIL" name="EMAIL" autocomplete="off" data-required="true" required placeholder="Enter Email" /> <button class="sib-form-block__button sib-form-block__button-with-loader btn btn-info btn-round btn-fill" form="sib-form" type="submit"> <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon" viewBox="0 0 512 512"> <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z" /> </svg> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Join </button> </div> </div> <input type="text" name="email_address_check" value="" class="input--hidden"> <input type="hidden" name="locale" value="en"> </form> </div> </div> </div>   <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script> window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code'; window.LOCALE = 'en'; window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again."; window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. "; window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again."; window.translation = { common: { selectedList: '{quantity} list selected', selectedLists: '{quantity} lists selected' } }; var AUTOHIDE = Boolean(0); </script> <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>   </div> </div> </div> </div> <div class="container"> <div class="row support d-flex"> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Company</h4> <ul class="list-unstyled" data-turbolinks="false"> <li><a href="/presentation">About Us</a></li> <li><a href="https://github.com/creativetimofficial">Github</a></li> <li><a href="/templates/free">Freebies</a></li> <li><a href="/templates/premium">Premium</a></li> <li> <a href="https://www.creative-tim.com/blog">Blog</a></li> <li> <a href="/affiliates/new">Affiliate Program</a></li> <li> <a href="https://www.creative-tim.com/club?ref=ct-footer">Creative Tim Club</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Help and Support</h4> <ul class="list-unstyled" data-turbolinks="false"> <li><a href="https://www.creative-tim.com/knowledge-center">Knowledge Center</a></li> <li><a href="/contact-us">Contact Us</a></li> <li><a href="/support-terms">Premium Support</a></li> <li><a target="blank" href="https://www.creative-tim.com/services/updivision?ref=ct-footer">Custom Development</a></li> <li> <a href="https://www.creative-tim.com/knowledge-center/terms-of-service/">Terms & Conditions</a></li> <li> <a href="https://www.creative-tim.com/knowledge-center/privacy-policy/">Privacy Policy</a></li> <li><a href="/license">Licenses</a></li> <li><a target="_blank" href="https://iradesign.io">Illustrations</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Tailwind Resources</h4> <ul class="list-unstyled" data-turbolinks="false"> <li> <a href="/templates/tailwind-dashboard">Admin & Dashboard</a></li> <li> <a href="/templates/tailwind">Templates & Kits</a></li> <li> <a href="https://www.material-tailwind.com/?ref=ct-footer">React & Tailwind Framework</a></li> <li> <a href="https://www.material-tailwind.com/?ref=ct-footer">HTML & Tailwind Framework</a></li> <li> <a href="https://www.material-tailwind.com/figma?ref=ct-footer">Figma Design System</a></li> <li> <a href="https://www.creative-tim.com/twcomponents/cheatsheet">TW Cheatsheet</a></li> <li> <a href="https://www.creative-tim.com/twcomponents/gradient-generator">TW Gradient Generator</a></li> <li> <a href="https://www.creative-tim.com/twcomponents">TW Components</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Developer Resources</h4> <ul class="list-unstyled" data-turbolinks="false"> <li> <a href="https://www.galichat.com/?ref=ct-footer">GaliChat AI Assistant</a></li> <li> <a href="https://www.creative-tim.com/gpts">GPTs Collection</a></li> <li> <a href="https://www.creative-tim.com/cheatsheet/bootstrap4">Bootstrap Cheat Sheet</a></li> <li> <a href="https://www.creative-tim.com/cheatsheet/chatgpt-prompts/">ChatGPT Prompts</a></li> <li> <a target="_blank" href="https://code-mentor.ai/">AI Code Mentor</a></li> <li><a target="_blank" href="https://m.do.co/c/276af09d9975">Digital Ocean</a></li> <li><a href="https://www.creative-tim.com/software?ref=ct-footer">Top Software Companies</a></li> <li><a href="https://www.creative-tim.com/software-engineering-intelligence?ref=ct-footer">Software Engineering Intelligence</a></li> </ul> </div> </div> <hr> <div class="row pt-30"> <div class="col-md-12"> <div class="social-area text-center" itemscope itemtype="https://schema.org/LocalBusiness"> <a itemprop="url" href="/" class="footer-brand" data-turbolinks="false"> <img class="img-logo" alt="logoCt" loading="lazy" src="/assets/logo/logo-ct-white-vertical-0fc4b92dda1d5402f78497576a85bbf1810552c5b4b22a3298df9106e2898a1f.svg" /> </a> <br/> <a itemprop="sameAs" href="https://github.com/creativetimofficial" class="btn btn-default btn-social btn-round" rel="publisher" target="_blank"><i class="fa fa-github"></i></a> <a itemprop="sameAs" href="https://dribbble.com/creativetim" class="btn btn-default btn-social btn-round" rel="publisher" target="_blank"><i class="fa fa-dribbble"></i></a> <a itemprop="sameAs" href="https://www.facebook.com/CreativeTim" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-facebook-square"></i></a> <a itemprop="sameAs" href="https://twitter.com/CreativeTim" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-twitter"></i></a> <a itemprop="sameAs" href="https://www.instagram.com/creativetimofficial/" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-instagram"></i></a> <a itemprop="sameAs" href="https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-youtube"></i></a> <a itemprop="sameAs" href="https://ro.pinterest.com/thecreativetim/" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-pinterest"></i></a> </div> </div> <div class="col-md-12"> <div class="credits"> © 2024 Creative Tim, all rights reserved. Made with <i class="icon-heart heart" alt="love"></i> for a better web. </div> </div> </div> </div> </div> </div> <script type="text/javascript"> </script> <div class="modal fade login" id="loginModal"> <div class="modal-dialog login animated"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Login with</h4> </div> <div class="modal-body"> <div class="box"> <div class="content"> <div class="social" data-turbolinks="false"> <a id="github_login" class="circle github" rel="nofollow" href="/social/github?destination=product_page&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Fproduct%252Fnotus-design-system-pro"> <i class="icon-github"></i> </a> <a id="google_login" class="circle google" rel="nofollow" href="/social/google_oauth2?destination=product_page&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Fproduct%252Fnotus-design-system-pro"> <i class="fa fa-google"></i> </a> <a id="facebook_login" class="circle facebook" rel="nofollow" href="/social/facebook?destination=product_page&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Fproduct%252Fnotus-design-system-pro"> <i class="icon-facebook-alt"></i> </a> </div> <div class="division"> <div class="line l"></div> <span>or</span> <div class="line r"></div> </div> <div class="error inside-alert"></div> <div class="form loginBox"> <form html="multipart true" action="/login" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="UQPGDrreLLS1cEKAB-jdt-BAdtZz1nhd-FKaiRUc4HaBjOHBzdnO4ay2C1XPajed6KxzCwPVCyTVOtS3md5oWw" autocomplete="off" /> <input type="text" name="email" class="form-control" placeholder="Email" /> <input type="password" name="password" class="form-control" placeholder="Password" /> <input type="hidden" name="destination" value="product_page" autocomplete="off" /> <input type="hidden" name="url" value="https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fnotus-design-system-pro" autocomplete="off" /> <div class="row"> <div class="col-md-12"> <input type="submit" name="commit" value="Login" class="btn btn-default btn-login" data-disable-with="Login" /> </div> <div class="col-md-12 mt-24 d-flex justify-content-center"> <script src="https://www.recaptcha.net/recaptcha/api.js" async defer ></script> <div data-sitekey="6LfJvgsTAAAAALbDuISbCDo1l6qyX_YrPT59xaVk" class="g-recaptcha "></div> <noscript> <div> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.recaptcha.net/recaptcha/api/fallback?k=6LfJvgsTAAAAALbDuISbCDo1l6qyX_YrPT59xaVk" name="ReCAPTCHA" style="width: 302px; height: 422px; border-style: none; border: 0; overflow: hidden;"> </iframe> </div> </div> <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;"> <textarea name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"> </textarea> </div> </div> </noscript> </div> </div> </form> </div> </div> </div> <div class="box"> <div class="content registerBox" style="display:none;"> <div class="form"> <form html="multipart true" action="/register" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="ad6dRJcNNNIbhEsFuDwH-x4GAsnabKeCk1qPMduipgkGEekWTW90cx3Rqe5BBQt9hEp-mICTAlTgvOdP44m7VA" autocomplete="off" /> <input type="text" name="email" class="form-control" placeholder="Email" /> <input type="password" name="password" class="form-control" placeholder="Password" /> <input type="password" name="password_confirmation" class="form-control" placeholder="Repeat Password" /> <input type="hidden" name="destination" value="product_page" autocomplete="off" /> <input type="hidden" name="url" value="https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fnotus-design-system-pro" autocomplete="off" /> <label class="checkbox"> <input type="checkbox" value="1" data-toggle="checkbox" name="subscribed" class="ct-info checkbox-subscribe"> Subscribe me to the Newsletter </label> <input type="submit" name="commit" value="Create account" class="btn btn-default btn-register" data-disable-with="Create account" /> </form> </div> </div> </div> </div> <div class="modal-footer"> <div class="forgot login-footer"> <span>Looking to <a href="javascript: showRegisterForm();" rel="nofollow">create an account</a> ?</span> <br /> <span><a rel="nofollow" href="/forgot-password">Forgot password</a> ?</span> </div> <div class="forgot register-footer" style="display:none"> <span>Already have an account?</span> <a href="javascript: showLoginForm();">Login</a> </div> </div> </div> </div> </div> <div class="modal fade" id="search-modal" role="dialog"> <div class="modal-dialog"> <div itemscope itemtype="https://schema.org/WebSite"> <meta itemprop="url" content="https://www.creative-tim.com/"/> <form class="form-control-search" itemprop="potentialAction" itemscope="itemscope" itemtype="https://schema.org/SearchAction" action="/search" accept-charset="UTF-8" method="get"> <div class="form-group"> <meta itemprop="target" content="https://www.creative-tim.com/search?q={q}"/> <div class="input-group input-group-lg"> <span class="input-group-addon"> <i class="icon-search"></i></span> <input type="text" name="q" id="q" class="form-control form-control-lg search" placeholder="Okay, what are we looking for?" itemprop="query-input" /> </div> </div> </form> </div> </div> </div> <script src="https://widget.galichat.com/gali-embeded.min.js" chat-hash="qm67ek58shjmf589d5j7o" defer> </script> </body> </html>

CINXE.COM