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 kby5p ly3m4"> <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="qaxp8 sbe6w huxlp"><!-- Card --> <div class="u3doq ly3m4 relative flex pz3xv m0bgt m9vu4 efs5t kq7zk dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex m0bgt items-center dsp0o"> <h2 class="rozsb p9tun dark:text-neutral-200"> Profile setup </h2> <span class="hmhrw cr73y s2k2k items-center ernqe bqo3s rozsb yf7yl ngy7c nj42k rvd2p udtbu hrliy">Pro</span> </div> <div class="nc0x2 m3tlc"> <h4 class="kl8ix pdak6 p9tun dark:text-neutral-200">2 of 4 completed</h4> <div class="i80r8 jd9eh ihu9y"> <div class="danl7 fiztv t1bzs s013e"></div> <div class="danl7 fiztv t1bzs s013e"></div> <div class="danl7 gf5hc fiztv t1bzs s013e"></div> <div class="danl7 gf5hc fiztv t1bzs s013e"></div> </div> </div> <p class="nc0x2 pdak6 tqixq dark:text-neutral-400"> Your profile needs to be at least <span class="rozsb p9tun dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- List --> <div class="nc0x2 h25m5"> <!-- List --> <div class="a5drp"> <!-- Item --> <div class="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <s class="pdak6 pal0s dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <span class="pdak6 p9tun dark:text-white"> Provide company details </span> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <s class="pdak6 pal0s dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <span class="pdak6 p9tun dark:text-white"> Add projects </span> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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=2.5.0"></script> </body> </html>
<!-- Card --> <div class="u3doq ly3m4 relative flex pz3xv m0bgt m9vu4 efs5t kq7zk dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex m0bgt items-center dsp0o"> <h2 class="rozsb p9tun dark:text-neutral-200"> Profile setup </h2> <span class="hmhrw cr73y s2k2k items-center ernqe bqo3s rozsb yf7yl ngy7c nj42k rvd2p udtbu hrliy">Pro</span> </div> <div class="nc0x2 m3tlc"> <h4 class="kl8ix pdak6 p9tun dark:text-neutral-200">2 of 4 completed</h4> <div class="i80r8 jd9eh ihu9y"> <div class="danl7 fiztv t1bzs s013e"></div> <div class="danl7 fiztv t1bzs s013e"></div> <div class="danl7 gf5hc fiztv t1bzs s013e"></div> <div class="danl7 gf5hc fiztv t1bzs s013e"></div> </div> </div> <p class="nc0x2 pdak6 tqixq dark:text-neutral-400"> Your profile needs to be at least <span class="rozsb p9tun dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- List --> <div class="nc0x2 h25m5"> <!-- List --> <div class="a5drp"> <!-- Item --> <div class="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <s class="pdak6 pal0s dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <span class="pdak6 p9tun dark:text-white"> Provide company details </span> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <s class="pdak6 pal0s dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="bdby8 yi4bp flex m0bgt items-center u96nv ac0xq awdil dark:bg-neutral-700"> <!-- Icon --> <span class="dpsu3 flex h21yx dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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="ce341"> <div class="flex m0bgt items-center ihu9y"> <div class="ce341"> <span class="pdak6 p9tun dark:text-white"> Add projects </span> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 kby5p ly3m4"> <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="qaxp8 sbe6w huxlp"><!-- Card --> <div class="u3doq ly3m4 relative flex pz3xv m9vu4 efs5t kq7zk dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex m0bgt items-center dsp0o"> <h2 class="rozsb p9tun dark:text-neutral-200"> Profile setup </h2> <span class="hmhrw cr73y s2k2k items-center ernqe bqo3s rozsb yf7yl ngy7c nj42k rvd2p udtbu hrliy">Pro</span> </div> <p class="c6lyt pdak6 tqixq dark:text-neutral-400"> Your profile needs to be at least <span class="rozsb p9tun dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- Timeline --> <div class="c6lyt"> <h3 class="btpd5 f4yq1 pdak6 p9tun dark:text-neutral-200">3 of 5 completed</h3> <!-- Item --> <div class="group relative flex udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Add projects </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> Provide company details </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> Set up a payment method </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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=2.5.0"></script> </body> </html>
<!-- Card --> <div class="u3doq ly3m4 relative flex pz3xv m9vu4 efs5t kq7zk dxf1r dark:bg-neutral-800 dark:border-neutral-700"> <div class="flex m0bgt items-center dsp0o"> <h2 class="rozsb p9tun dark:text-neutral-200"> Profile setup </h2> <span class="hmhrw cr73y s2k2k items-center ernqe bqo3s rozsb yf7yl ngy7c nj42k rvd2p udtbu hrliy">Pro</span> </div> <p class="c6lyt pdak6 tqixq dark:text-neutral-400"> Your profile needs to be at least <span class="rozsb p9tun dark:text-neutral-200">50% complete</span> to be publicly visible. </p> <!-- Timeline --> <div class="c6lyt"> <h3 class="btpd5 f4yq1 pdak6 p9tun dark:text-neutral-200">3 of 5 completed</h3> <!-- Item --> <div class="group relative flex udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Download desktop app </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Add projects </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center danl7 hrliy lli30 dark:bg-teal-500"> <svg class="h21yx vs0hq" 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 h21yx dpsu3" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> <s class="pal0s dark:text-neutral-500"> Invite 5 talents </s> </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> Provide company details </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 udtr0"> <!-- Icon --> <div class="relative or6wk k8w5x wcovn sn90u qby6j lhfpa pa8p2 cf5il dark:after:bg-neutral-700"> <span class="dpsu3 flex dry15 items-center p9tun dark:text-neutral-200"> <svg class="h21yx ufena" 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 ce341 ddjby r4qto"> <div class="flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap u96nv pdak6 p9tun dark:text-white"> Set up a payment method </div> <div> <button type="button" class="y027u cr73y s2k2k items-center ernqe bqo3s ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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 kby5p ly3m4"> <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="qaxp8 sbe6w huxlp"><!-- List Group --> <div> <!-- Item --> <div class="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center g26n6 p9tun lli30 dark:bg-neutral-600 dark:text-neutral-200"> <svg class="h21yx ba0km" 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="tliya wq0mu ">1</span> </span> <s class="zuutc pal0s dark:text-neutral-500"> Desktop app </s> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">2</span> </span> <span class="zuutc"> Event notifications </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center g26n6 p9tun lli30 dark:bg-neutral-600 dark:text-neutral-200"> <svg class="h21yx ba0km" 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="tliya wq0mu ">3</span> </span> <s class="zuutc pal0s dark:text-neutral-500"> Calendar accounts </s> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">4</span> </span> <span class="zuutc"> Preline workspace </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">5</span> </span> <span class="zuutc"> Preline database </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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=2.5.0"></script> </body> </html>
<!-- List Group --> <div> <!-- Item --> <div class="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center g26n6 p9tun lli30 dark:bg-neutral-600 dark:text-neutral-200"> <svg class="h21yx ba0km" 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="tliya wq0mu ">1</span> </span> <s class="zuutc pal0s dark:text-neutral-500"> Desktop app </s> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">2</span> </span> <span class="zuutc"> Event notifications </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center g26n6 p9tun lli30 dark:bg-neutral-600 dark:text-neutral-200"> <svg class="h21yx ba0km" 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="tliya wq0mu ">3</span> </span> <s class="zuutc pal0s dark:text-neutral-500"> Calendar accounts </s> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">4</span> </span> <span class="zuutc"> Preline workspace </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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="g0aw2 flex m0bgt items-center ihu9y"> <div class="s2k2k flex-wrap gul2i bqo3s p9tun dark:text-white"> <span class="f680z flex dry15 items-center efs5t sx2o3 wv197 z1v6e lli30 dark:border-neutral-600 dark:text-neutral-400"> <span class="wq0mu ">5</span> </span> <span class="zuutc"> Preline database </span> </div> <div> <button type="button" class="hmhrw k3en6 s2k2k items-center ernqe wq0mu ngy7c efs5t kq7zk m9vu4 p9tun ycht7 um5nz xwjcj c3i4e r0fp5 ckvf9 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