Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Location & Address
Description goes here.
Address Cards Grid View
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative um8nq qpmwn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body class="oo8ro dark:bg-neutral-900"> <div class="i65bn o5l3w mx-auto"> <div class="q0znx"><!-- Grid --> <div class="dmfqa mmjp9 n5y6f i5hzf c9huo"> <!-- Address Card --> <div id="hs-pro-shac1" class="ju7it flex flex-col agawe wfm4e d77gl gelot dark:bg-neutral-800 dark:border-neutral-700"> <!-- Body --> <div class="pi5e6 qpmwn vjcu1 oo8ro lile3 hx4gm dark:bg-neutral-900"> <!-- End Header --> <div class="qhmnk flex flex-wrap uip67 items-center h1dxu"> <div class="e3fpz"> <h5 class="y2wul bp13m dark:text-neutral-200"> Breannabury </h5> </div> <span class="ct50n kzzmm inline-flex items-center vrcxw cm336 vo20k oq0dt wfm4e ztf7i z8hjy pqoy4 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-500">Default</span> </div> <!-- End Header --> <!-- List --> <ul> <li class="t5ziw bp13m dark:text-neutral-200">James Collins</li> <li class="t5ziw bp13m dark:text-neutral-200">280 Suzanne Throughway</li> <li class="t5ziw bp13m dark:text-neutral-200">New York, Breannabury, OR 45801, US</li> <li class="ls9te t5ziw bp13m dark:text-neutral-200">+44 000 000 0001</li> </ul> <!-- End List --> </div> <!-- End Body --> <!-- Footer --> <div class="mt-auto"> <ul class="flex flex-wrap r00n9 items-center aygsi"> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-overlay="#hs-pro-sheam"> Edit </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" disabled data-hs-remove-element="#hs-pro-shac1"> Remove </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" disabled> Set as default </button> </li> </ul> </div> <!-- End Footer --> </div> <!-- End Address Card --> <!-- Address Card --> <div id="hs-pro-shac2" class="ju7it flex flex-col agawe wfm4e d77gl gelot dark:bg-neutral-800 dark:border-neutral-700"> <!-- Body --> <div class="pi5e6 qpmwn vjcu1 oo8ro lile3 hx4gm dark:bg-neutral-900"> <!-- End Header --> <div class="qhmnk flex flex-wrap uip67 items-center h1dxu"> <div class="e3fpz"> <h5 class="y2wul bp13m dark:text-neutral-200"> Portland </h5> </div> </div> <!-- End Header --> <!-- List --> <ul> <li class="t5ziw bp13m dark:text-neutral-200">James Collins</li> <li class="t5ziw bp13m dark:text-neutral-200">9455 Ne Alderwood Rd</li> <li class="t5ziw bp13m dark:text-neutral-200">C/O Uzw-Fh Portland Oregon 97252<br>Portland, Or 97252-1777</li> <li class="ls9te t5ziw bp13m dark:text-neutral-200">+(01) 503 914 6317</li> </ul> <!-- End List --> </div> <!-- End Body --> <!-- Footer --> <div class="mt-auto"> <ul class="flex flex-wrap r00n9 items-center aygsi"> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-overlay="#hs-pro-sheam"> Edit </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shac2"> Remove </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" > Set as default </button> </li> </ul> </div> <!-- End Footer --> </div> <!-- End Address Card --> <!-- Address Card --> <button type="button" class="ju7it group wzrww flex flex-col r00n9 items-center zb7az wfm4e ef3uy wiva2 gelot obj24 focus:outline-hidden k80eo dark:border-neutral-700 dark:hover:border-neutral-600 dark:focus:border-neutral-600" data-hs-overlay="#hs-pro-shcam"> <svg class="hq6gx ezw10 t6rrs dark:text-neutral-500" 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="M5 12h14"/><path d="M12 5v14"/></svg> <span class="t5ziw bp13m group-hover:text-indigo-600 group-focus:text-indigo-600 dark:text-neutral-200 dark:group-hover:text-indigo-400 dark:group-focus:text-indigo-400"> Add address </span> </button> <!-- End Address Card --> </div> <!-- End Grid --></div></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Grid --> <div class="dmfqa mmjp9 n5y6f i5hzf c9huo"> <!-- Address Card --> <div id="hs-pro-shac1" class="ju7it flex flex-col agawe wfm4e d77gl gelot dark:bg-neutral-800 dark:border-neutral-700"> <!-- Body --> <div class="pi5e6 qpmwn vjcu1 oo8ro lile3 hx4gm dark:bg-neutral-900"> <!-- End Header --> <div class="qhmnk flex flex-wrap uip67 items-center h1dxu"> <div class="e3fpz"> <h5 class="y2wul bp13m dark:text-neutral-200"> Breannabury </h5> </div> <span class="ct50n kzzmm inline-flex items-center vrcxw cm336 vo20k oq0dt wfm4e ztf7i z8hjy pqoy4 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-500">Default</span> </div> <!-- End Header --> <!-- List --> <ul> <li class="t5ziw bp13m dark:text-neutral-200">James Collins</li> <li class="t5ziw bp13m dark:text-neutral-200">280 Suzanne Throughway</li> <li class="t5ziw bp13m dark:text-neutral-200">New York, Breannabury, OR 45801, US</li> <li class="ls9te t5ziw bp13m dark:text-neutral-200">+44 000 000 0001</li> </ul> <!-- End List --> </div> <!-- End Body --> <!-- Footer --> <div class="mt-auto"> <ul class="flex flex-wrap r00n9 items-center aygsi"> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-overlay="#hs-pro-sheam"> Edit </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" disabled data-hs-remove-element="#hs-pro-shac1"> Remove </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" disabled> Set as default </button> </li> </ul> </div> <!-- End Footer --> </div> <!-- End Address Card --> <!-- Address Card --> <div id="hs-pro-shac2" class="ju7it flex flex-col agawe wfm4e d77gl gelot dark:bg-neutral-800 dark:border-neutral-700"> <!-- Body --> <div class="pi5e6 qpmwn vjcu1 oo8ro lile3 hx4gm dark:bg-neutral-900"> <!-- End Header --> <div class="qhmnk flex flex-wrap uip67 items-center h1dxu"> <div class="e3fpz"> <h5 class="y2wul bp13m dark:text-neutral-200"> Portland </h5> </div> </div> <!-- End Header --> <!-- List --> <ul> <li class="t5ziw bp13m dark:text-neutral-200">James Collins</li> <li class="t5ziw bp13m dark:text-neutral-200">9455 Ne Alderwood Rd</li> <li class="t5ziw bp13m dark:text-neutral-200">C/O Uzw-Fh Portland Oregon 97252<br>Portland, Or 97252-1777</li> <li class="ls9te t5ziw bp13m dark:text-neutral-200">+(01) 503 914 6317</li> </ul> <!-- End List --> </div> <!-- End Body --> <!-- Footer --> <div class="mt-auto"> <ul class="flex flex-wrap r00n9 items-center aygsi"> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-overlay="#hs-pro-sheam"> Edit </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shac2"> Remove </button> </li> <li class="inline-flex items-center relative cm336 t6rrs sximh fjqwr last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:w-px after:h-3 after:bg-gray-300 after:-translate-y-1/2 dark:text-neutral-500 dark:after:bg-neutral-600"> <button type="button" class="mctd2 vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n disabled:opacity-50 disabled:pointer-events-none disabled:no-underline dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" > Set as default </button> </li> </ul> </div> <!-- End Footer --> </div> <!-- End Address Card --> <!-- Address Card --> <button type="button" class="ju7it group wzrww flex flex-col r00n9 items-center zb7az wfm4e ef3uy wiva2 gelot obj24 focus:outline-hidden k80eo dark:border-neutral-700 dark:hover:border-neutral-600 dark:focus:border-neutral-600" data-hs-overlay="#hs-pro-shcam"> <svg class="hq6gx ezw10 t6rrs dark:text-neutral-500" 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="M5 12h14"/><path d="M12 5v14"/></svg> <span class="t5ziw bp13m group-hover:text-indigo-600 group-focus:text-indigo-600 dark:text-neutral-200 dark:group-hover:text-indigo-400 dark:group-focus:text-indigo-400"> Add address </span> </button> <!-- End Address Card --> </div> <!-- End Grid -->
Store Contacts
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative um8nq qpmwn"> <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="oo8ro iqzha ps5iq dark:bg-neutral-900"> <div class="w11y8"><!-- List --> <div> <!-- Item --> <div class="sbp3p xsm96 ic6aj d77gl jfxfx vtnr8 esckw dark:border-neutral-700"> <!-- Heading --> <div class="dl93o flex items-center h1dxu"> <img class="hq6gx ca09w oq0dt" src="../../assets/vendor/svg-country-flags/png100px/us.png" alt="United States of America"> <div class="e3fpz"> <h2 class="vo20k bp13m dark:text-neutral-200"> United States </h2> </div> </div> <!-- End Heading --> <!-- Grid --> <div class="dmfqa mmjp9 n5y6f d40ox isxnh aygsi rzelo"> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1526745925052-dd824d27b9ab?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> New York </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">4222 River Rd, Columbus,</li> <li class="t5ziw t6rrs dark:text-neutral-500">31904, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1485348616965-15c926318fbb?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> California </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">2952 S Peoria Ave, Tulsa,</li> <li class="t5ziw t6rrs dark:text-neutral-500">74114, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1507853762311-4a468e70503c?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Los Angeles </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">255 Dock Ln, New Tazewell,</li> <li class="t5ziw t6rrs dark:text-neutral-500">37825, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Item --> <!-- Item --> <div> <!-- Heading --> <div class="dl93o flex items-center h1dxu"> <img class="hq6gx ca09w oq0dt" src="../../assets/vendor/svg-country-flags/png100px/gb.png" alt="United Kingdom"> <div class="e3fpz"> <h2 class="vo20k bp13m dark:text-neutral-200"> United Kingdom </h2> </div> </div> <!-- End Heading --> <!-- Grid --> <div class="dmfqa mmjp9 n5y6f d40ox isxnh aygsi rzelo"> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1580554430120-94cfcb3adf25?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> London </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">2, Avenue Mace,</li> <li class="t5ziw t6rrs dark:text-neutral-500">35804 Gauthier</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Manchester </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">470 Lucy Forks,</li> <li class="t5ziw t6rrs dark:text-neutral-500">Patriciafurt, YC7B 3UT</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Item --> </div> <!-- End List --></div></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- List --> <div> <!-- Item --> <div class="sbp3p xsm96 ic6aj d77gl jfxfx vtnr8 esckw dark:border-neutral-700"> <!-- Heading --> <div class="dl93o flex items-center h1dxu"> <img class="hq6gx ca09w oq0dt" src="../../assets/vendor/svg-country-flags/png100px/us.png" alt="United States of America"> <div class="e3fpz"> <h2 class="vo20k bp13m dark:text-neutral-200"> United States </h2> </div> </div> <!-- End Heading --> <!-- Grid --> <div class="dmfqa mmjp9 n5y6f d40ox isxnh aygsi rzelo"> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1526745925052-dd824d27b9ab?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> New York </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">4222 River Rd, Columbus,</li> <li class="t5ziw t6rrs dark:text-neutral-500">31904, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1485348616965-15c926318fbb?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> California </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">2952 S Peoria Ave, Tulsa,</li> <li class="t5ziw t6rrs dark:text-neutral-500">74114, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1507853762311-4a468e70503c?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Los Angeles </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">255 Dock Ln, New Tazewell,</li> <li class="t5ziw t6rrs dark:text-neutral-500">37825, United States</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Item --> <!-- Item --> <div> <!-- Heading --> <div class="dl93o flex items-center h1dxu"> <img class="hq6gx ca09w oq0dt" src="../../assets/vendor/svg-country-flags/png100px/gb.png" alt="United Kingdom"> <div class="e3fpz"> <h2 class="vo20k bp13m dark:text-neutral-200"> United Kingdom </h2> </div> </div> <!-- End Heading --> <!-- Grid --> <div class="dmfqa mmjp9 n5y6f d40ox isxnh aygsi rzelo"> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1580554430120-94cfcb3adf25?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> London </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">2, Avenue Mace,</li> <li class="t5ziw t6rrs dark:text-neutral-500">35804 Gauthier</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> <!-- Card --> <div class="ju7it oo8ro wfm4e d77gl gelot dark:bg-neutral-900 dark:border-neutral-700"> <img class="agawe i65bn nx2b3 exlm9 lile3 dark:bg-neutral-800" src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Store Image"> <div class="pi5e6 space-y-5"> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Manchester </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">470 Lucy Forks,</li> <li class="t5ziw t6rrs dark:text-neutral-500">Patriciafurt, YC7B 3UT</li> </ul> <!-- End List --> </div> <div> <h2 class="vo20k t5ziw bp13m dark:text-neutral-200"> Business hours </h2> <!-- List --> <ul class="xe8oj"> <li class="t5ziw t6rrs dark:text-neutral-500">Mon - Sat: 9.30AM - 06.00PM</li> </ul> <!-- End List --> </div> <button type="button" class="inline-flex items-center pgjbi t5ziw bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400"> Get direction <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg> </button> </div> </div> <!-- End Card --> </div> <!-- End Grid --> </div> <!-- End Item --> </div> <!-- End List -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close