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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="tkq75 w-full m69xh mx-auto"><!-- Grid --> <div class="eebet c3dk1 admk2 u9xya u6ojw hycqn fffxg"> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto tz262 qo7tc x57xz xg6xh m5c3e"> <svg class="u5o7s o931b" 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto bm1mp m5c3e dark:bg-teal-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 qnfc9 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto j8g2m m5c3e dark:bg-indigo-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 m3v3e 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto uhksc m5c3e dark:bg-yellow-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 sy4ph 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col fqmvy v0ms9 focus:outline-hidden dark:bg-primary-800/20" href="#"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto t5rrq m5c3e dark:bg-primary-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 rhctd dark:text-primary-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="qy7me mt-auto"> <p class="truncate flex n8cvq items-center uc1pt pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> All templates <svg class="u5o7s gsbpv" 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 v3jdd lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 xt32c" d="M5 12h14"/><path class="njtaj lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 xt32c" 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=4.0.0"></script> </body> </html>
<!-- Grid --> <div class="eebet c3dk1 admk2 u9xya u6ojw hycqn fffxg"> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto tz262 qo7tc x57xz xg6xh m5c3e"> <svg class="u5o7s o931b" 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto bm1mp m5c3e dark:bg-teal-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 qnfc9 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto j8g2m m5c3e dark:bg-indigo-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 m3v3e 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col nkbv4 cdmcr bs23w v0ms9 focus:outline-hidden" href="blank-new-canvas.html"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto uhksc m5c3e dark:bg-yellow-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 sy4ph 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="qy7me mt-auto"> <p class="truncate pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="lybw0 group flex flex-col fqmvy v0ms9 focus:outline-hidden dark:bg-primary-800/20" href="#"> <div class="zr0sc flex flex-col n8cvq items-center jfdv6"> <span class="flex n8cvq items-center lfcbs u5ee6 mx-auto t5rrq m5c3e dark:bg-primary-800/30"> <svg class="u5o7s o931b nxjhd ckyr6 rhctd dark:text-primary-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="qy7me mt-auto"> <p class="truncate flex n8cvq items-center uc1pt pwhcc raosg jywe6 t0mvh group-hover:text-primary-hover group-focus:text-primary-focus"> All templates <svg class="u5o7s gsbpv" 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 v3jdd lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 xt32c" d="M5 12h14"/><path class="njtaj lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 xt32c" d="m12 5 7 7-7 7"/></svg> </p> </div> </a> <!-- End Card --> </div> <!-- End Grid -->
Inbox Demo: Button Links in Dark Background
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="tkq75"><!-- Save/Discard/Detel Floating Card --> <div id="hs-pro-pctdb" class=" pgq9e de9a1 w-full p0xp8 mx-auto hs-removing:translate-y-5 hs-removing:opacity-0 ru91y s22ri"> <div class="z7pqh r9grl tlu34 zf1zr"> <div class="flex tv8hq items-center bm2sb"> <div class="flex items-center gs0q7"> <span class="r0egb rlbfw jv78i flex u5o7s n8cvq items-center d6j2m vbfe4 text-[13px] zf1zr">2</span> <span class="o6f5t swo1p"> Selected </span> </div> <div class="inline-flex items-center uc1pt xnqaj"> <div class="inline-flex items-center gs0q7 hkmdt"> <a class="yrj6t sm:size-auto inline-flex n8cvq items-center nyjqy swo1p sso55 o6f5t zf1zr g2l0z focus:outline-hidden knsmk cebn0 r8hno" href="#"> <svg class="u5o7s gsbpv" 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.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg> <span class="hidden sm:inline-block">Send email</span> </a> <div class="altxz mhdnt vgspm"></div> <a class="yrj6t sm:size-auto inline-flex n8cvq items-center nyjqy psvex sso55 o6f5t zf1zr g2l0z focus:outline-hidden l4sfw cebn0 r8hno" href="#"> <svg class="u5o7s gsbpv" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg> <span class="hidden sm:inline-block">Delete</span> </a> </div> <!-- Close Button --> <button type="button" class="yrj6t inline-flex n8cvq items-center gs0q7 zf1zr swo1p whiua focus:outline-hidden knsmk disabled:opacity-50 disabled:pointer-events-none" data-hs-remove-element="#hs-pro-pctdb"> <span class="ly5bo">Close</span> <svg class="u5o7s y2ebh" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <!-- End Close Button --> </div> </div> </div> </div> <!-- Endn Save/Discard/Detel Floating Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Save/Discard/Detel Floating Card --> <div id="hs-pro-pctdb" class="fixed vwz2e fnczm -translate-x-1/2 pgq9e de9a1 w-full p0xp8 mx-auto hs-removing:translate-y-5 hs-removing:opacity-0 ru91y s22ri"> <div class="z7pqh r9grl tlu34 zf1zr"> <div class="flex tv8hq items-center bm2sb"> <div class="flex items-center gs0q7"> <span class="r0egb rlbfw jv78i flex u5o7s n8cvq items-center d6j2m vbfe4 text-[13px] zf1zr">2</span> <span class="o6f5t swo1p"> Selected </span> </div> <div class="inline-flex items-center uc1pt xnqaj"> <div class="inline-flex items-center gs0q7 hkmdt"> <a class="yrj6t sm:size-auto inline-flex n8cvq items-center nyjqy swo1p sso55 o6f5t zf1zr g2l0z focus:outline-hidden knsmk cebn0 r8hno" href="#"> <svg class="u5o7s gsbpv" 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.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg> <span class="hidden sm:inline-block">Send email</span> </a> <div class="altxz mhdnt vgspm"></div> <a class="yrj6t sm:size-auto inline-flex n8cvq items-center nyjqy psvex sso55 o6f5t zf1zr g2l0z focus:outline-hidden l4sfw cebn0 r8hno" href="#"> <svg class="u5o7s gsbpv" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg> <span class="hidden sm:inline-block">Delete</span> </a> </div> <!-- Close Button --> <button type="button" class="yrj6t inline-flex n8cvq items-center gs0q7 zf1zr swo1p whiua focus:outline-hidden knsmk disabled:opacity-50 disabled:pointer-events-none" data-hs-remove-element="#hs-pro-pctdb"> <span class="ly5bo">Close</span> <svg class="u5o7s y2ebh" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <!-- End Close Button --> </div> </div> </div> </div> <!-- Endn Save/Discard/Detel Floating Card -->
E-commerce Demo: Button Links in Dark Background
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="tkq75"><!-- Save/Discard/Detel Floating Card --> <div class=" pgq9e de9a1 w-full p0xp8 mx-auto hs-removing:translate-y-5 hs-removing:opacity-0 ru91y s22ri"> <div class="skbhe hlnh9 mwjmx tlu34 zf1zr u14vs"> <div class="flex tv8hq items-center bm2sb"> <a class="psvex sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit" href="#">Delete</a> <div class="inline-flex items-center gs0q7"> <a class="v7fi8 sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit" href="#">Cancel</a> <div class="mhdnt lt7c1 wabp4"></div> <a class="oux0i sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit dark:text-primary-500" href="#">Save changes</a> <!-- Close Button --> <button type="button" class="yrj6t inline-flex n8cvq items-center gs0q7 zf1zr swo1p whiua focus:outline-hidden knsmk disabled:opacity-50 disabled:pointer-events-none" aria-label="Close"> <span class="ly5bo">Close</span> <svg class="u5o7s y2ebh" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <!-- End Close Button --> </div> </div> </div> </div> <!-- Endn Save/Discard/Detel Floating Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Save/Discard/Detel Floating Card --> <div class="fixed vwz2e fnczm -translate-x-1/2 pgq9e de9a1 w-full p0xp8 mx-auto hs-removing:translate-y-5 hs-removing:opacity-0 ru91y s22ri"> <div class="skbhe hlnh9 mwjmx tlu34 zf1zr u14vs"> <div class="flex tv8hq items-center bm2sb"> <a class="psvex sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit" href="#">Delete</a> <div class="inline-flex items-center gs0q7"> <a class="v7fi8 sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit" href="#">Cancel</a> <div class="mhdnt lt7c1 wabp4"></div> <a class="oux0i sso55 jywe6 o6f5t gy8xr focus:outline-hidden mtsit dark:text-primary-500" href="#">Save changes</a> <!-- Close Button --> <button type="button" class="yrj6t inline-flex n8cvq items-center gs0q7 zf1zr swo1p whiua focus:outline-hidden knsmk disabled:opacity-50 disabled:pointer-events-none" aria-label="Close"> <span class="ly5bo">Close</span> <svg class="u5o7s y2ebh" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <!-- End Close Button --> </div> </div> </div> </div> <!-- Endn Save/Discard/Detel Floating Card -->
Dark Card Style Button
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="jl4c9 w-full ctmpc mx-auto"><!-- Button --> <button type="button" class="z7pqh dpvgc iblus yx5cx group block r16fm tlu34 pwhcc f2yvx swo1p v0ms9 qubpl whiua focus:outline-hidden ht7g1" > <span class="jfdv6 flex flex-col tvmuq tr5jx"> <span class="flex u5o7s n8cvq items-center dguee t8upc cyaqi va8bq zf1zr"> <svg class="u5o7s clxek zmzyp" 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 l0vz8">Add a new task</span> </span> </button> <!-- End Button --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Button --> <button type="button" class="z7pqh dpvgc iblus yx5cx group block r16fm tlu34 pwhcc f2yvx swo1p v0ms9 qubpl whiua focus:outline-hidden ht7g1" > <span class="jfdv6 flex flex-col tvmuq tr5jx"> <span class="flex u5o7s n8cvq items-center dguee t8upc cyaqi va8bq zf1zr"> <svg class="u5o7s clxek zmzyp" 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 l0vz8">Add a new task</span> </span> </button> <!-- End Button -->
Card Link with Icon Grid View
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="w-full dbti1 mx-auto"> <div class="tkq75"><!-- Grid --> <div class="eebet xnuqn drcaa ae6dr u716i xoj2u"> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/personal-info.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Personal Info </h4> <p class="iibie o6f5t sfddw"> Update your details, email preferences or password </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/my-orders.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> My Orders </h4> <p class="iibie o6f5t sfddw"> Check the status of your orders or see past orders </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/addresses.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Addresses </h4> <p class="iibie o6f5t sfddw"> Manage your billing & shipping addresses </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/payment.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Payment </h4> <p class="iibie o6f5t sfddw"> Manage credit cards </p> <span class="absolute a2i1l jr47n eyg1q"> <span class="u4vox yb8d7 y468j inline-flex n8cvq items-center uc1pt pwhcc zf1zr cdmcr lrjvj t2rnb pbxkg dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-500"> <span class="bmdw6">Attention needed</span> </span> </span> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/email-newsletter.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Email Newsletter </h4> <p class="iibie o6f5t sfddw"> Select which emails you want to receive from us </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/gift-cards.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Gift Cards </h4> <p class="iibie o6f5t sfddw"> 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="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/returns-and-refunds.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Returns & Refunds </h4> <p class="iibie o6f5t sfddw"> 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=4.0.0"></script> </body> </html>
<!-- Grid --> <div class="eebet xnuqn drcaa ae6dr u716i xoj2u"> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/personal-info.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Personal Info </h4> <p class="iibie o6f5t sfddw"> Update your details, email preferences or password </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/my-orders.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> My Orders </h4> <p class="iibie o6f5t sfddw"> Check the status of your orders or see past orders </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/addresses.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Addresses </h4> <p class="iibie o6f5t sfddw"> Manage your billing & shipping addresses </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/payment.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Payment </h4> <p class="iibie o6f5t sfddw"> Manage credit cards </p> <span class="absolute a2i1l jr47n eyg1q"> <span class="u4vox yb8d7 y468j inline-flex n8cvq items-center uc1pt pwhcc zf1zr cdmcr lrjvj t2rnb pbxkg dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-500"> <span class="bmdw6">Attention needed</span> </span> </span> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/email-newsletter.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Email Newsletter </h4> <p class="iibie o6f5t sfddw"> Select which emails you want to receive from us </p> </a> <!-- End Account Page Preview Card --> <!-- Account Page Preview Card --> <a class="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/gift-cards.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Gift Cards </h4> <p class="iibie o6f5t sfddw"> 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="lybw0 py2f7 relative nkbv4 flex flex-col v0ms9 focus:outline-hidden before:absolute before:inset-0 before:z-10 before:border before:border-card-line before:rounded-xl before:transition hover:before:border-2 hover:before:border-primary-hover hover:before:shadow-lg focus:before:border-2 focus:before:border-primary-focus focus:before:shadow-lg" href="../../pro/shop/returns-and-refunds.html"> <svg class="u5o7s xz1rw t0mvh" 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="rh3gh jywe6 t0mvh"> Returns & Refunds </h4> <p class="iibie o6f5t sfddw"> Manage your returns and refunds </p> </a> <!-- End Account Page Preview Card --> </div> <!-- End Grid -->
Group Hover
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full x2wru mx-auto tkq75 cyl3m dark:bg-neutral-900"> <!-- Transactions List Group Card --> <div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 24 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 z5a9u zf1zr"> C </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Costa Quinn </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 07:41 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -100 USD </p> <p class="yx5cx o6f5t sfddw"> 45,128 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 22 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 zf1zr"> <svg class="u5o7s c5tpz 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="wvyzg" 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="wvyzg" fill="currentColor"/></svg> </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Notion Pro </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 12:05 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -48 USD </p> <p class="yx5cx o6f5t sfddw"> 44,645 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 4 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 z5a9u zf1zr"> J </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a hacrd zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> James O'brien </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Received </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 09:27 PM </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Breakfast bill pay back </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru q07hl"> +50 USD </p> <p class="yx5cx o6f5t sfddw"> 44,595 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb nullInitial.color zf1zr"> <svg class="u5o7s kmbfr t99by" 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 u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Spotify Premium </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 01:20 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -60 USD </p> <p class="yx5cx o6f5t sfddw"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" 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 u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a hacrd zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Anna Richard </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Received </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 11:11 PM </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> September salary 2nd half </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru q07hl"> +2,500 USD </p> <p class="yx5cx o6f5t sfddw"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> </div><!-- End Transactions List Group Card --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Transactions List Group Card --> <div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 24 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 z5a9u zf1zr"> C </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Costa Quinn </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 07:41 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -100 USD </p> <p class="yx5cx o6f5t sfddw"> 45,128 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 22 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 zf1zr"> <svg class="u5o7s c5tpz 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="wvyzg" 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="wvyzg" fill="currentColor"/></svg> </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Notion Pro </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 12:05 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -48 USD </p> <p class="yx5cx o6f5t sfddw"> 44,645 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> </div> <!-- End List --> </div> <div class="xu396"> <div class="skbhe o6f5t sfddw"> 4 October, 2024 </div> <!-- List --> <div class="-mx-3"> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb fpd35 z5a9u zf1zr"> J </span> <span class="absolute flex u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a hacrd zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> James O'brien </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Received </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 09:27 PM </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Breakfast bill pay back </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru q07hl"> +50 USD </p> <p class="yx5cx o6f5t sfddw"> 44,595 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <span class="flex u5o7s n8cvq items-center kmbfr jywe6 haptb nullInitial.color zf1zr"> <svg class="u5o7s kmbfr t99by" 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 u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a va8bq zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Spotify Premium </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Sent </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 01:20 PM </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru t0mvh"> -60 USD </p> <p class="yx5cx o6f5t sfddw"> 42,095 USD </p> </div> </div> </div> <!-- End Col --> </a> <!-- End List Item --> <!-- List Item --> <a class="yfrh0 group flex d1k1l m5c3e pawa6 focus:outline-hidden bdxng" href="../../pro/payment/transactions-details.html"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" 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 u5o7s n8cvq items-center o931b overflow-hidden vwz2e -end-1 cyaqi cdmcr n9r3a hacrd zf1zr"> <svg class="u5o7s y2ebh" 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="r0vjv"> <div class="flex tv8hq items-center bm2sb"> <div> <h4 class="jywe6 t0mvh"> Anna Richard </h4> <ul class="flex flex-wrap"> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> Received </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> 11:11 PM </li> <li class="inline-block relative o6f5t sfddw vblxw vzth6 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-surface-4 before:rounded-full"> September salary 2nd half </li> </ul> </div> <div class="x5dvy"> <p class="yx5cx jywe6 qa9ru q07hl"> +2,500 USD </p> <p class="yx5cx o6f5t sfddw"> 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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full x2wru mx-auto y91dr cyl3m dark:bg-neutral-900"> <!-- List --> <div class="-mx-3 flex flex-col gzu19"> <!-- Link --> <button type="button" class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar"> </span> <span class="r0vjv"> <span class="block jywe6 t0mvh"> British Pound </span> <span class="block o6f5t sfddw"> UK sort code, Account number, IBAN </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar"> </span> <span class="r0vjv"> <span class="block jywe6 t0mvh"> US Dollar </span> <span class="block o6f5t sfddw"> Routing r5maq (ACH or ABA), Account number, Swift/BIC </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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 --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- List --> <div class="-mx-3 flex flex-col gzu19"> <!-- Link --> <button type="button" class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar"> </span> <span class="r0vjv"> <span class="block jywe6 t0mvh"> British Pound </span> <span class="block o6f5t sfddw"> UK sort code, Account number, IBAN </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <img class="u5o7s q678q kmbfr zf1zr" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar"> </span> <span class="r0vjv"> <span class="block jywe6 t0mvh"> US Dollar </span> <span class="block o6f5t sfddw"> Routing r5maq (ACH or ABA), Account number, Swift/BIC </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full x2wru mx-auto y91dr cyl3m dark:bg-neutral-900"> <!-- List --> <div class="-mx-3 flex flex-col gzu19"> <!-- Link --> <a class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Scheduled transfers </span> <span class="block o6f5t sfddw"> Manage transfers that are due to go out. </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Direct Debits </span> <span class="block o6f5t sfddw"> Set up and manage your authorised payments. </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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 u5o7s n8cvq items-center o931b -top-1 -end-1 wxzak e4s2q dark:bg-yellow-500 dark:text-yellow-900 zf1zr"> <svg class="u5o7s gsbpv" 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="r0vjv"> <span class="block jywe6 t0mvh"> Payment requests </span> <span class="block o6f5t sfddw"> 2 unpaid </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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 --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- List --> <div class="-mx-3 flex flex-col gzu19"> <!-- Link --> <a class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Scheduled transfers </span> <span class="block o6f5t sfddw"> Manage transfers that are due to go out. </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Direct Debits </span> <span class="block o6f5t sfddw"> Set up and manage your authorised payments. </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" href="../../pro/payment/payments-details.html"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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 u5o7s n8cvq items-center o931b -top-1 -end-1 wxzak e4s2q dark:bg-yellow-500 dark:text-yellow-900 zf1zr"> <svg class="u5o7s gsbpv" 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="r0vjv"> <span class="block jywe6 t0mvh"> Payment requests </span> <span class="block o6f5t sfddw"> 2 unpaid </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full x2wru mx-auto y91dr cyl3m dark:bg-neutral-900"><!-- List --> <div class="-mx-3 eebet xnuqn drcaa ftiw9"> <!-- Link --> <button type="button" class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdvpm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Show PIN </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Card details </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdfcm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Freeze card </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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 --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- List --> <div class="-mx-3 eebet xnuqn drcaa ftiw9"> <!-- Link --> <button type="button" class="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdvpm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Show PIN </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdcdm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Card details </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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="yfrh0 group w-full flex items-center d1k1l r16fm m5c3e pawa6 focus:outline-hidden jg8fm" data-hs-overlay="#hs-pro-pycdfcm"> <span class="u5o7s relative kmbfr"> <span class="u5o7s kmbfr inline-flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover group-focus:bg-surface-focus"> <svg class="u5o7s o931b" 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="r0vjv"> <span class="block jywe6 t0mvh"> Freeze card </span> </span> <svg class="u5o7s cyhy2 ms-auto t0mvh" 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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full ctmpc mx-auto tkq75 cyl3m dark:bg-neutral-900"><!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Chat <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">Open chat</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Phone <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">(0161) 347 8854</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Email <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">Send us email</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Send us feedback </div> </div> </a> <!-- End Icon Block --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Chat <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">Open chat</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Phone <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">(0161) 347 8854</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Email <span class="inline-flex items-center nyjqy pwhcc l84hp v12yt b3w12">Send us email</span> </div> </div> </a> <!-- End Icon Block --> <!-- Icon Block --> <a class="flex bm2sb skbhe wgmrx o6f5t l84hp g4xl4 ez4p2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dpumf" href="#"> <svg class="u5o7s jcsz9 y2ebh" 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="r0vjv"> <div class="flex flex-wrap tv8hq items-center hycqn"> Send us feedback </div> </div> </a> <!-- End Icon Block -->
User Details with More Buttons on Hover
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="w-full p0xp8 mx-auto jl4c9 cyl3m dark:bg-neutral-900"><!-- List Group --> <div class="space-y-1"> <!-- Item --> <div id="hs-pro-cremudb1" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <img class="u5o7s mx-auto o931b zf1zr" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"><span class="absolute -bottom-0.5 -end-0.5 flex n8cvq items-center clxek xpmro cdmcr cmkzc qq6w3 zf1zr"> <svg class="u5o7s svrh8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> </span> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> James Collison </span> <small class="block text-[11px] truncate sfddw"> organizer </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb1"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> <!-- Item --> <div id="hs-pro-cremudb2" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <img class="u5o7s mx-auto o931b zf1zr" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> Daniel Hobbs </span> <small class="block text-[11px] truncate sfddw"> dhobbs@site.com </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb2"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> <!-- Item --> <div id="hs-pro-cremudb3" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <span class="flex u5o7s n8cvq items-center o931b fpd35 sfddw text-[11px] janna zf1zr">L</span> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> Liza Harrison </span> <small class="block text-[11px] truncate sfddw"> liza@site.com </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb3"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> </div> <!-- End List Group --> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- List Group --> <div class="space-y-1"> <!-- Item --> <div id="hs-pro-cremudb1" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <img class="u5o7s mx-auto o931b zf1zr" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"><span class="absolute -bottom-0.5 -end-0.5 flex n8cvq items-center clxek xpmro cdmcr cmkzc qq6w3 zf1zr"> <svg class="u5o7s svrh8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> </span> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> James Collison </span> <small class="block text-[11px] truncate sfddw"> organizer </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb1"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> <!-- Item --> <div id="hs-pro-cremudb2" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <img class="u5o7s mx-auto o931b zf1zr" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> Daniel Hobbs </span> <small class="block text-[11px] truncate sfddw"> dhobbs@site.com </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb2"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> <!-- Item --> <div id="hs-pro-cremudb3" class="relative u3mhe c2otw group flex flex-wrap tv8hq items-center b3fdm g4xl4 f4e8k"> <!-- User --> <div class="r0vjv w-full"> <div class="flex gs0q7"> <div class="u5o7s"> <div class="relative u5o7s"> <span class="flex u5o7s n8cvq items-center o931b fpd35 sfddw text-[11px] janna zf1zr">L</span> </div> </div> <div class="r0vjv truncate jwj1v"> <span class="block text-[13px] truncate t0mvh"> Liza Harrison </span> <small class="block text-[11px] truncate sfddw"> liza@site.com </small> </div> </div> </div> <!-- End User --> <!-- Button Group --> <div class="absolute vupxm jr47n -translate-y-1/2 flex items-center uc1pt lg:opacity-0 lg:group-hover:opacity-100"> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Show/Hide</span> <svg class="u5o7s gsbpv" 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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> <svg class="hidden u5o7s gsbpv" 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.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Hide </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l"> <span class="ly5bo">Mark optional</span> <svg class="u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Mark optional </span> </div> <div class="hs-tooltip inline-block"> <button type="button" class="xz1rw u5o7s inline-flex n8cvq items-center gs0q7 zf1zr cdmcr n9r3a xg6xh kc05o disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" data-hs-remove-element="#hs-pro-cremudb3"> <span class="ly5bo">Remove</span> <svg class="u5o7s gsbpv" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute q2770 ekpqr g57km avi8i v7c8t cdmcr y6g92 qy7me pwhcc igsov g4xl4" role="tooltip"> Remove </span> </div> </div> <!-- End Button Group --> </div> <!-- End Item --> </div> <!-- End List Group -->
Simple Cards with Icons
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="xu396 uay5h flex flex-row tv8hq rqt4h overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Product </h3> <p class="text-[13px] sfddw"> We can help to turn your great idea into a mb9r4 </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Discount </h3> <p class="text-[13px] sfddw"> Attract new customers or reward loyal customers </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Collection </h3> <p class="text-[13px] sfddw"> Create a new collection of products </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Get paid </h3> <p class="text-[13px] sfddw"> Receive money with Preline's fast and secure payment </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Preline products </h3> <p class="text-[13px] sfddw"> A collection of 100+ Preline products and more </p> </div> </a> <!-- End Card --> </div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Card Grid --> <div class="xu396 uay5h flex flex-row tv8hq rqt4h overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Product </h3> <p class="text-[13px] sfddw"> We can help to turn your great idea into a mb9r4 </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Discount </h3> <p class="text-[13px] sfddw"> Attract new customers or reward loyal customers </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Collection </h3> <p class="text-[13px] sfddw"> Create a new collection of products </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Get paid </h3> <p class="text-[13px] sfddw"> Receive money with Preline's fast and secure payment </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="ksjpu vrdtj group lybw0 inline-flex flex-col n8cvq items-center qy7me cyaqi cdmcr nuipg v0ms9 xbcbd zeljx focus:outline-hidden liuse ru91y" href="#"> <svg class="d1miq sfddw" 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="qwhpv"> <h3 class="o6f5t janna t0mvh group-hover:text-primary group-focus:text-primary"> Preline products </h3> <p class="text-[13px] sfddw"> A collection of 100+ Preline products and more </p> </div> </a> <!-- End Card --> </div>
Item Summary Link Card
Preview
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <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="w-full p0xp8 mx-auto"> <div class="jl4c9"><!-- Card --> <a class="apz7p dnycu relative w-full inline-flex tv8hq d1k1l g4xl4 nkbv4 cdmcr bs23w xbcbd pawa6 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden jg8fm" href="#"> <svg class="u5o7s gfpzy nu9b6 t0mvh" 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="r0vjv"> <span class="o6f5t jywe6 t0mvh"> Where is my order? </span> <p class="jcsz9 pwhcc sfddw"> View your order's current status by entering your order r5maq at our tracking page. </p> </div> <div class="ms-auto eygij"> <svg class="u5o7s o931b t0mvh" 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=4.0.0"></script> </body> </html>
<!-- Card --> <a class="apz7p dnycu relative w-full inline-flex tv8hq d1k1l g4xl4 nkbv4 cdmcr bs23w xbcbd pawa6 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden jg8fm" href="#"> <svg class="u5o7s gfpzy nu9b6 t0mvh" 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="r0vjv"> <span class="o6f5t jywe6 t0mvh"> Where is my order? </span> <p class="jcsz9 pwhcc sfddw"> View your order's current status by entering your order r5maq at our tracking page. </p> </div> <div class="ms-auto eygij"> <svg class="u5o7s o931b t0mvh" 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
Theme:
Default
Harvest
Retro
Ocean
Autumn
Moon
Bubblegum
Cashmere
Olive
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative pdjr6 jfdv6"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="jl4c9"> <div class="w-full ctmpc mx-auto"><!-- Card --> <a class="qzv71 qh4we block skbhe wgmrx u2hr6 group nkbv4 cdmcr bs23w r16fm m5c3e ssnal focus:outline-hidden tw8rh" href="../../pro/payment/balances-open-new.html"> <span class="flex gs0q7 k8ol6"> <!-- Icon --> <span class="iibie u5o7s yrj6t flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover"> <svg class="o931b zf1zr" 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="r0vjv"> <span class="block janna xqsmy t0mvh"> Open </span> <span class="block o6f5t sfddw"> Open a new balance </span> </span> <!-- End Body --> </span> </a> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script> </body> </html>
<!-- Card --> <a class="qzv71 qh4we block skbhe wgmrx u2hr6 group nkbv4 cdmcr bs23w r16fm m5c3e ssnal focus:outline-hidden tw8rh" href="../../pro/payment/balances-open-new.html"> <span class="flex gs0q7 k8ol6"> <!-- Icon --> <span class="iibie u5o7s yrj6t flex n8cvq items-center u21io z5a9u zf1zr group-hover:bg-surface-hover"> <svg class="o931b zf1zr" 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="r0vjv"> <span class="block janna xqsmy t0mvh"> Open </span> <span class="block o6f5t sfddw"> 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