Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Set Up Flows
Description goes here.
Set Up Flow List Group
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 wuei0 pvi3v"><!-- Card --> <div class="cz83v du2fm relative flex ao3ns fa4f9 nz7b4 qm5z2 khwhk u33oi dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex fa4f9 items-center klk5r"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Profile setup </h2> <span class="eek80 vo9dv rl1tg items-center o9jhx egssd lno3i f2xez m6q9e dp62v pgx2g dmd11 txh0b">Pro</span> </div> <div class="zw3r6 jlogr"> <h4 class="qca14 a3wk8 t4wtn dark:text-neutral-200">2 of 4 completed</h4> <div class="o4dae q5m6k gbe75"> <div class="t6o7z zv3gd z4if3 neab0"></div> <div class="t6o7z zv3gd z4if3 neab0"></div> <div class="t6o7z wc2um zv3gd z4if3 neab0"></div> <div class="t6o7z wc2um zv3gd z4if3 neab0"></div> </div> </div> <p class="zw3r6 a3wk8 f5wd6 dark:text-neutral-400"> Your profile needs to be at least <span class="lno3i t4wtn dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- List --> <div class="zw3r6 nst6j"> <!-- List --> <div class="t4gru"> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <s class="a3wk8 w8otv dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" disabled> Download </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <span class="a3wk8 t4wtn dark:text-white"> Provide company details </span> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" > Add now </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <s class="a3wk8 w8otv dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" disabled> Invite </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <span class="a3wk8 t4wtn dark:text-white"> Add projects </span> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" > Add now </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> </div> <!-- End List --> </div> <!-- End List --> </div> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Card --> <div class="cz83v du2fm relative flex ao3ns fa4f9 nz7b4 qm5z2 khwhk u33oi dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex fa4f9 items-center klk5r"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Profile setup </h2> <span class="eek80 vo9dv rl1tg items-center o9jhx egssd lno3i f2xez m6q9e dp62v pgx2g dmd11 txh0b">Pro</span> </div> <div class="zw3r6 jlogr"> <h4 class="qca14 a3wk8 t4wtn dark:text-neutral-200">2 of 4 completed</h4> <div class="o4dae q5m6k gbe75"> <div class="t6o7z zv3gd z4if3 neab0"></div> <div class="t6o7z zv3gd z4if3 neab0"></div> <div class="t6o7z wc2um zv3gd z4if3 neab0"></div> <div class="t6o7z wc2um zv3gd z4if3 neab0"></div> </div> </div> <p class="zw3r6 a3wk8 f5wd6 dark:text-neutral-400"> Your profile needs to be at least <span class="lno3i t4wtn dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- List --> <div class="zw3r6 nst6j"> <!-- List --> <div class="t4gru"> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <s class="a3wk8 w8otv dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" disabled> Download </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <span class="a3wk8 t4wtn dark:text-white"> Provide company details </span> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" > Add now </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <s class="a3wk8 w8otv dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" disabled> Invite </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> <!-- Item --> <div class="rsqxb otlhf flex fa4f9 items-center hwu3o o7p0z zb2tq dark:bg-neutral-700"> <!-- Icon --> <span class="t0r8j flex xqknn a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg> </span> <!-- End Icon --> <!-- Content --> <div class="qisry"> <div class="flex fa4f9 items-center gbe75"> <div class="qisry"> <span class="a3wk8 t4wtn dark:text-white"> Add projects </span> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500" > Add now </button> </div> </div> </div> <!-- End Content --> </div> <!-- End Item --> </div> <!-- End List --> </div> <!-- End List --> </div> <!-- End Card -->
Set Up Flow Timeline
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 wuei0 pvi3v"><!-- Card --> <div class="cz83v du2fm relative flex ao3ns nz7b4 qm5z2 khwhk u33oi dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex fa4f9 items-center klk5r"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Profile setup </h2> <span class="eek80 vo9dv rl1tg items-center o9jhx egssd lno3i f2xez m6q9e dp62v pgx2g dmd11 txh0b">Pro</span> </div> <p class="xlnvk a3wk8 f5wd6 dark:text-neutral-400"> Your profile needs to be at least <span class="lno3i t4wtn dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- Timeline --> <div class="xlnvk"> <h3 class="wardh zd5ha a3wk8 t4wtn dark:text-neutral-200">3 of 5 completed</h3> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m8 17 4 4 4-4"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Download </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Add projects </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Add now </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Invite </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> Provide company details </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> Add now </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> Set up a payment method </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> Set up </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> </div> <!-- End Timeline --> </div> <!-- End Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Card --> <div class="cz83v du2fm relative flex ao3ns nz7b4 qm5z2 khwhk u33oi dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex fa4f9 items-center klk5r"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Profile setup </h2> <span class="eek80 vo9dv rl1tg items-center o9jhx egssd lno3i f2xez m6q9e dp62v pgx2g dmd11 txh0b">Pro</span> </div> <p class="xlnvk a3wk8 f5wd6 dark:text-neutral-400"> Your profile needs to be at least <span class="lno3i t4wtn dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- Timeline --> <div class="xlnvk"> <h3 class="wardh zd5ha a3wk8 t4wtn dark:text-neutral-200">3 of 5 completed</h3> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m8 17 4 4 4-4"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Download </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Add projects </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Add now </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t6o7z txh0b icuyk dark:bg-teal-500"> <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 d="M20 6 9 17l-5-5"></path></svg> <svg class="hidden 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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> <s class="w8otv dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" disabled> Invite </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> Provide company details </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> Add now </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> <!-- Item --> <div class="group relative flex x986k"> <!-- Icon --> <div class="relative f5hx8 hz0c8 dp0z8 itq96 q0nq5 f2xfc sdx5k b967p dark:after:bg-neutral-700"> <span class="t0r8j flex a459h items-center t4wtn dark:text-neutral-200"> <svg class="xqknn d681g" 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="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg> </span> </div> <!-- End Icon --> <!-- Right Content --> <div class="-mt-1 qisry fp4or eo9qe"> <div class="flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap hwu3o a3wk8 t4wtn dark:text-white"> Set up a payment method </div> <div> <button type="button" class="p65gp vo9dv rl1tg items-center o9jhx egssd m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"> Set up </button> </div> </div> </div> <!-- End Right Content --> </div> <!-- End Item --> </div> <!-- End Timeline --> </div> <!-- End Card -->
Set Up with Buttons
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 wuei0 pvi3v"><!-- List Group --> <div> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center coiig t4wtn icuyk dark:bg-neutral-600 dark:text-neutral-200"> <svg class="xqknn wel99" 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 class="tuthn djbeh ">1</span> </span> <s class="awvey w8otv dark:text-neutral-500"> Desktop app </s> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" disabled> Download </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">2</span> </span> <span class="awvey"> Event notifications </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Enable </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center coiig t4wtn icuyk dark:bg-neutral-600 dark:text-neutral-200"> <svg class="xqknn wel99" 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 class="tuthn djbeh ">3</span> </span> <s class="awvey w8otv dark:text-neutral-500"> Calendar accounts </s> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" disabled> Connect </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">4</span> </span> <span class="awvey"> Preline workspace </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Connect </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">5</span> </span> <span class="awvey"> Preline database </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Show </button> </div> </div> <!-- End Item --> </div> <!-- End List Group --></div> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- List Group --> <div> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center coiig t4wtn icuyk dark:bg-neutral-600 dark:text-neutral-200"> <svg class="xqknn wel99" 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 class="tuthn djbeh ">1</span> </span> <s class="awvey w8otv dark:text-neutral-500"> Desktop app </s> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" disabled> Download </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">2</span> </span> <span class="awvey"> Event notifications </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Enable </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center coiig t4wtn icuyk dark:bg-neutral-600 dark:text-neutral-200"> <svg class="xqknn wel99" 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 class="tuthn djbeh ">3</span> </span> <s class="awvey w8otv dark:text-neutral-500"> Calendar accounts </s> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" disabled> Connect </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">4</span> </span> <span class="awvey"> Preline workspace </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Connect </button> </div> </div> <!-- End Item --> <!-- Item --> <div class="jxbdw flex fa4f9 items-center gbe75"> <div class="rl1tg flex-wrap bag0c egssd t4wtn dark:text-white"> <span class="az8bc flex a459h items-center qm5z2 g2g4t p0r8k kugle icuyk dark:border-neutral-600 dark:text-neutral-400"> <span class="djbeh ">5</span> </span> <span class="awvey"> Preline database </span> </div> <div> <button type="button" class="eek80 ujcg9 rl1tg items-center o9jhx djbeh m6q9e qm5z2 khwhk nz7b4 t4wtn fwpr6 x8k6f iec4s haq8z t4rxa a68yw dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" > Show </button> </div> </div> <!-- End Item --> </div> <!-- End List Group -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close