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.
Mini Footer with Links
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
Simple with Links and Modal
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative z469n"> <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="ivase tcs39 iil4j"> <!-- ========== MAIN CONTENT ========== --> <main id="content"> <div class="max-w-[85rem] ztqk3 e994o tc9v9 jky26 mx-auto"> <!-- Card --> <div class="fj10a flex flex-col gaa3v v3hoh yp21z yp21z min-h-[calc(100vh-75px)] sm:min-h-[calc(100vh-104px)] kqamx t8tjb o67vx y9wzu hua1b"> <div class="relative vaohh t8tjb xx8yd fno8k dark:border-white/10 hua1b overflow-hidden"> <div class="absolute inset-0 nw84h"> <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-[length:10px_10px] nw84h"></div> </div> </div> </div> <!-- End Card --> </div> </main> <!-- ========== END MAIN CONTENT ========== --> <!-- ========== FOOTER ========== --> <footer class="zyzs2 ifc3e absolute qkpim v9dw1"> <div class="max-w-[85rem] ztqk3 e994o jky26 mx-auto"> <div class="flex flex-wrap tah6m items-center g2np1"> <p class="uhey0 l92i4 q95gx"> © 2026 Preline Labs. </p> <!-- List --> <ul> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <a class="p864q focus:outline-hidden tcf24" href="#"> FAQ </a> </li> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <a class="p864q focus:outline-hidden tcf24" href="#"> License </a> </li> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e y1nev ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <button type="button" class="p864q focus:outline-hidden tcf24" data-hs-overlay="#hs-pro-dfkm"> <svg class="f832y t6dfr wvh3t" 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=4.0.1"></script> </body> </html> <!-- Keyboard Shortcuts Modal --> <div id="hs-pro-dfkm" class="hs-overlay hidden nw84h fixed gjs78 y3c38 f0vgf overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] m4bse" 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 rnl9j opacity-0 h9v03 ducw2 a6xzj sm:w-full u9cmv sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center"> <div class="w-full eb830 flex flex-col b6tm6 t8tjb bya7c hua1b pointer-events-auto f9ny1"> <!-- Search Input --> <div class="pz76f bzdc7 jvyn5 sguje"> <div class="relative"> <div class="absolute z1h52 y3c38 flex items-center m4bse htnk8"> <svg class="f832y krmzt q95gx" 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="hd5mz a6q1l jpe30 os36w block w-full kqamx whmvu g8fkv l92i4 l2bgt wj88j focus:outline-hidden uun8o disabled:opacity-50 disabled:pointer-events-none" placeholder="Search keyboard or shortcuts"> <div class="absolute z1h52 cxpuq flex items-center m4bse htnk8"> <span class="wjlxf inline-flex gaa3v items-center ac5ar guyox kqamx t8tjb o67vx mneaq zao2n a8swc mobw6"> Cmd + K </span> </div> </div> </div> <!-- End Search Input --> <!-- Body --> <div class="v94v9 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"> <div class="fj10a space-y-5"> <div> <h4 class="l2bgt eitz2 o9e9y"> Formatting </h4> <!-- List --> <ul> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="c1g03"> Bold </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> b </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="ezbb5"> Italic </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> i </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="vzubd p295z"> Underline </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> u </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="qpsba"> Strikethrough </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Alt </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> u </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="zao2n"> Small text </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> s </span> </div> </li> </ul> <!-- End List --> </div> <div> <h4 class="l2bgt eitz2 o9e9y"> Insert </h4> <!-- List --> <ul> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Mention person <a class="eitz2 zao2n d8utf q1iu5 tmkca tcf24" href="#"> (@Brian) </a> </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> @ </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Link to doc <a class="eitz2 zao2n d8utf q1iu5 tmkca tcf24" href="#"> (+Meeting notes) </a> </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> + </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="eitz2"> #hashtag </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> #hashtag </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Date </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /date </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Space </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Time </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /date </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Space </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Note box </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /note red </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Enter </span> </div> </li> </ul> <!-- End List --> </div> </div> </div> <!-- End Body --> </div> </div> </div> <!-- End Keyboard Shortcuts Modal -->
<body class="ivase tcs39 iil4j"> <!-- ========== MAIN CONTENT ========== --> <main id="content"> <div class="max-w-[85rem] ztqk3 e994o tc9v9 jky26 mx-auto"> <!-- Card --> <div class="fj10a flex flex-col gaa3v v3hoh yp21z yp21z min-h-[calc(100vh-75px)] sm:min-h-[calc(100vh-104px)] kqamx t8tjb o67vx y9wzu hua1b"> <div class="relative vaohh t8tjb xx8yd fno8k dark:border-white/10 hua1b overflow-hidden"> <div class="absolute inset-0 nw84h"> <div class="bg-[linear-gradient(45deg,rgba(0,0,0,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(0,0,0,0.1)_50%,rgba(0,0,0,0.1)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_7.14%,transparent_7.14%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_57.14%,transparent_57.14%,transparent)] bg-[length:10px_10px] nw84h"></div> </div> </div> </div> <!-- End Card --> </div> </main> <!-- ========== END MAIN CONTENT ========== --> <!-- ========== FOOTER ========== --> <footer class="zyzs2 ifc3e absolute qkpim v9dw1"> <div class="max-w-[85rem] ztqk3 e994o jky26 mx-auto"> <div class="flex flex-wrap tah6m items-center g2np1"> <p class="uhey0 l92i4 q95gx"> © 2026 Preline Labs. </p> <!-- List --> <ul> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <a class="p864q focus:outline-hidden tcf24" href="#"> FAQ </a> </li> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <a class="p864q focus:outline-hidden tcf24" href="#"> License </a> </li> <li class="inline-block relative m3dme uhey0 l92i4 q95gx gx41e y1nev ziawo last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-px before:h-3.5 before:rotate-[18deg] before:bg-surface-3"> <button type="button" class="p864q focus:outline-hidden tcf24" data-hs-overlay="#hs-pro-dfkm"> <svg class="f832y t6dfr wvh3t" 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 nw84h fixed gjs78 y3c38 f0vgf overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] m4bse" 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 rnl9j opacity-0 h9v03 ducw2 a6xzj sm:w-full u9cmv sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center"> <div class="w-full eb830 flex flex-col b6tm6 t8tjb bya7c hua1b pointer-events-auto f9ny1"> <!-- Search Input --> <div class="pz76f bzdc7 jvyn5 sguje"> <div class="relative"> <div class="absolute z1h52 y3c38 flex items-center m4bse htnk8"> <svg class="f832y krmzt q95gx" 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="hd5mz a6q1l jpe30 os36w block w-full kqamx whmvu g8fkv l92i4 l2bgt wj88j focus:outline-hidden uun8o disabled:opacity-50 disabled:pointer-events-none" placeholder="Search keyboard or shortcuts"> <div class="absolute z1h52 cxpuq flex items-center m4bse htnk8"> <span class="wjlxf inline-flex gaa3v items-center ac5ar guyox kqamx t8tjb o67vx mneaq zao2n a8swc mobw6"> Cmd + K </span> </div> </div> </div> <!-- End Search Input --> <!-- Body --> <div class="v94v9 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"> <div class="fj10a space-y-5"> <div> <h4 class="l2bgt eitz2 o9e9y"> Formatting </h4> <!-- List --> <ul> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="c1g03"> Bold </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> b </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="ezbb5"> Italic </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> i </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="vzubd p295z"> Underline </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> u </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="qpsba"> Strikethrough </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Alt </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> u </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="zao2n"> Small text </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Ctrl </span> + <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> s </span> </div> </li> </ul> <!-- End List --> </div> <div> <h4 class="l2bgt eitz2 o9e9y"> Insert </h4> <!-- List --> <ul> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Mention person <a class="eitz2 zao2n d8utf q1iu5 tmkca tcf24" href="#"> (@Brian) </a> </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> @ </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Link to doc <a class="eitz2 zao2n d8utf q1iu5 tmkca tcf24" href="#"> (+Meeting notes) </a> </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> + </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span class="eitz2"> #hashtag </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> #hashtag </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Date </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /date </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Space </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Time </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /date </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> Space </span> </div> </li> <li class="flex tah6m items-center c3em3 k85z8 bgvr9 y87u5 l2bgt"> <span> Note box </span> <div class="flex n68jf"> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> /note red </span> <span class="wjlxf inline-flex gaa3v items-center ue9hi guyox kqamx t8tjb o67vx mneaq zao2n l2bgt mobw6"> 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