Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Quick Actions
Explore colorful and vibrant quick action card blocks.
Cards with Large Soft Icons
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="w11y8 i65bn dyqrp mx-auto"><!-- Grid --> <div class="dmfqa hdv6z duy0w p9w5j lzzu7 h1dxu h7qtx"> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto w229a rx8hj wiva2 kvliy gelot dark:border-neutral-700 dark:text-neutral-500"> <svg class="hq6gx ca09w" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto i2fq0 zr4l6 gelot dark:bg-teal-800/30"> <svg class="hq6gx ca09w jhhpm opmyq ur0l7 dark:text-teal-500" 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 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto oz46c zr4l6 gelot dark:bg-indigo-800/30"> <svg class="hq6gx ca09w jhhpm opmyq qty5c dark:text-indigo-500" 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 5v4"/><rect width="4" height="6" x="7" y="9" rx="1"/><path d="M9 15v2"/><path d="M17 3v2"/><rect width="4" height="8" x="15" y="5" rx="1"/><path d="M17 13v3"/><path d="M3 3v18h18"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto row6h zr4l6 gelot dark:bg-yellow-800/30"> <svg class="hq6gx ca09w jhhpm opmyq a3qdf dark:text-yellow-500" 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="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col j1aaw lile3 focus:outline-hidden dark:bg-pink-800/20" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto xto9b zr4l6 gelot dark:bg-pink-800/30"> <svg class="hq6gx ca09w jhhpm opmyq gqwrq dark:text-pink-500" 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="M7 2h10"/><path d="M5 6h14"/><rect width="18" height="12" x="3" y="10" rx="2"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate flex r00n9 items-center pgjbi cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="hq6gx stqz8" 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 class="lg:opacity-0 z20vb lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lfqkc" d="M5 12h14"/><path class="z6uzq lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lfqkc" d="m12 5 7 7-7 7"/></svg> </p> </div> </a> <!-- End Card --> </div> <!-- End Grid --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Grid --> <div class="dmfqa hdv6z duy0w p9w5j lzzu7 h1dxu h7qtx"> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto w229a rx8hj wiva2 kvliy gelot dark:border-neutral-700 dark:text-neutral-500"> <svg class="hq6gx ca09w" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto i2fq0 zr4l6 gelot dark:bg-teal-800/30"> <svg class="hq6gx ca09w jhhpm opmyq ur0l7 dark:text-teal-500" 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 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto oz46c zr4l6 gelot dark:bg-indigo-800/30"> <svg class="hq6gx ca09w jhhpm opmyq qty5c dark:text-indigo-500" 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 5v4"/><rect width="4" height="6" x="7" y="9" rx="1"/><path d="M9 15v2"/><path d="M17 3v2"/><rect width="4" height="8" x="15" y="5" rx="1"/><path d="M17 13v3"/><path d="M3 3v18h18"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col oo8ro wfm4e d77gl lile3 focus:outline-hidden dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto row6h zr4l6 gelot dark:bg-yellow-800/30"> <svg class="hq6gx ca09w jhhpm opmyq a3qdf dark:text-yellow-500" 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="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="pi5e6 group flex flex-col j1aaw lile3 focus:outline-hidden dark:bg-pink-800/20" href="#"> <div class="dl93o flex flex-col r00n9 items-center qpmwn"> <span class="flex r00n9 items-center t5zar orj0l mx-auto xto9b zr4l6 gelot dark:bg-pink-800/30"> <svg class="hq6gx ca09w jhhpm opmyq gqwrq dark:text-pink-500" 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="M7 2h10"/><path d="M5 6h14"/><rect width="18" height="12" x="3" y="10" rx="2"/></svg> </span> </div> <div class="lj7mp mt-auto"> <p class="truncate flex r00n9 items-center pgjbi cm336 ozqka vo20k bp13m group-hover:text-pink-600 group-focus:text-pink-600 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="hq6gx stqz8" 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 class="lg:opacity-0 z20vb lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lfqkc" d="M5 12h14"/><path class="z6uzq lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lfqkc" d="m12 5 7 7-7 7"/></svg> </p> </div> </a> <!-- End Card --> </div> <!-- End Grid -->
Dark Card Style Button
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 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="lmi6b i65bn pvqa8 mx-auto"><!-- Button --> <button type="button" class="n33uu fkw1l dsqpx lt27r group block qgy40 eymwd cm336 psfwb zr4l6 lile3 idgjj y0d74 focus:outline-hidden xhwjq dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-200 dark:focus:bg-neutral-200" > <span class="qpmwn flex flex-col zb7az g4k9w"> <span class="flex hq6gx r00n9 items-center awhdl ev56l oo8ro bp13m oq0dt group-hover:bg-white group-hover:text-gray-900 group-focus:bg-white group-focus:text-gray-900 dark:bg-neutral-800 dark:text-white dark:group-hover:bg-neutral-900 dark:group-hover:text-white dark:group-focus:bg-neutral-900 dark:group-focus:text-white"> <svg class="hq6gx a49ku ldrf8" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> <span class="block fxenz">Add a new task</span> </span> </button> <!-- End Button --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Button --> <button type="button" class="n33uu fkw1l dsqpx lt27r group block qgy40 eymwd cm336 psfwb zr4l6 lile3 idgjj y0d74 focus:outline-hidden xhwjq dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-200 dark:focus:bg-neutral-200" > <span class="qpmwn flex flex-col zb7az g4k9w"> <span class="flex hq6gx r00n9 items-center awhdl ev56l oo8ro bp13m oq0dt group-hover:bg-white group-hover:text-gray-900 group-focus:bg-white group-focus:text-gray-900 dark:bg-neutral-800 dark:text-white dark:group-hover:bg-neutral-900 dark:group-hover:text-white dark:group-focus:bg-neutral-900 dark:group-focus:text-white"> <svg class="hq6gx a49ku ldrf8" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> <span class="block fxenz">Add a new task</span> </span> </button> <!-- End Button -->
Card Link with Icon Grid 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 vgnh1 mx-auto"> <div class="w11y8"><!-- Grid --> <div class="dmfqa mmjp9 n5y6f i5hzf aygsi kr30z"> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/personal-info.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Personal Info </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Update your details, email preferences or password </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/my-orders.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> My Orders </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Check the status of your orders or see past orders </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/addresses.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Addresses </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage your billing & shipping addresses </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/payment.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Payment </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage credit cards </p> <span class="absolute nkl04 cpkvx howv4"> <span class="hz4z9 n0mud pv9ev inline-flex r00n9 items-center pgjbi cm336 oq0dt wfm4e s2q9o bpqjq q2uog dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-500"> <span class="jjki1">Attention needed</span> </span> </span> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/email-newsletter.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Email Newsletter </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Select which emails you want to receive from us </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/gift-cards.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Gift Cards </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> View balance or redeem a card, and purchase a new Gift Card </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/returns-and-refunds.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Returns & Refunds </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage your returns and refunds </p> </a> <!-- End Account Page Preview Card --> </div> <!-- End Grid --></div></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Grid --> <div class="dmfqa mmjp9 n5y6f i5hzf aygsi kr30z"> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/personal-info.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Personal Info </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Update your details, email preferences or password </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/my-orders.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> My Orders </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Check the status of your orders or see past orders </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/addresses.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Addresses </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage your billing & shipping addresses </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/payment.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Payment </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage credit cards </p> <span class="absolute nkl04 cpkvx howv4"> <span class="hz4z9 n0mud pv9ev inline-flex r00n9 items-center pgjbi cm336 oq0dt wfm4e s2q9o bpqjq q2uog dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-500"> <span class="jjki1">Attention needed</span> </span> </span> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/email-newsletter.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Email Newsletter </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Select which emails you want to receive from us </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/gift-cards.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Gift Cards </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> View balance or redeem a card, and purchase a new Gift Card </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="pi5e6 hvu5n relative oo8ro flex flex-col lile3 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-indigo-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-indigo-600 focus:before:shadow-lg dark:bg-neutral-900 dark:before:border-neutral-700 dark:hover:before:border-indigo-500 dark:focus:before:border-indigo-500" href="../../pro/shop/returns-and-refunds.html"> <svg class="hq6gx ezw10 bp13m dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> <h4 class="o1gdb vo20k bp13m dark:text-neutral-200"> Returns & Refunds </h4> <p class="xe8oj t5ziw t6rrs dark:text-neutral-500"> Manage your returns and refunds </p> </a> <!-- End Account Page Preview Card --> </div> <!-- End Grid -->
Group Hover
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"> <!-- Transactions List Group Card --> <div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 24 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva bp13m dark:bg-neutral-700 dark:text-neutral-200 oq0dt"> C </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Costa Quinn </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 07:41 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -100 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 45,128 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 22 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva dark:bg-neutral-700 oq0dt"> <svg class="hq6gx ybw39 h-auto" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="deds1 dark:fill-neutral-200" fill="currentColor"/><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="deds1 dark:fill-neutral-200" fill="currentColor"/></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Notion Pro </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 12:05 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -48 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 44,645 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 4 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva bp13m dark:bg-neutral-700 dark:text-neutral-200 oq0dt"> J </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b u295s dark:bg-neutral-700 dark:border-neutral-900 dark:text-emerald-400 oq0dt"> <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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> James O'brien </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Received </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 09:27 PM </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Breakfast bill pay back </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 yeich"> +50 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 44,595 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws nullInitial.color oq0dt"> <svg class="hq6gx sc50o ismmg" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_16741_122308asdasd)"><path d="M16.9374 0C8.10059 0 0.937439 7.16315 0.937439 16C0.937439 24.8368 8.10059 32 16.9374 32C25.7743 32 32.9374 24.8368 32.9374 16C32.9374 7.16424 25.7743 0.00109178 16.9374 0ZM24.2753 23.0758C23.9881 23.5475 23.3735 23.6948 22.904 23.4077C19.1472 21.1117 14.4176 20.5931 8.84846 21.865C8.3113 21.9884 7.77633 21.6521 7.65405 21.115C7.53068 20.5778 7.86586 20.0429 8.40411 19.9206C14.4984 18.5286 19.7269 19.1279 23.9445 21.7045C24.4139 21.9939 24.5635 22.6063 24.2753 23.0758ZM26.2328 18.7207C25.8715 19.3081 25.1028 19.4915 24.5166 19.1312C20.2171 16.488 13.6599 15.7227 8.57333 17.2665C7.9139 17.4663 7.21734 17.094 7.01646 16.4356C6.81775 15.7762 7.19005 15.0807 7.84839 14.8798C13.6588 13.1166 20.8831 13.9704 25.8212 17.0055C26.4086 17.3669 26.5942 18.1344 26.2328 18.7207ZM26.401 14.1833C21.2434 11.1208 12.7363 10.8392 7.81236 12.3327C7.02192 12.5729 6.18561 12.1264 5.94651 11.3359C5.70742 10.5455 6.15286 9.70918 6.9444 9.46899C12.5965 7.7538 21.9913 8.08461 27.9284 11.6089C28.6391 12.0314 28.8728 12.9496 28.4513 13.6592C28.031 14.3711 27.1106 14.6058 26.401 14.1833Z" fill="currentColor"/></g><defs><clipPath id="clip0_16741_122308asdasd"><rect width="32" height="32" fill="white" transform="translate(0.937439)"/></clipPath></defs></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Spotify Premium </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 01:20 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -60 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b u295s dark:bg-neutral-700 dark:border-neutral-900 dark:text-emerald-400 oq0dt"> <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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Anna Richard </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Received </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 11:11 PM </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> September salary 2nd half </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 yeich"> +2,500 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> </div><!-- End Transactions List Group Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Transactions List Group Card --> <div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 24 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva bp13m dark:bg-neutral-700 dark:text-neutral-200 oq0dt"> C </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Costa Quinn </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 07:41 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -100 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 45,128 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 22 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva dark:bg-neutral-700 oq0dt"> <svg class="hq6gx ybw39 h-auto" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="deds1 dark:fill-neutral-200" fill="currentColor"/><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="deds1 dark:fill-neutral-200" fill="currentColor"/></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Notion Pro </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 12:05 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -48 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 44,645 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="qhmnk"> <div class="i7oig t5ziw t6rrs dark:text-neutral-500"> 4 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws rjuva bp13m dark:bg-neutral-700 dark:text-neutral-200 oq0dt"> J </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b u295s dark:bg-neutral-700 dark:border-neutral-900 dark:text-emerald-400 oq0dt"> <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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> James O'brien </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Received </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 09:27 PM </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Breakfast bill pay back </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 yeich"> +50 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 44,595 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <span class="flex hq6gx r00n9 items-center sc50o vo20k e7zws nullInitial.color oq0dt"> <svg class="hq6gx sc50o ismmg" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_16741_122308asdasd)"><path d="M16.9374 0C8.10059 0 0.937439 7.16315 0.937439 16C0.937439 24.8368 8.10059 32 16.9374 32C25.7743 32 32.9374 24.8368 32.9374 16C32.9374 7.16424 25.7743 0.00109178 16.9374 0ZM24.2753 23.0758C23.9881 23.5475 23.3735 23.6948 22.904 23.4077C19.1472 21.1117 14.4176 20.5931 8.84846 21.865C8.3113 21.9884 7.77633 21.6521 7.65405 21.115C7.53068 20.5778 7.86586 20.0429 8.40411 19.9206C14.4984 18.5286 19.7269 19.1279 23.9445 21.7045C24.4139 21.9939 24.5635 22.6063 24.2753 23.0758ZM26.2328 18.7207C25.8715 19.3081 25.1028 19.4915 24.5166 19.1312C20.2171 16.488 13.6599 15.7227 8.57333 17.2665C7.9139 17.4663 7.21734 17.094 7.01646 16.4356C6.81775 15.7762 7.19005 15.0807 7.84839 14.8798C13.6588 13.1166 20.8831 13.9704 25.8212 17.0055C26.4086 17.3669 26.5942 18.1344 26.2328 18.7207ZM26.401 14.1833C21.2434 11.1208 12.7363 10.8392 7.81236 12.3327C7.02192 12.5729 6.18561 12.1264 5.94651 11.3359C5.70742 10.5455 6.15286 9.70918 6.9444 9.46899C12.5965 7.7538 21.9913 8.08461 27.9284 11.6089C28.6391 12.0314 28.8728 12.9496 28.4513 13.6592C28.031 14.3711 27.1106 14.6058 26.401 14.1833Z" fill="currentColor"/></g><defs><clipPath id="clip0_16741_122308asdasd"><rect width="32" height="32" fill="white" transform="translate(0.937439)"/></clipPath></defs></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b bp13m dark:bg-neutral-700 dark:border-neutral-900 dark:text-neutral-200 oq0dt"> <svg class="hq6gx ibvs1" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Spotify Premium </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Sent </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 01:20 PM </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 bp13m dark:text-white"> -60 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yyez4 group flex ekyph gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/transactions-details.html"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar"> <span class="absolute flex hq6gx r00n9 items-center ca09w overflow-hidden u0s8z -end-1 oo8ro wfm4e qb17b u295s dark:bg-neutral-700 dark:border-neutral-900 dark:text-emerald-400 oq0dt"> <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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> </span> <div class="e3fpz"> <div class="flex uip67 items-center vmt4s"> <div> <h4 class="vo20k bp13m dark:text-white"> Anna Richard </h4> <ul class="flex flex-wrap"> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> Received </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> 11:11 PM </li> <li class="inline-block relative t5ziw t6rrs a498d fjqwr last-of-type:before:hidden before:absolute before:top-1/2 before:end-1.5 before:-translate-y-1/2 before:size-[3px] before:bg-gray-500 before:rounded-full dark:before:bg-neutral-500 dark:text-neutral-500"> September salary 2nd half </li> </ul> </div> <div class="cuqi8"> <p class="lt27r vo20k bie53 yeich"> +2,500 USD </p> <p class="lt27r t5ziw t6rrs dark:text-neutral-500"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> </div><!-- End Transactions List Group Card -->
List Link with Title and Avatar
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="q0znx i65bn q8ef8 mx-auto"> <!-- List --> <div class="-mx-3 flex flex-col ce0ho"> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar"> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> British Pound </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> UK sort code, Account number, IBAN </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar"> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> US Dollar </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Routing at7fl (ACH or ABA), Account number, Swift/BIC </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- List --> <div class="-mx-3 flex flex-col ce0ho"> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar"> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> British Pound </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> UK sort code, Account number, IBAN </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <img class="hq6gx exlm9 sc50o oq0dt" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar"> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> US Dollar </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Routing at7fl (ACH or ABA), Account number, Swift/BIC </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List -->
List Link with Title and Gray Background Icon
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="q0znx i65bn q8ef8 mx-auto"> <!-- List --> <div class="-mx-3 flex flex-col ce0ho"> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Scheduled transfers </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Manage transfers that are due to go out. </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Direct Debits </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Set up and manage your authorised payments. </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w -top-1 -end-1 uz0fi uy0bo dark:bg-yellow-500 dark:text-yellow-900 oq0dt"> <svg class="hq6gx stqz8" 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 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Payment requests </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> 2 unpaid </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- List --> <div class="-mx-3 flex flex-col ce0ho"> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Scheduled transfers </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Manage transfers that are due to go out. </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Direct Debits </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Set up and manage your authorised payments. </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <a class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="../../pro/payment/payments-details.html"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="M17 7 7 17"/><path d="M17 17H7V7"/></svg> </span> <span class="absolute flex hq6gx r00n9 items-center ca09w -top-1 -end-1 uz0fi uy0bo dark:bg-yellow-500 dark:text-yellow-900 oq0dt"> <svg class="hq6gx stqz8" 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 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Payment requests </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> 2 unpaid </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List -->
Grid List Link with Title and Gray Background Icon
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="q0znx i65bn q8ef8 mx-auto"><!-- List --> <div class="-mx-3 dmfqa mmjp9 n5y6f atzow"> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdvpm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Show PIN </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Card details </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdfcm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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"><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/><path d="m20 16-4-4 4-4"/><path d="m4 8 4 4-4 4"/><path d="m16 4-4 4-4-4"/><path d="m8 20 4-4 4 4"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Freeze card </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- List --> <div class="-mx-3 dmfqa mmjp9 n5y6f atzow"> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdvpm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Show PIN </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdcdm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Card details </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> <!-- Link --> <button type="button" class="yyez4 group i65bn flex items-center ekyph qgy40 gelot ksr3h focus:outline-hidden kf4z7 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" data-hs-overlay="#hs-pro-pycdfcm"> <span class="hq6gx relative sc50o"> <span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:text-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700"> <svg class="hq6gx ca09w" 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"><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/><path d="m20 16-4-4 4-4"/><path d="m4 8 4 4-4 4"/><path d="m16 4-4 4-4-4"/><path d="m8 20 4-4 4 4"/></svg> </span> </span> <span class="e3fpz"> <span class="block vo20k bp13m dark:text-neutral-200"> Freeze card </span> </span> <svg class="hq6gx nmxy2 ms-auto bp13m dark:text-neutral-200" 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> <!-- End Link --> </div> <!-- End List -->
Contacts List
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 pvqa8 mx-auto"> <div class="w11y8"><!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Chat <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">Open chat</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/><path d="M14.05 2a9 9 0 0 1 8 7.94"/><path d="M14.05 6A5 5 0 0 1 18 10"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Phone <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">(0161) 347 8854</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Email <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">Send us email</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Send us feedback </div> </div> </a> <!-- End Icon Block --></div></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Chat <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">Open chat</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/><path d="M14.05 2a9 9 0 0 1 8 7.94"/><path d="M14.05 6A5 5 0 0 1 18 10"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Phone <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">(0161) 347 8854</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Email <span class="inline-flex items-center vrcxw cm336 bp13m u17ef bneqp dark:text-neutral-200">Send us email</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex vmt4s i7oig apc69 t5ziw bp13m ps5iq ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700" href="#"> <svg class="hq6gx hxyan 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> <div class="e3fpz"> <div class="flex flex-wrap uip67 items-center h1dxu"> Send us feedback </div> </div> </a> <!-- End Icon Block -->
Simple Cards with Icons
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><!-- Card Grid --> <div class="qhmnk q0dcx flex flex-row uip67 h59sd overflow-x-auto fpl5h xlk9f osjq3 n14un dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Product </h3> <p class="e9qjd g30sc dark:text-neutral-500"> We can help to turn your great idea into a jm8xh </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m15 9-6 6"/><path d="M9 9h.01"/><path d="M15 15h.01"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Discount </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Attract new customers or reward loyal customers </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"/><path d="m7 16.5-4.74-2.85"/><path d="m7 16.5 5-3"/><path d="M7 16.5v5.17"/><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"/><path d="m17 16.5-5-3"/><path d="m17 16.5 4.74-2.85"/><path d="M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"/><path d="M12 8 7.26 5.15"/><path d="m12 8 4.74-2.85"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Collection </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Create a new collection of products </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Get paid </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Receive money with Preline's fast and secure payment </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Preline products </h3> <p class="e9qjd g30sc dark:text-neutral-500"> A collection of 100+ Preline products and more </p> </div> </a> <!-- End Card --> </div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Card Grid --> <div class="qhmnk q0dcx flex flex-row uip67 h59sd overflow-x-auto fpl5h xlk9f osjq3 n14un dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Product </h3> <p class="e9qjd g30sc dark:text-neutral-500"> We can help to turn your great idea into a jm8xh </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m15 9-6 6"/><path d="M9 9h.01"/><path d="M15 15h.01"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Discount </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Attract new customers or reward loyal customers </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"/><path d="m7 16.5-4.74-2.85"/><path d="m7 16.5 5-3"/><path d="M7 16.5v5.17"/><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"/><path d="m17 16.5-5-3"/><path d="m17 16.5 4.74-2.85"/><path d="M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"/><path d="M12 8 7.26 5.15"/><path d="m12 8 4.74-2.85"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Collection </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Create a new collection of products </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Get paid </h3> <p class="e9qjd g30sc dark:text-neutral-500"> Receive money with Preline's fast and secure payment </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="y9rk7 ba4og group pi5e6 inline-flex flex-col r00n9 items-center lj7mp oo8ro wfm4e lh7k3 lile3 hx4gm e9o97 focus:outline-hidden hsr3k f1zti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <svg class="si8if g30sc 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="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg> <div class="ymk3i"> <h3 class="t5ziw y2wul ld4jf group-hover:text-green-600 group-focus:text-green-600 dark:text-neutral-200 dark:group-hover:text-green-500 dark:group-focus:text-green-500"> Preline products </h3> <p class="e9qjd g30sc dark:text-neutral-500"> A collection of 100+ Preline products and more </p> </div> </a> <!-- End Card --> </div>
Item Summary Link Card
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 w7kls mx-auto"> <div class="lmi6b"><!-- Card --> <a class="mctd2 dkhxo relative i65bn inline-flex uip67 ekyph ps5iq wfm4e d77gl oo8ro hx4gm ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800 dark:border-neutral-700" href="#"> <svg class="hq6gx c6l91 nsx3p bp13m dark:text-neutral-300" 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="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg> <div class="e3fpz"> <span class="t5ziw vo20k bp13m dark:text-neutral-200"> Where is my order? </span> <p class="hxyan cm336 t6rrs dark:text-neutral-500"> View your order's current status by entering your order at7fl at our tracking page. </p> </div> <div class="ms-auto s1drr"> <svg class="hq6gx ca09w bp13m dark:text-neutral-200" 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> </div> </a> <!-- End Card --></div></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Card --> <a class="mctd2 dkhxo relative i65bn inline-flex uip67 ekyph ps5iq wfm4e d77gl oo8ro hx4gm ksr3h disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800 dark:border-neutral-700" href="#"> <svg class="hq6gx c6l91 nsx3p bp13m dark:text-neutral-300" 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="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg> <div class="e3fpz"> <span class="t5ziw vo20k bp13m dark:text-neutral-200"> Where is my order? </span> <p class="hxyan cm336 t6rrs dark:text-neutral-500"> View your order's current status by entering your order at7fl at our tracking page. </p> </div> <div class="ms-auto s1drr"> <svg class="hq6gx ca09w bp13m dark:text-neutral-200" 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> </div> </a> <!-- End Card -->
Simple Bordered Card with Icon
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 pvqa8 mx-auto"><!-- Card --> <a class="uaipy gs0ea block i7oig apc69 u4ydj group oo8ro wfm4e d77gl qgy40 gelot tdhmi focus:outline-hidden tme8y dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50" href="../../pro/payment/balances-open-new.html"> <span class="flex lialp uuxup"> <!-- Icon --> <span class="xe8oj hq6gx aukwz flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="ca09w oq0dt" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> <!-- End Icon --> <!-- Body --> <span class="e3fpz"> <span class="block y2wul u832x bp13m dark:text-white"> Open </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Open a new balance </span> </span> <!-- End Body --> </span> </a> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Card --> <a class="uaipy gs0ea block i7oig apc69 u4ydj group oo8ro wfm4e d77gl qgy40 gelot tdhmi focus:outline-hidden tme8y dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50" href="../../pro/payment/balances-open-new.html"> <span class="flex lialp uuxup"> <!-- Icon --> <span class="xe8oj hq6gx aukwz flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="ca09w oq0dt" 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="M5 12h14"/><path d="M12 5v14"/></svg> </span> <!-- End Icon --> <!-- Body --> <span class="e3fpz"> <span class="block y2wul u832x bp13m dark:text-white"> Open </span> <span class="block t5ziw t6rrs dark:text-neutral-500"> Open a new balance </span> </span> <!-- End Body --> </span> </a> <!-- End Card -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close