Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Quick Actions
Explore colorful and vibrant quick action card blocks.
Cards with Large Soft Icons
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <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="q0mum sfmpx yob35"><!-- Grid --> <div class="bd993 mpjax o672f pvgow upjw6 rhvax y0g3n"> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 d6v9w olkzo yuuoo xuytq hnilm dark:border-neutral-700 dark:text-neutral-500"> <svg class="ylm2u qdd8v" 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 dm94t i3pem hnilm dark:bg-teal-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh nwc2k 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 nlyjc i3pem hnilm dark:bg-indigo-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh ffxae 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 gxwhj i3pem hnilm dark:bg-yellow-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh a748y 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw sysy6 xfco6 wh5re dark:bg-pink-800/20" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 m5zhh i3pem hnilm dark:bg-pink-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh qw1v7 dark:text-pink-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2h10"/><path d="M5 6h14"/><rect width="18" height="12" x="3" y="10" rx="2"/></svg> </span> </div> <div class="ojv0p m2k5b"> <p class="truncate flex t2j25 items-center rz3p9 zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="ylm2u enx0e" 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="uxbqc hmnh2 b9oc8 a2c5y j1b52 jsctk bkoo1" d="M5 12h14"/><path class="zxgjb a2c5y jsctk bkoo1" 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=1.0.0"></script> </body> </html>
<!-- Grid --> <div class="bd993 mpjax o672f pvgow upjw6 rhvax y0g3n"> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 d6v9w olkzo yuuoo xuytq hnilm dark:border-neutral-700 dark:text-neutral-500"> <svg class="ylm2u qdd8v" 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Blank page </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 dm94t i3pem hnilm dark:bg-teal-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh nwc2k 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Whiteboard </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 nlyjc i3pem hnilm dark:bg-indigo-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh ffxae 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Diagram Basics </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw lx3ar aesap m457n xfco6 wh5re dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 gxwhj i3pem hnilm dark:bg-yellow-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh a748y 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="ojv0p m2k5b"> <p class="truncate zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> Empathy Maps </p> </div> </a> <!-- End Card --> <!-- Card --> <a class="dbwuq group flex egjkw sysy6 xfco6 wh5re dark:bg-pink-800/20" href="#"> <div class="vxa5s flex egjkw t2j25 items-center lcvuk"> <span class="flex t2j25 items-center dr9xk fryg7 yob35 m5zhh i3pem hnilm dark:bg-pink-800/30"> <svg class="ylm2u qdd8v tmmxo qz0fh qw1v7 dark:text-pink-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2h10"/><path d="M5 6h14"/><rect width="18" height="12" x="3" y="10" rx="2"/></svg> </span> </div> <div class="ojv0p m2k5b"> <p class="truncate flex t2j25 items-center rz3p9 zlgt1 kpvs6 mwwf4 i6scm xsobf s462w dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="ylm2u enx0e" 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="uxbqc hmnh2 b9oc8 a2c5y j1b52 jsctk bkoo1" d="M5 12h14"/><path class="zxgjb a2c5y jsctk bkoo1" d="m12 5 7 7-7 7"/></svg> </p> </div> </a> <!-- End Card --> </div> <!-- End Grid -->
Simple Bordered Card with Icon
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative y56xt lcvuk"> <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="q0mum slm31 yob35"><!-- Card --> <a class="hmkox ffza5 block kun15 sr7qy mkoko group lx3ar aesap m457n hnilm dobbe wh5re ss1ti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <div class="flex syne5 ct3wy"> <!-- Icon --> <span class="sunl2 ylm2u uiima flex t2j25 items-center i2ex5 i6scm drtn2 wfpg0 dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="qdd8v drtn2" 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 --> <div class="v6j3t"> <p class="a66ko btos2 i6scm dark:text-white"> Open </p> <p class="ibyb7 daned dark:text-neutral-500"> Open a new balance </p> </div> <!-- End Body --> </div> </a> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Card --> <a class="hmkox ffza5 block kun15 sr7qy mkoko group lx3ar aesap m457n hnilm dobbe wh5re ss1ti dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#"> <div class="flex syne5 ct3wy"> <!-- Icon --> <span class="sunl2 ylm2u uiima flex t2j25 items-center i2ex5 i6scm drtn2 wfpg0 dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="qdd8v drtn2" 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 --> <div class="v6j3t"> <p class="a66ko btos2 i6scm dark:text-white"> Open </p> <p class="ibyb7 daned dark:text-neutral-500"> Open a new balance </p> </div> <!-- End Body --> </div> </a> <!-- End Card -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close