FEKBD Addons · Widget Library

Click any widget to see every variation live — then drop it into your own Elementor page.

.ukw-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .ukw-jump a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:40px;background:#fff;border:1.5px solid #ececf4;color:#1a1a2e!important;font-weight:700;font-size:14px;text-decoration:none!important;box-shadow:0 4px 14px rgba(20,20,43,.05);transition:all .25s} .ukw-jump a:hover{transform:translateY(-3px);border-color:var(--c,#6c5ce7);box-shadow:0 12px 26px rgba(20,20,43,.12)} .ukw-jump a b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--c,#6c5ce7);color:#fff;font-size:12px} .ukw-search{position:relative;max-width:560px;margin:0 auto 26px} .ukw-search input{width:100%;height:60px;padding:0 24px 0 56px;border-radius:40px;border:2px solid #ececf4;background:#fff;font-size:17px;font-weight:500;box-shadow:0 12px 34px rgba(20,20,43,.08);transition:border-color .2s,box-shadow .2s} .ukw-search input:focus{outline:0;border-color:#6c5ce7;box-shadow:0 0 0 5px rgba(108,92,231,.14),0 12px 34px rgba(20,20,43,.08)} .ukw-search svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:#6c5ce7} .ukw-none{display:none;text-align:center;padding:40px;color:#6b6b85;font-weight:600} .ukw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px} .ukw-card{position:relative;display:flex;min-height:172px;flex-direction:column;gap:6px;padding:22px 22px 20px;border-radius:20px;background:#fff;border:1.5px solid #ececf4;text-decoration:none!important;color:#1a1a2e!important;overflow:hidden;transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s,border-color .3s;opacity:0;transform:translateY(20px)} .ukw-card.is-in{opacity:1;transform:none;transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s,border-color .3s,opacity .6s ease var(--d,0s)} .ukw-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--c1),var(--c2));opacity:0;transition:opacity .3s} .ukw-card:hover{transform:translateY(-7px);border-color:transparent;box-shadow:0 22px 44px -12px var(--c1)} .ukw-card:hover::before{opacity:1} .ukw-card>*{position:relative;z-index:1;transition:color .25s} .ukw-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:14px;font-weight:800;margin-bottom:8px;transition:background .3s,color .3s} .ukw-name{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25} .ukw-tag{font-size:13.5px;line-height:1.5;color:#6b6b85} .ukw-go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--c1)} .ukw-go svg{transition:transform .3s} .ukw-card:hover .ukw-name,.ukw-card:hover .ukw-tag,.ukw-card:hover .ukw-go{color:#fff} .ukw-card:hover .ukw-num{background:rgba(255,255,255,.22)} .ukw-card:hover .ukw-go svg{transform:translateX(5px)} .ukw-card.is-hide{display:none} @media(max-width:600px){.ukw-grid{grid-template-columns:1fr 1fr;gap:12px}.ukw-card{padding:16px}.ukw-name{font-size:15px}.ukw-tag{display:none}}
No widget matches your search — try another word.
(function(){var q=document.getElementById("ukw-q");var cards=[].slice.call(document.querySelectorAll(".ukw-card")); var io="IntersectionObserver" in window?new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add("is-in");io.unobserve(e.target)}})},{threshold:.08}):null; cards.forEach(function(c,i){c.style.setProperty("--d",(i%6)*0.05+"s");io?io.observe(c):c.classList.add("is-in")}); if(!q)return;q.addEventListener("input",function(){var v=q.value.trim().toLowerCase(),n=0;cards.forEach(function(c){var m=!v||c.getAttribute("data-s").indexOf(v)>-1;c.classList.toggle("is-hide",!m);if(m){n++;c.classList.add("is-in")}}); document.querySelectorAll(".ukw-sec").forEach(function(s){var any=s.querySelectorAll(".ukw-card:not(.is-hide)").length>0;s.style.display=any?"":"none"});var no=document.getElementById("ukw-none");if(no)no.style.display=n?"none":"block"})})();
Ready?

Lightweight, animated and built for Elementor.