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 h3sa8 du2fm"> <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 by07k pvi3v"><!-- Grid --> <div class="o4dae ytg72 ricb0 n7gog j7mma sapo1 rnqqg"> <!-- Card --> <a class="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v nxrj6 q702b p0r8k w8otv i3mh9 dark:border-neutral-700 dark:text-neutral-500"> <svg class="xqknn t0r8j" 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v zbk2a txh0b i3mh9 dark:bg-teal-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 td7hl 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v sgqov txh0b i3mh9 dark:bg-indigo-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 sus8p 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v c32mp txh0b i3mh9 dark:bg-yellow-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 mtun9 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns g34cp u33oi t4rxa dark:bg-pink-800/20" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v eqa6v txh0b i3mh9 dark:bg-pink-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 o9zgw 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="iieae mieg5"> <p class="truncate flex a459h items-center o9jhx egssd ovunq zd5ha t4wtn rn69t s62a8 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="xqknn ccfki" 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="gauz8 zifd0 g9sff stepa wv7e9 p0cdv bqowq" d="M5 12h14"/><path class="ltv5h stepa p0cdv bqowq" 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="o4dae ytg72 ricb0 n7gog j7mma sapo1 rnqqg"> <!-- Card --> <a class="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v nxrj6 q702b p0r8k w8otv i3mh9 dark:border-neutral-700 dark:text-neutral-500"> <svg class="xqknn t0r8j" 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v zbk2a txh0b i3mh9 dark:bg-teal-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 td7hl 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v sgqov txh0b i3mh9 dark:bg-indigo-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 sus8p 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns nz7b4 qm5z2 khwhk u33oi t4rxa dark:bg-neutral-900 dark:border-neutral-700" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v c32mp txh0b i3mh9 dark:bg-yellow-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 mtun9 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="iieae mieg5"> <p class="truncate egssd ovunq zd5ha t4wtn rn69t s62a8 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="cz83v group flex ao3ns g34cp u33oi t4rxa dark:bg-pink-800/20" href="#"> <div class="wardh flex ao3ns a459h items-center du2fm"> <span class="flex a459h items-center vdgjn x6hp5 pvi3v eqa6v txh0b i3mh9 dark:bg-pink-800/30"> <svg class="xqknn t0r8j oj1e7 pk091 o9zgw 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="iieae mieg5"> <p class="truncate flex a459h items-center o9jhx egssd ovunq zd5ha t4wtn rn69t s62a8 dark:text-neutral-200 dark:group-hover:text-neutral-400 dark:group-focus:text-neutral-400"> All templates <svg class="xqknn ccfki" 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="gauz8 zifd0 g9sff stepa wv7e9 p0cdv bqowq" d="M5 12h14"/><path class="ltv5h stepa p0cdv bqowq" 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 h3sa8 du2fm"> <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 puiqx pvi3v"><!-- Card --> <a class="f1hwo x4mdl block rsqxb cc1ly zqk6x group nz7b4 qm5z2 khwhk gxh7t i3mh9 w8bqc t4rxa a68yw dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50" href="../../pro/payment/balances-open-new.html"> <span class="flex klk5r wpvps"> <!-- Icon --> <span class="di2ve xqknn j1mw5 flex a459h items-center o7p0z t4wtn icuyk c1k5d dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="t0r8j icuyk" 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="qisry"> <span class="block lno3i ol2kz t4wtn dark:text-white"> Open </span> <span class="block a3wk8 kugle dark:text-neutral-500"> Open a new balance </span> </span> <!-- End Body --> </span> </a> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Card --> <a class="f1hwo x4mdl block rsqxb cc1ly zqk6x group nz7b4 qm5z2 khwhk gxh7t i3mh9 w8bqc t4rxa a68yw dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50" href="../../pro/payment/balances-open-new.html"> <span class="flex klk5r wpvps"> <!-- Icon --> <span class="di2ve xqknn j1mw5 flex a459h items-center o7p0z t4wtn icuyk c1k5d dark:bg-neutral-700 dark:text-white dark:group-hover:bg-neutral-600"> <svg class="t0r8j icuyk" 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="qisry"> <span class="block lno3i ol2kz t4wtn dark:text-white"> Open </span> <span class="block a3wk8 kugle dark:text-neutral-500"> Open a new balance </span> </span> <!-- End Body --> </span> </a> <!-- End Card -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close