Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Stacked Footer Layouts
A clean and minimalistic landing footer layout.
Shop Demo
New
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><footer class="ir9vg m9vu4 batcw kq7zk dark:bg-neutral-900 dark:border-neutral-700"> <div class="qaxp8 ejxie huxlp goxfo c9x3r iwwvx oekzh rxp1p"> <div class="fwv3l flex pz3xv jrfak"> <!-- Input Group --> <div class="a7bd7"> <label for="hs-pro-shfsei" class="block dsir7 f4yq1 p9tun dark:text-neutral-200"> Subscribe & get 10% off </label> <div class="flex items-center wn51l"> <input id="hs-pro-shfsei" type="text" class="l3ebx iwwvx block qaxp8 kq7zk awdil np3zw aqt2b x1qw7 zfu51 xwjcj c3i4e dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder-neutral-600 dark:focus:ring-neutral-600" placeholder="Enter email address"> <button type="button" class="l3ebx iwwvx w9zxc s2k2k dry15 items-center dsp0o np3zw f4yq1 awdil efs5t xk8dv d7vyt hrliy ngmud xwjcj c3i4e r0fp5 plgkh dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> Sign up </button> </div> </div> <!-- End Input Group --> </div> <!-- End Col --> <!-- Grid --> <div class="i80r8 fwmgp rlefu wb6zq m12op hjkf3"> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Help</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Help Center</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">FAQs</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Subscription</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Order Status</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Returns & Exchanges</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Contact Us</a></li> </ul> </div> <!-- End Col --> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Resources</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Gift Cards</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Find a Store</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Membership</a></li> </ul> </div> <!-- End Col --> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Company</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Newsroom</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">New features</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Careers</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Investors</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Purpose</a></li> </ul> </div> <!-- End Col --> <div class="rufp9"> <!-- List --> <div class="cwicw"> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shnlm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg> Location <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shnrsm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg> United Kingdom <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shwrm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Send us feedback <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End List --> <div> <h4 class="f4yq1 pdak6 p9tun dark:text-neutral-200">Stay connected</h4> <!-- Social Brands --> <div class="nc0x2 h25m5 w5iha"> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg> <span class="tliya">Instagram</span> </a> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx vs0hq" width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor"/></svg> <span class="tliya">X (Twitter)</span> </a> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg> <span class="tliya">YouTube</span> </a> </div> <!-- End Social Brands --> </div> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <div class="qaxp8 ejxie cj5uk z44va huxlp iwwvx oekzh rxp1p"> <!-- List --> <ul class="flex flex-wrap items-center w9zxc jrfak"> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> © 2024 Preline Labs. </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Terms </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Privacy </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Your Privacy Choices </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <!-- Dark Mode --> <button type="button" class="wesz1 flex hs-dark-mode items-center ihu9y pdak6 z1v6e tbhem r0fp5 q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="dark"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg> <span class="tliya">Dark mode</span> </button> <button type="button" class="l8oce hidden hs-dark-mode items-center ihu9y pdak6 z1v6e tbhem r0fp5 q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="light"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg> <span class="tliya">Light mode</span> </button> <!-- End Dark Mode --> </li> </ul> <!-- End List --> </div> </footer> <script src="../../assets/vendor/preline/dist/index.js"></script> </body> </html>
<footer class="ir9vg m9vu4 batcw kq7zk dark:bg-neutral-900 dark:border-neutral-700"> <div class="qaxp8 ejxie huxlp goxfo c9x3r iwwvx oekzh rxp1p"> <div class="fwv3l flex pz3xv jrfak"> <!-- Input Group --> <div class="a7bd7"> <label for="hs-pro-shfsei" class="block dsir7 f4yq1 p9tun dark:text-neutral-200"> Subscribe & get 10% off </label> <div class="flex items-center wn51l"> <input id="hs-pro-shfsei" type="text" class="l3ebx iwwvx block qaxp8 kq7zk awdil np3zw aqt2b x1qw7 zfu51 xwjcj c3i4e dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder-neutral-600 dark:focus:ring-neutral-600" placeholder="Enter email address"> <button type="button" class="l3ebx iwwvx w9zxc s2k2k dry15 items-center dsp0o np3zw f4yq1 awdil efs5t xk8dv d7vyt hrliy ngmud xwjcj c3i4e r0fp5 plgkh dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> Sign up </button> </div> </div> <!-- End Input Group --> </div> <!-- End Col --> <!-- Grid --> <div class="i80r8 fwmgp rlefu wb6zq m12op hjkf3"> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Help</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Help Center</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">FAQs</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Subscription</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Order Status</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Returns & Exchanges</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Contact Us</a></li> </ul> </div> <!-- End Col --> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Resources</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Gift Cards</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Find a Store</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Membership</a></li> </ul> </div> <!-- End Col --> <div> <h4 class="s9qc2 f4yq1 pdak6 p9tun dark:text-neutral-200">Company</h4> <ul class="i80r8 wvkwg"> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Newsroom</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">New features</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Careers</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Investors</a></li> <li><a class="pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">Purpose</a></li> </ul> </div> <!-- End Col --> <div class="rufp9"> <!-- List --> <div class="cwicw"> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shnlm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg> Location <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shnrsm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg> United Kingdom <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> <button type="button" class="flex items-center ihu9y vf6o6 pdak6 p9tun t76na r0fp5 zgjk6 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-shwrm"> <svg class="h21yx vs0hq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Send us feedback <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </button> </div> <!-- End List --> <div> <h4 class="f4yq1 pdak6 p9tun dark:text-neutral-200">Stay connected</h4> <!-- Social Brands --> <div class="nc0x2 h25m5 w5iha"> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg> <span class="tliya">Instagram</span> </a> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx vs0hq" width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor"/></svg> <span class="tliya">X (Twitter)</span> </a> <a class="relative ykxda pdak6 z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg> <span class="tliya">YouTube</span> </a> </div> <!-- End Social Brands --> </div> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <div class="qaxp8 ejxie cj5uk z44va huxlp iwwvx oekzh rxp1p"> <!-- List --> <ul class="flex flex-wrap items-center w9zxc jrfak"> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> © 2024 Preline Labs. </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Terms </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Privacy </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <a class="bqo3s z1v6e c44mj lcels tbhem r0fp5 ay3io q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#"> Your Privacy Choices </a> </li> <li class="s2k2k items-center relative bqo3s z1v6e qj2gz vfkbb rz0mt k8w5x cmpuu e29z5 jedl0 r3qjr akurv uwmec cxsgt dark:text-neutral-500 dark:after:bg-neutral-600"> <!-- Dark Mode --> <button type="button" class="wesz1 flex hs-dark-mode items-center ihu9y pdak6 z1v6e tbhem r0fp5 q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="dark"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg> <span class="tliya">Dark mode</span> </button> <button type="button" class="l8oce hidden hs-dark-mode items-center ihu9y pdak6 z1v6e tbhem r0fp5 q8jf0 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="light"> <svg class="h21yx ufena" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg> <span class="tliya">Light mode</span> </button> <!-- End Dark Mode --> </li> </ul> <!-- End List --> </div> </footer>
Mini Footer with Links
New
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
Simple with Links and Modal
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative kby5p"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="bl6eo z2mbq qyfa9 dark:bg-neutral-950"> <!-- ========== MAIN CONTENT ========== --> <main id="content"> <div class="ejxie g0aw2 d0cw8 ejsny rxp1p huxlp"> <!-- Card --> <div class="u3doq flex pz3xv dry15 ko6dl fc4nw fc4nw min-h-[calc(100vh-75px)] sm:min-h-[calc(100vh-104px)] m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="relative ly3m4 efs5t sx2o3 kq7zk dxf1r apqjg dark:border-neutral-700"> <div class="absolute inset-0 ewvyg"> <div class="bg-[linear-gradient(45deg,theme(colors.gray.100)_7.14%,transparent_7.14%,transparent_50%,theme(colors.gray.100)_50%,theme(colors.gray.100)_57.14%,transparent_57.14%,transparent);] op2s4 dark:bg-[linear-gradient(45deg,theme(colors.neutral.700)_7.14%,transparent_7.14%,transparent_50%,theme(colors.neutral.700)_50%,theme(colors.neutral.700)_57.14%,transparent_57.14%,transparent);] ewvyg"></div> </div> </div> </div> <!-- End Card --> </div> </main> <!-- ========== END MAIN CONTENT ========== --> <!-- ========== FOOTER ========== --> <footer class="d0wxc xweia absolute jgfbh at14f"> <div class="ejxie g0aw2 d0cw8 rxp1p huxlp"> <div class="flex m0bgt items-center"> <p class="bqo3s np3zw z1v6e dark:text-neutral-500"> © 2024 Preline Labs. </p> <!-- List --> <ul> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <a class="mwt7d r0fp5 ay3io dark:hover:text-neutral-200" href="#"> FAQ </a> </li> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <a class="mwt7d r0fp5 ay3io dark:hover:text-neutral-200" href="#"> License </a> </li> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 egcbn vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <button type="button" class="mwt7d r0fp5 q8jf0 dark:hover:text-neutral-200 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-dfkm"> <svg class="h21yx vs0hq ilzyg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg> </button> </li> </ul> <!-- End List --> </div> </div> </footer> <!-- ========== END FOOTER ========== --> <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script> </body> </html> <!-- Keyboard Shortcuts Modal --> <div id="hs-pro-dfkm" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-label="Keyboard shortcuts"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra vhgu2 ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg flex pz3xv m9vu4 dxf1r fpj7t shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Search Input --> <div class="u3doq vcvf1 kq7zk dark:border-neutral-700"> <div class="relative"> <div class="absolute hx55d x0wu9 flex items-center xt2fk l2wpd"> <svg class="h21yx ufena tqixq dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> </div> <input type="text" class="bdby8 ohyoe npykj block qaxp8 p9tun dqvtq xk8dv awdil pdak6 y5xej r0fp5 actqw o7vfi vgma9 s5w22 dark:text-white dark:placeholder:text-neutral-500" placeholder="Search keyboard or shortcuts"> <div class="absolute hx55d celeo flex items-center xt2fk l2wpd dark:border-neutral-700 dark:text-neutral-200"> <span class="yn6ln s2k2k dry15 items-center sslcy k3en6 m9vu4 efs5t kq7zk lz831 pdak6 tqixq ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400"> Cmd + K </span> </div> </div> </div> <!-- End Search Input --> <!-- Body --> <div class="ny4z2 bgcuw apqjg zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-800"> <div class="u3doq g0okh"> <div> <h4 class="p9tun rozsb f6bwg dark:text-neutral-200"> Formatting </h4> <!-- List --> <ul> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="ve7ow"> Bold </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> b </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="e6url"> Italic </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> i </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="iq0pj c44mj"> Underline </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> u </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="bgfzo"> Strikethrough </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Alt </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> u </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="pdak6"> Small text </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> s </span> </div> </li> </ul> <!-- End List --> </div> <div> <h4 class="p9tun rozsb f6bwg dark:text-neutral-200"> Insert </h4> <!-- List --> <ul> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Mention person <a class="rozsb pdak6 oqj39 n68l9 lcels ay3io dark:text-white dark:hover:text-white/80" href="#"> (@Brian) </a> </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> @ </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Link to doc <a class="rozsb pdak6 oqj39 n68l9 lcels ay3io dark:text-white dark:hover:text-white/80" href="#"> (+Meeting notes) </a> </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> + </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="rozsb"> #hashtag </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> #hashtag </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Date </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /date </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Space </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Time </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /date </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Space </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Note box </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /note red </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Enter </span> </div> </li> </ul> <!-- End List --> </div> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Keyboard Shortcuts Modal -->
<body class="bl6eo z2mbq qyfa9 dark:bg-neutral-950"> <!-- ========== MAIN CONTENT ========== --> <main id="content"> <div class="ejxie g0aw2 d0cw8 ejsny rxp1p huxlp"> <!-- Card --> <div class="u3doq flex pz3xv dry15 ko6dl fc4nw fc4nw min-h-[calc(100vh-75px)] sm:min-h-[calc(100vh-104px)] m9vu4 efs5t kq7zk ycht7 dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="relative ly3m4 efs5t sx2o3 kq7zk dxf1r apqjg dark:border-neutral-700"> <div class="absolute inset-0 ewvyg"> <div class="bg-[linear-gradient(45deg,theme(colors.gray.100)_7.14%,transparent_7.14%,transparent_50%,theme(colors.gray.100)_50%,theme(colors.gray.100)_57.14%,transparent_57.14%,transparent);] op2s4 dark:bg-[linear-gradient(45deg,theme(colors.neutral.700)_7.14%,transparent_7.14%,transparent_50%,theme(colors.neutral.700)_50%,theme(colors.neutral.700)_57.14%,transparent_57.14%,transparent);] ewvyg"></div> </div> </div> </div> <!-- End Card --> </div> </main> <!-- ========== END MAIN CONTENT ========== --> <!-- ========== FOOTER ========== --> <footer class="d0wxc xweia absolute jgfbh at14f"> <div class="ejxie g0aw2 d0cw8 rxp1p huxlp"> <div class="flex m0bgt items-center"> <p class="bqo3s np3zw z1v6e dark:text-neutral-500"> © 2024 Preline Labs. </p> <!-- List --> <ul> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <a class="mwt7d r0fp5 ay3io dark:hover:text-neutral-200" href="#"> FAQ </a> </li> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <a class="mwt7d r0fp5 ay3io dark:hover:text-neutral-200" href="#"> License </a> </li> <li class="ykxda relative s2yet bqo3s np3zw z1v6e u0d52 egcbn vfkbb nfqat vwcz4 aqpc6 uqr7r j8h9j d9ij7 irezx xjar7 jg6h9 dark:text-neutral-500 dark:before:bg-neutral-600"> <button type="button" class="mwt7d r0fp5 q8jf0 dark:hover:text-neutral-200 dark:focus:text-neutral-400" data-hs-overlay="#hs-pro-dfkm"> <svg class="h21yx vs0hq ilzyg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg> </button> </li> </ul> <!-- End List --> </div> </div> </footer> <!-- ========== END FOOTER ========== --> <!-- Keyboard Shortcuts Modal --> <div id="hs-pro-dfkm" class="hs-overlay hidden ewvyg fixed fopbl x0wu9 rpylz v2o4d bgcuw [--close-when-click-inside:true] xt2fk" role="dialog" tabindex="-1" aria-label="Keyboard shortcuts"> <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ftdwh opacity-0 oviqp g22ra vhgu2 ppfkn crpye ubyl1 h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center"> <div class="qaxp8 f07vg flex pz3xv m9vu4 dxf1r fpj7t shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] dark:shadow-[0_10px_40px_10px_rgba(0,0,0,0.2)] dark:bg-neutral-800"> <!-- Search Input --> <div class="u3doq vcvf1 kq7zk dark:border-neutral-700"> <div class="relative"> <div class="absolute hx55d x0wu9 flex items-center xt2fk l2wpd"> <svg class="h21yx ufena tqixq dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> </div> <input type="text" class="bdby8 ohyoe npykj block qaxp8 p9tun dqvtq xk8dv awdil pdak6 y5xej r0fp5 actqw o7vfi vgma9 s5w22 dark:text-white dark:placeholder:text-neutral-500" placeholder="Search keyboard or shortcuts"> <div class="absolute hx55d celeo flex items-center xt2fk l2wpd dark:border-neutral-700 dark:text-neutral-200"> <span class="yn6ln s2k2k dry15 items-center sslcy k3en6 m9vu4 efs5t kq7zk lz831 pdak6 tqixq ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400"> Cmd + K </span> </div> </div> </div> <!-- End Search Input --> <!-- Body --> <div class="ny4z2 bgcuw apqjg zq2x8 oasqe c7c11 iz02v dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-800"> <div class="u3doq g0okh"> <div> <h4 class="p9tun rozsb f6bwg dark:text-neutral-200"> Formatting </h4> <!-- List --> <ul> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="ve7ow"> Bold </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> b </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="e6url"> Italic </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> i </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="iq0pj c44mj"> Underline </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> u </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="bgfzo"> Strikethrough </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Alt </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> u </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="pdak6"> Small text </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Ctrl </span> + <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> s </span> </div> </li> </ul> <!-- End List --> </div> <div> <h4 class="p9tun rozsb f6bwg dark:text-neutral-200"> Insert </h4> <!-- List --> <ul> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Mention person <a class="rozsb pdak6 oqj39 n68l9 lcels ay3io dark:text-white dark:hover:text-white/80" href="#"> (@Brian) </a> </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> @ </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Link to doc <a class="rozsb pdak6 oqj39 n68l9 lcels ay3io dark:text-white dark:hover:text-white/80" href="#"> (+Meeting notes) </a> </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> + </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span class="rozsb"> #hashtag </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> #hashtag </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Date </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /date </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Space </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Time </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /date </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Space </span> </div> </li> <li class="flex m0bgt items-center dsp0o pykdd batcw kq7zk p9tun dark:border-neutral-700 dark:text-neutral-300"> <span> Note box </span> <div class="flex ernqe"> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> /note red </span> <span class="yn6ln s2k2k dry15 items-center hmhrw k3en6 m9vu4 efs5t kq7zk lz831 pdak6 p9tun ngy7c dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200"> Enter </span> </div> </li> </ul> <!-- End List --> </div> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Keyboard Shortcuts Modal -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close