Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Inline Cards
Description goes here.
Floating User Images
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative um8nq qpmwn"> <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> <div class="i65bn dyqrp mx-auto"><!-- Card --> <div class="vx340 blhyt relative overflow-hidden lj7mp oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="relative bo1ta"> <h3 class="oqlim gw0wn y2wul bp13m dark:text-neutral-200"> Invite friends </h3> <p class="xe8oj t6rrs dark:text-neutral-500"> Invite teammates to collaborate in Preline </p> <div class="ymk3i vmrir"> <button type="button" class="i7oig apc69 inline-flex items-center lialp t5ziw vo20k ps5iq wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-dshm"> Send an invite </button> </div> </div> <div class="absolute cgfc6 t6rkx"> <img class="hq6gx qil8e oq0dt" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute xegm8 f0r57"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute gzekm w4i5y"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute l2aer u4xg0"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute -top-5 ri8vz"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute lyr45 wvddb"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute xegm8 jszs3"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute gzekm ri8vz"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute l2aer pip1p"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> </div> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Card --> <div class="vx340 blhyt relative overflow-hidden lj7mp oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="relative bo1ta"> <h3 class="oqlim gw0wn y2wul bp13m dark:text-neutral-200"> Invite friends </h3> <p class="xe8oj t6rrs dark:text-neutral-500"> Invite teammates to collaborate in Preline </p> <div class="ymk3i vmrir"> <button type="button" class="i7oig apc69 inline-flex items-center lialp t5ziw vo20k ps5iq wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-dshm"> Send an invite </button> </div> </div> <div class="absolute cgfc6 t6rkx"> <img class="hq6gx qil8e oq0dt" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute xegm8 f0r57"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1659482634023-2c4fda99ac0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute gzekm w4i5y"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1568048689711-5e0325cea8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute l2aer u4xg0"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute -top-5 ri8vz"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute lyr45 wvddb"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute xegm8 jszs3"> <img class="hq6gx c27xm oq0dt" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar"> </div> <div class="hidden sm:block absolute gzekm ri8vz"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> <div class="absolute l2aer pip1p"> <img class="hq6gx aukwz oq0dt" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> </div> </div> <!-- End Card -->
Inline with Image with List View
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative um8nq qpmwn"> <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> <div class="i65bn q8ef8 mx-auto"><div class="space-y-4"> <!-- Card --> <div class="xlz15 oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="dmfqa q2rai h59sd"> <div class="j4s7i a6hr7"> <div class="agawe lile3 overflow-hidden dark:bg-neutral-700"> <img class="mdgiz wsbn4 i65bn" src="../../assets/svg/pro/analytics-demo.svg" alt="Template Image"> </div> </div> <!-- End Col --> <div class="y4duw fyaqk"> <div class="qpmwn flex flex-col uip67 space-y-3"> <div> <h3 class="u832x bie53 y2wul bp13m dark:text-neutral-200"> Explore the most popular Preline dashboard templates </h3> <p class="xe8oj itp5n t6rrs dark:text-neutral-500"> Grab the ones that fit your marketing strategy </p> </div> <p> <a class="inline-flex items-center pgjbi t5ziw rwtxm ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-blue-400 dark:hover:text-blue-500" href="#"> Explore templates <svg class="hq6gx ibvs1" 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> </a> </p> </div> </div> <!-- End Col --> </div> </div> <!-- End Card --> <!-- Card --> <div class="xlz15 oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="dmfqa q2rai h59sd"> <div class="j4s7i a6hr7"><div class="c32br lile3 overflow-hidden dark:bg-blue-900"> <img class="mdgiz wsbn4 i65bn" src="../../assets/svg/pro/analytics-demo.svg" alt="Template Image"> </div> </div> <!-- End Col --> <div class="y4duw fyaqk"> <div class="qpmwn flex flex-col uip67 space-y-3"> <div> <h3 class="u832x bie53 y2wul bp13m dark:text-neutral-200"> Documentation </h3> <p class="xe8oj itp5n t6rrs dark:text-neutral-500"> Whether you're a startup or a global enterprise, learn how to integrate with Preline. </p> </div> <p> <a class="inline-flex items-center pgjbi t5ziw rwtxm ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-blue-400 dark:hover:text-blue-500" href="#"> Learn more <svg class="hq6gx ibvs1" 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> </a> </p> </div> </div> <!-- End Col --> </div> </div> <!-- End Card --> </div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<div class="space-y-4"> <!-- Card --> <div class="xlz15 oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="dmfqa q2rai h59sd"> <div class="j4s7i a6hr7"> <div class="agawe lile3 overflow-hidden dark:bg-neutral-700"> <img class="mdgiz wsbn4 i65bn" src="../../assets/svg/pro/analytics-demo.svg" alt="Template Image"> </div> </div> <!-- End Col --> <div class="y4duw fyaqk"> <div class="qpmwn flex flex-col uip67 space-y-3"> <div> <h3 class="u832x bie53 y2wul bp13m dark:text-neutral-200"> Explore the most popular Preline dashboard templates </h3> <p class="xe8oj itp5n t6rrs dark:text-neutral-500"> Grab the ones that fit your marketing strategy </p> </div> <p> <a class="inline-flex items-center pgjbi t5ziw rwtxm ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-blue-400 dark:hover:text-blue-500" href="#"> Explore templates <svg class="hq6gx ibvs1" 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> </a> </p> </div> </div> <!-- End Col --> </div> </div> <!-- End Card --> <!-- Card --> <div class="xlz15 oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="dmfqa q2rai h59sd"> <div class="j4s7i a6hr7"><div class="c32br lile3 overflow-hidden dark:bg-blue-900"> <img class="mdgiz wsbn4 i65bn" src="../../assets/svg/pro/analytics-demo.svg" alt="Template Image"> </div> </div> <!-- End Col --> <div class="y4duw fyaqk"> <div class="qpmwn flex flex-col uip67 space-y-3"> <div> <h3 class="u832x bie53 y2wul bp13m dark:text-neutral-200"> Documentation </h3> <p class="xe8oj itp5n t6rrs dark:text-neutral-500"> Whether you're a startup or a global enterprise, learn how to integrate with Preline. </p> </div> <p> <a class="inline-flex items-center pgjbi t5ziw rwtxm ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-blue-400 dark:hover:text-blue-500" href="#"> Learn more <svg class="hq6gx ibvs1" 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> </a> </p> </div> </div> <!-- End Col --> </div> </div> <!-- End Card --> </div>
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close