Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #101

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="d-none d-lg-block position-absolute top-0 start-0 mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="d-none d-lg-block position-absolute bottom-0 end-0 mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="container position-relative">
    <div class="row">
      <div class="col-lg-6 mb-12 mb-lg-0">
        <div class="mw-md">
          <div class="mb-24">
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-4">READY TO SUPPORT</span>
            <h3 class="font-heading mb-4">
              <span>Don’t hesitate</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">to talk with us</span>
            </h3>
            <p class="lead text-secondary">Relax, we are ready to support 24/7 for you</p>
          </div>
          <div class="d-sm-flex mb-14 align-items-center">
            <span>
              <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="80" y="80" width="80" height="80" rx="40" transform="rotate(-180 80 80)" fill="#9FE2FF"></rect>
                <path d="M49.92 41.3332C49.6267 41.3332 49.32 41.2399 49.0267 41.1732C48.4327 41.0423 47.8489 40.8686 47.28 40.6532C46.6615 40.4282 45.9815 40.4399 45.3711 40.686C44.7606 40.9322 44.2628 41.3954 43.9733 41.9866L43.68 42.5866C42.3813 41.8641 41.188 40.9669 40.1333 39.9199C39.0864 38.8653 38.1891 37.6719 37.4667 36.3732L38.0267 35.9999C38.6178 35.7105 39.0811 35.2126 39.3272 34.6022C39.5734 33.9917 39.585 33.3118 39.36 32.6932C39.1483 32.1231 38.9746 31.5396 38.84 30.9466C38.7733 30.6532 38.72 30.3466 38.68 30.0399C38.5181 29.1007 38.0262 28.2502 37.2928 27.6416C36.5595 27.0329 35.6329 26.7061 34.68 26.7199H30.68C30.1054 26.7145 29.5363 26.833 29.0116 27.0673C28.4869 27.3016 28.0188 27.6462 27.6393 28.0776C27.2597 28.5091 26.9775 29.0172 26.812 29.5675C26.6465 30.1178 26.6015 30.6973 26.68 31.2666C27.3903 36.8524 29.9414 42.0424 33.9302 46.0168C37.919 49.9911 43.1183 52.5233 48.7067 53.2132H49.2133C50.1966 53.2147 51.1459 52.8539 51.88 52.1999C52.3018 51.8226 52.6388 51.3601 52.8686 50.843C53.0985 50.3259 53.216 49.7658 53.2133 49.1999V45.1999C53.197 44.2738 52.8598 43.382 52.2591 42.6768C51.6585 41.9716 50.8318 41.4967 49.92 41.3332ZM50.5867 49.3332C50.5864 49.5226 50.5459 49.7096 50.4677 49.8821C50.3896 50.0545 50.2756 50.2083 50.1333 50.3332C49.9872 50.4664 49.8133 50.5654 49.6242 50.623C49.4351 50.6807 49.2356 50.6955 49.04 50.6666C44.0465 50.0263 39.4083 47.7419 35.857 44.1736C32.3056 40.6054 30.0432 35.9564 29.4267 30.9599C29.4055 30.7646 29.4241 30.567 29.4813 30.3791C29.5386 30.1912 29.6334 30.0168 29.76 29.8666C29.885 29.7243 30.0388 29.6104 30.2112 29.5322C30.3836 29.454 30.5707 29.4135 30.76 29.4132H34.76C35.0701 29.4063 35.3728 29.5077 35.6162 29.7C35.8596 29.8923 36.0283 30.1633 36.0933 30.4666C36.1467 30.831 36.2133 31.191 36.2933 31.5466C36.4474 32.2494 36.6524 32.9401 36.9067 33.6132L35.04 34.4799C34.8804 34.5531 34.7368 34.6572 34.6176 34.786C34.4983 34.9149 34.4056 35.0661 34.3449 35.2308C34.2842 35.3956 34.2566 35.5707 34.2638 35.7462C34.271 35.9217 34.3127 36.094 34.3867 36.2532C36.3056 40.3636 39.6097 43.6676 43.72 45.5866C44.0446 45.7199 44.4087 45.7199 44.7333 45.5866C44.8996 45.5271 45.0524 45.4352 45.1829 45.3162C45.3134 45.1971 45.4189 45.0534 45.4933 44.8932L46.32 43.0266C47.0093 43.2731 47.7128 43.4779 48.4267 43.6399C48.7822 43.7199 49.1422 43.7866 49.5067 43.8399C49.8099 43.905 50.081 44.0737 50.2733 44.317C50.4655 44.5604 50.5669 44.8632 50.56 45.1732L50.5867 49.3332ZM49.3333 37.3332C49.687 37.3332 50.0261 37.1928 50.2762 36.9427C50.5262 36.6927 50.6667 36.3535 50.6667 35.9999V30.6666C50.6667 30.313 50.5262 29.9738 50.2762 29.7238C50.0261 29.4737 49.687 29.3332 49.3333 29.3332C48.9797 29.3332 48.6406 29.4737 48.3905 29.7238C48.1405 29.9738 48 30.313 48 30.6666V35.9999C48 36.3535 48.1405 36.6927 48.3905 36.9427C48.6406 37.1928 48.9797 37.3332 49.3333 37.3332ZM44 37.3332C44.3536 37.3332 44.6928 37.1928 44.9428 36.9427C45.1929 36.6927 45.3333 36.3535 45.3333 35.9999V30.6666C45.3333 30.313 45.1929 29.9738 44.9428 29.7238C44.6928 29.4737 44.3536 29.3332 44 29.3332C43.6464 29.3332 43.3073 29.4737 43.0572 29.7238C42.8072 29.9738 42.6667 30.313 42.6667 30.6666V35.9999C42.6667 36.3535 42.8072 36.6927 43.0572 36.9427C43.3073 37.1928 43.6464 37.3332 44 37.3332Z" fill="black"></path>
              </svg>
            </span>
            <div class="ms-3 ms-sm-8 mt-4 mt-sm-0">
              <span class="d-block fs-7 text-secondary">Phone</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #102

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="position-relative container">
    <div class="row align-items-center">
      <div class="col-lg-7 col-xl-6 mb-12 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0">
          <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
          <h2 class="font-heading mb-16">
            <span>Achievements This</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Month</span>
          </h2>
          <div class="d-flex mb-14 align-items-center">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="40" r="40" fill="#FFE9B0"></circle>
              <path d="M53.3333 30.7733C53.3344 29.9603 53.0941 29.1652 52.643 28.4888C52.1918 27.8124 51.55 27.2852 50.7989 26.9739C50.0478 26.6626 49.2212 26.5813 48.4239 26.7402C47.6265 26.8992 46.8943 27.2912 46.3199 27.8666L42.5733 31.6133L33.9199 28.7333C33.6895 28.6609 33.4438 28.6524 33.209 28.7088C32.9741 28.7651 32.759 28.8842 32.5866 29.0533L29.4133 32.2C29.2629 32.3521 29.1513 32.5381 29.088 32.7424C29.0246 32.9467 29.0113 33.1632 29.0493 33.3737C29.0872 33.5842 29.1752 33.7825 29.3058 33.9518C29.4365 34.1211 29.6059 34.2566 29.7999 34.3466L36.7066 37.48L33.2399 40.9466L30.9599 39.8C30.7137 39.6668 30.4319 39.6144 30.1543 39.6503C29.8767 39.6862 29.6174 39.8085 29.4133 40L27.0533 42.4133C26.8049 42.6631 26.6655 43.0011 26.6655 43.3533C26.6655 43.7056 26.8049 44.0435 27.0533 44.2933L35.7066 52.9466C35.9564 53.195 36.2943 53.3344 36.6466 53.3344C36.9988 53.3344 37.3368 53.195 37.5866 52.9466L39.9999 50.5867C40.2 50.3886 40.3323 50.1323 40.3778 49.8545C40.4233 49.5766 40.3797 49.2915 40.2533 49.04L39.1066 46.76L42.5733 43.2933L45.7066 50.2C45.7967 50.394 45.9321 50.5634 46.1014 50.6941C46.2708 50.8247 46.469 50.9127 46.6795 50.9506C46.89 50.9886 47.1065 50.9753 47.3108 50.9119C47.5151 50.8486 47.7011 50.737 47.8533 50.5867L50.9999 47.44C51.169 47.2676 51.2881 47.0524 51.3444 46.8176C51.4008 46.5828 51.3923 46.337 51.3199 46.1066L48.4399 37.4533L52.1333 33.68C52.5162 33.2994 52.8195 32.8464 53.0256 32.3473C53.2316 31.8483 53.3362 31.3132 53.3333 30.7733ZM50.2399 31.8L45.9199 36.12C45.7508 36.2924 45.6317 36.5075 45.5754 36.7424C45.519 36.9772 45.5275 37.2229 45.5999 37.4533L48.4799 46.0933L47.2799 47.2933L44.1466 40.4C44.0577 40.2042 43.9227 40.0328 43.7532 39.9005C43.5837 39.7682 43.3847 39.6788 43.1733 39.64C42.96 39.6011 42.7405 39.6147 42.5337 39.6798C42.3269 39.7448 42.1391 39.8593 41.9866 40.0133L36.4933 45.56C36.296 45.757 36.1655 46.0109 36.1201 46.2859C36.0746 46.561 36.1166 46.8433 36.2399 47.0933L37.3333 49.3333L36.5866 50.08L29.8799 43.36L30.6666 42.6666L32.9466 43.8133C33.1966 43.9367 33.4789 43.9786 33.754 43.9331C34.029 43.8877 34.2829 43.7572 34.4799 43.56L39.9999 38.0133C40.1531 37.8613 40.2671 37.6744 40.3322 37.4686C40.3972 37.2628 40.4113 37.0443 40.3733 36.8319C40.3353 36.6194 40.2462 36.4194 40.1138 36.2489C39.9815 36.0785 39.8097 35.9427 39.6133 35.8533L32.6666 32.72L33.8666 31.52L42.5066 34.4C42.737 34.4724 42.9827 34.4809 43.2175 34.4245C43.4524 34.3682 43.6675 34.2491 43.8399 34.08L48.1599 29.76C48.2928 29.6241 48.4515 29.5162 48.6266 29.4425C48.8018 29.3688 48.9899 29.3308 49.1799 29.3308C49.37 29.3308 49.5581 29.3688 49.7332 29.4425C49.9084 29.5162 50.0671 29.6241 50.1999 29.76C50.339 29.8888 50.449 30.0459 50.5226 30.2206C50.5961 30.3954 50.6316 30.5838 50.6266 30.7733C50.6338 30.9616 50.6033 31.1494 50.5369 31.3257C50.4705 31.502 50.3695 31.6633 50.2399 31.8Z" fill="#1E2238"></path>
            </svg>
            <div class="ms-6">
              <span class="d-block h3 mb-1">320</span>
              <span class="fs-7 text-secondary">Products Created</span>
            </div>
          </div>
          <div class="d-flex mb-14 align-items-center">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="40" r="40" fill="#9FE2FF"></circle>
              <path d="M53.1198 31.4134C52.9427 30.2779 52.4106 29.2277 51.5998 28.4133C50.7855 27.6025 49.7353 27.0704 48.5998 26.8934C46.2504 26.5386 43.8542 26.6473 41.5465 27.2134C41.4554 27.232 41.3662 27.2588 41.2798 27.2934C37.903 28.1445 34.8202 29.8955 32.3598 32.36C29.8853 34.8381 28.1256 37.9383 27.2665 41.3334C27.2665 41.4134 27.2665 41.4934 27.1998 41.5867C26.6337 43.8989 26.525 46.2994 26.8798 48.6534C27.0702 49.7651 27.6013 50.7901 28.3998 51.5867C29.2142 52.3975 30.2644 52.9296 31.3998 53.1067C32.3168 53.2558 33.2442 53.3316 34.1732 53.3334C35.6386 53.3249 37.0979 53.1414 38.5198 52.7867H38.7065C42.0877 51.9307 45.1753 50.1784 47.6439 47.7144C50.1125 45.2505 51.8707 42.1662 52.7332 38.7867C52.7332 38.7067 52.7332 38.6267 52.7998 38.5333C53.373 36.204 53.4817 33.7847 53.1198 31.4134ZM45.8265 29.3334C46.6126 29.3292 47.3976 29.3916 48.1732 29.52C48.282 29.5431 48.389 29.5743 48.4932 29.6134L46.6665 31.4534L44.6132 29.4C45.0132 29.3334 45.4265 29.3334 45.8265 29.3334ZM34.2265 34.2267C36.2339 32.2302 38.7091 30.7679 41.4265 29.9734L44.7865 33.3334L41.9198 36.2L40.9465 35.2267C40.8225 35.1017 40.6751 35.0025 40.5126 34.9348C40.3501 34.8671 40.1758 34.8323 39.9998 34.8323C39.8238 34.8323 39.6495 34.8671 39.4871 34.9348C39.3246 35.0025 39.1771 35.1017 39.0532 35.2267C38.8048 35.4765 38.6654 35.8144 38.6654 36.1667C38.6654 36.5189 38.8048 36.8569 39.0532 37.1067L40.0265 38.08L38.0798 40L37.1065 39.0267C36.8567 38.7783 36.5187 38.639 36.1665 38.639C35.8142 38.639 35.4763 38.7783 35.2265 39.0267C35.1015 39.1506 35.0023 39.2981 34.9346 39.4606C34.8669 39.6231 34.8321 39.7973 34.8321 39.9733C34.8321 40.1494 34.8669 40.3236 34.9346 40.4861C35.0023 40.6486 35.1015 40.7961 35.2265 40.92L36.1998 41.8934L33.3332 44.7867L29.9865 41.44C30.7726 38.7181 32.2306 36.2375 34.2265 34.2267ZM29.6132 48.4934C29.5741 48.3892 29.5429 48.2822 29.5198 48.1734C29.3179 46.9981 29.2553 45.8032 29.3332 44.6133L31.4532 46.6667L29.6132 48.4934ZM31.8265 50.48C31.7177 50.4569 31.6107 50.4257 31.5065 50.3867L33.3332 48.5467L35.3865 50.6667C34.1966 50.7446 33.0017 50.6819 31.8265 50.48ZM45.7732 45.7733C43.7623 47.7692 41.2818 49.2273 38.5598 50.0134L35.2132 46.6667L38.0798 43.8L39.0532 44.7733C39.1766 44.8977 39.3233 44.9965 39.4849 45.0641C39.6466 45.1317 39.8199 45.1668 39.9951 45.1674C40.1703 45.168 40.3439 45.1341 40.506 45.0677C40.6681 45.0012 40.8155 44.9035 40.9398 44.78C41.0641 44.6566 41.1629 44.5099 41.2305 44.3482C41.2982 44.1866 41.3333 44.0133 41.3339 43.8381C41.3345 43.6629 41.3006 43.4893 41.2342 43.3272C41.1677 43.1651 41.0699 43.0177 40.9465 42.8934L39.9998 41.92L41.9198 40L42.8932 40.9733C43.0177 41.0969 43.1655 41.1947 43.328 41.261C43.4904 41.3274 43.6644 41.361 43.8398 41.36C44.1035 41.3589 44.361 41.2796 44.5796 41.1322C44.7983 40.9848 44.9683 40.7759 45.0682 40.5318C45.1681 40.2878 45.1934 40.0196 45.1409 39.7612C45.0884 39.5028 44.9604 39.2657 44.7732 39.08L43.7998 38.1067L46.6665 35.2134L50.0132 38.56C49.2271 41.282 47.769 43.7625 45.7732 45.7733ZM50.6665 35.3867L48.5465 33.3334L50.3865 31.5067C50.4255 31.6109 50.4567 31.7178 50.4798 31.8267C50.6817 33.0019 50.7444 34.1968 50.6665 35.3867Z" fill="#1E2238"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #103

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/pricing/circle-star.png" alt="">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-16">
      <h3 class="font-heading mb-10">
        <span>Choose a plan for a more</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">advanced</span>
        <span>business</span>
      </h3>
      <div class="d-flex flex-wrap mb-10 gap-12 align-items-center justify-content-center">
        <div>
          <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.6996 9.61339C25.5757 9.48842 25.4282 9.38923 25.2657 9.32154C25.1032 9.25384 24.929 9.21899 24.7529 9.21899C24.5769 9.21899 24.4027 9.25384 24.2402 9.32154C24.0777 9.38923 23.9302 9.48842 23.8063 9.61339L13.8729 19.5601L9.69961 15.3734C9.57092 15.2491 9.41899 15.1513 9.25252 15.0857C9.08605 15.0201 8.90828 14.9879 8.72937 14.991C8.55047 14.9941 8.37392 15.0324 8.20982 15.1038C8.04571 15.1751 7.89726 15.278 7.77294 15.4067C7.64863 15.5354 7.55087 15.6873 7.48527 15.8538C7.41966 16.0203 7.38749 16.1981 7.39058 16.377C7.39368 16.5559 7.43198 16.7324 7.50331 16.8965C7.57463 17.0606 7.67758 17.2091 7.80628 17.3334L12.9263 22.4534C13.0502 22.5784 13.1977 22.6776 13.3602 22.7452C13.5227 22.8129 13.6969 22.8478 13.8729 22.8478C14.049 22.8478 14.2232 22.8129 14.3857 22.7452C14.5482 22.6776 14.6957 22.5784 14.8196 22.4534L25.6996 11.5734C25.8349 11.4485 25.943 11.297 26.0168 11.1283C26.0907 10.9597 26.1289 10.7775 26.1289 10.5934C26.1289 10.4093 26.0907 10.2271 26.0168 10.0585C25.943 9.88978 25.8349 9.73825 25.6996 9.61339Z" fill="#0BB678"></path>
          </svg>
          <span class="fs-7 fw-semibold">Cancel Anytime</span>
        </div>
        <div>
          <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.6996 9.61339C25.5757 9.48842 25.4282 9.38923 25.2657 9.32154C25.1032 9.25384 24.929 9.21899 24.7529 9.21899C24.5769 9.21899 24.4027 9.25384 24.2402 9.32154C24.0777 9.38923 23.9302 9.48842 23.8063 9.61339L13.8729 19.5601L9.69961 15.3734C9.57092 15.2491 9.41899 15.1513 9.25252 15.0857C9.08605 15.0201 8.90828 14.9879 8.72937 14.991C8.55047 14.9941 8.37392 15.0324 8.20982 15.1038C8.04571 15.1751 7.89726 15.278 7.77294 15.4067C7.64863 15.5354 7.55087 15.6873 7.48527 15.8538C7.41966 16.0203 7.38749 16.1981 7.39058 16.377C7.39368 16.5559 7.43198 16.7324 7.50331 16.8965C7.57463 17.0606 7.67758 17.2091 7.80628 17.3334L12.9263 22.4534C13.0502 22.5784 13.1977 22.6776 13.3602 22.7452C13.5227 22.8129 13.6969 22.8478 13.8729 22.8478C14.049 22.8478 14.2232 22.8129 14.3857 22.7452C14.5482 22.6776 14.6957 22.5784 14.8196 22.4534L25.6996 11.5734C25.8349 11.4485 25.943 11.297 26.0168 11.1283C26.0907 10.9597 26.1289 10.7775 26.1289 10.5934C26.1289 10.4093 26.0907 10.2271 26.0168 10.0585C25.943 9.88978 25.8349 9.73825 25.6996 9.61339Z" fill="#0BB678"></path>
          </svg>
          <span class="fs-7 fw-semibold">Cancel Anytime</span>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #104

Bootstrap

Saturn

<section class="pb-40 pt-12 pb-md-32 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/features/left-blue-center.png" alt="">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/features/orange-right-top.png" alt="">
  <div class="container position-relative">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row align-items-center">
        <div class="col-lg-6 order-last order-lg-first position-relative">
          <img class="img-fluid d-block w-100 mw-md mx-auto" src="saturn-assets/images/features/image-photo-1.png" alt="">
          <div class="position-absolute bottom-0 end-0 mx-4 mx-md-0 mb-n20 d-inline-block py-6 ps-6 pe-20 bg-white rounded-2 shadow-sm">
            <div class="d-flex mb-6 align-items-center">
              <div class="d-flex align-items-center justify-content-center rounded-pill bg-danger-light" style="width: 44px; height: 44px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 11.9999C20.7348 11.9999 20.4804 12.1053 20.2929 12.2928C20.1054 12.4804 20 12.7347 20 12.9999V18.9999C20 19.2652 19.8946 19.5195 19.7071 19.707C19.5196 19.8946 19.2652 19.9999 19 19.9999H5C4.73478 19.9999 4.48043 19.8946 4.29289 19.707C4.10536 19.5195 4 19.2652 4 18.9999V4.99994C4 4.73472 4.10536 4.48037 4.29289 4.29283C4.48043 4.1053 4.73478 3.99994 5 3.99994H11C11.2652 3.99994 11.5196 3.89458 11.7071 3.70705C11.8946 3.51951 12 3.26516 12 2.99994C12 2.73472 11.8946 2.48037 11.7071 2.29283C11.5196 2.1053 11.2652 1.99994 11 1.99994H5C4.20435 1.99994 3.44129 2.31601 2.87868 2.87862C2.31607 3.44123 2 4.20429 2 4.99994V18.9999C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 21.9999 5 21.9999H19C19.7956 21.9999 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 18.9999V12.9999C22 12.7347 21.8946 12.4804 21.7071 12.2928C21.5196 12.1053 21.2652 11.9999 21 11.9999ZM6 12.7599V16.9999C6 17.2652 6.10536 17.5195 6.29289 17.707C6.48043 17.8946 6.73478 17.9999 7 17.9999H11.24C11.3716 18.0007 11.5021 17.9755 11.6239 17.9257C11.7457 17.8759 11.8566 17.8026 11.95 17.7099L18.87 10.7799L21.71 7.99994C21.8037 7.90698 21.8781 7.79637 21.9289 7.67452C21.9797 7.55266 22.0058 7.42195 22.0058 7.28994C22.0058 7.15793 21.9797 7.02722 21.9289 6.90536C21.8781 6.7835 21.8037 6.6729 21.71 6.57994L17.47 2.28994C17.377 2.19621 17.2664 2.12182 17.1446 2.07105C17.0227 2.02028 16.892 1.99414 16.76 1.99414C16.628 1.99414 16.4973 2.02028 16.3754 2.07105C16.2536 2.12182 16.143 2.19621 16.05 2.28994L13.23 5.11994L6.29 12.0499C6.19732 12.1434 6.12399 12.2542 6.07423 12.376C6.02446 12.4979 5.99924 12.6283 6 12.7599ZM16.76 4.40994L19.59 7.23994L18.17 8.65994L15.34 5.82994L16.76 4.40994ZM8 13.1699L13.93 7.23994L16.76 10.0699L10.83 15.9999H8V13.1699Z" fill="black"></path>
                </svg>
              </div>
              <div class="ms-4">
                <span class="d-block fs-9 fw-semibold lh-1">Sign Up for Free</span>
                <span class="fs-10 text-secondary">We are not tolerant about taste</span>
              </div>
            </div>
            <div class="d-flex mb-6 align-items-center">
              <div class="d-flex align-items-center justify-content-center rounded-pill bg-success-light" style="width: 44px; height: 44px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V11C1 11.2652 1.10536 11.5196 1.29289 11.7071C1.48043 11.8946 1.73478 12 2 12H5V21C5 21.2652 5.10536 21.5196 5.29289 21.7071C5.48043 21.8946 5.73478 22 6 22H18C18.2652 22 18.5196 21.8946 18.7071 21.7071C18.8946 21.5196 19 21.2652 19 21V12H22C22.2652 12 22.5196 11.8946 22.7071 11.7071C22.8946 11.5196 23 11.2652 23 11V3C23 2.73478 22.8946 2.48043 22.7071 2.29289C22.5196 2.10536 22.2652 2 22 2ZM7 20V18C7.53043 18 8.03914 18.2107 8.41421 18.5858C8.78929 18.9609 9 19.4696 9 20H7ZM17 20H15C15 19.4696 15.2107 18.9609 15.5858 18.5858C15.9609 18.2107 16.4696 18 17 18V20ZM17 16C15.9391 16 14.9217 16.4214 14.1716 17.1716C13.4214 17.9217 13 18.9391 13 20H11C11 18.9391 10.5786 17.9217 9.82843 17.1716C9.07828 16.4214 8.06087 16 7 16V8H17V16ZM21 10H19V7C19 6.73478 18.8946 6.48043 18.7071 6.29289C18.5196 6.10536 18.2652 6 18 6H6C5.73478 6 5.48043 6.10536 5.29289 6.29289C5.10536 6.48043 5 6.73478 5 7V10H3V4H21V10ZM12 15C12.5933 15 13.1734 14.8241 13.6667 14.4944C14.1601 14.1648 14.5446 13.6962 14.7716 13.1481C14.9987 12.5999 15.0581 11.9967 14.9424 11.4147C14.8266 10.8328 14.5409 10.2982 14.1213 9.87868C13.7018 9.45912 13.1672 9.1734 12.5853 9.05764C12.0033 8.94189 11.4001 9.0013 10.8519 9.22836C10.3038 9.45542 9.83524 9.83994 9.50559 10.3333C9.17595 10.8266 9 11.4067 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15ZM12 11C12.1978 11 12.3911 11.0586 12.5556 11.1685C12.72 11.2784 12.8482 11.4346 12.9239 11.6173C12.9996 11.8 13.0194 12.0011 12.9808 12.1951C12.9422 12.3891 12.847 12.5673 12.7071 12.7071C12.5673 12.847 12.3891 12.9422 12.1951 12.9808C12.0011 13.0194 11.8 12.9996 11.6173 12.9239C11.4346 12.8482 11.2784 12.72 11.1685 12.5556C11.0586 12.3911 11 12.1978 11 12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11Z" fill="black"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #105

Bootstrap

Saturn

<section class="py-12 py-lg-24 bg-light-light position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="row align-items-center mb-20">
      <div class="col-lg-7 mb-8 mb-lg-0">
        <span class="badge px-3 py-1 mb-4 bg-primary-light text-primary text-uppercase">TESTIMONIALS</span>
        <h3 class="font-heading mb-4">
          <span>What our clients</span>
          <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">said</span>
        </h3>
        <p class="text-secondary">Risus viverra justo sagittis vestibulum metus.</p>
      </div>
      <div class="col-lg-5">
        <div class="d-flex align-items-center justify-content-lg-end">
          <button class="btn me-3 d-flex align-items-center justify-content-center btn-outline-light bg-light-light rounded-pill p-0" style="width: 56px; height: 56px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.17006 11.2899L13.4101 7.04995C13.503 6.95622 13.6136 6.88183 13.7355 6.83106C13.8573 6.78029 13.988 6.75415 14.1201 6.75415C14.2521 6.75415 14.3828 6.78029 14.5046 6.83106C14.6265 6.88183 14.7371 6.95622 14.8301 7.04995C15.0163 7.23731 15.1208 7.49076 15.1208 7.75495C15.1208 8.01913 15.0163 8.27259 14.8301 8.45995L11.2901 11.9999L14.8301 15.5399C15.0163 15.7273 15.1208 15.9808 15.1208 16.2449C15.1208 16.5091 15.0163 16.7626 14.8301 16.9499C14.7366 17.0426 14.6258 17.116 14.504 17.1657C14.3821 17.2155 14.2517 17.2407 14.1201 17.2399C13.9885 17.2407 13.858 17.2155 13.7362 17.1657C13.6143 17.116 13.5035 17.0426 13.4101 16.9499L9.17006 12.7099C9.07633 12.617 9.00194 12.5064 8.95117 12.3845C8.9004 12.2627 8.87426 12.132 8.87426 11.9999C8.87426 11.8679 8.9004 11.7372 8.95117 11.6154C9.00194 11.4935 9.07633 11.3829 9.17006 11.2899Z" fill="#424453"></path>
            </svg>
          </button>
          <button class="btn d-flex align-items-center justify-content-center btn-primary-light rounded-pill p-0" style="width: 56px; height: 56px;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z" fill="#FF460C"></path>
            </svg>
          </button>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #106

Bootstrap

Saturn

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-orange.svg" alt="">
      </a>
      <button class="navbar-burger navbar-toggler p-2 rounded-1 border-0 bg-light">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Featured</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Solutions</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Articles</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-sm btn-link text-white fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-outline-light" href="#">Create an account</a></div>
      </div>
    </div>
  </nav>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #107

Bootstrap

Saturn

<div class="position-fixed bottom-0 w-100 p-10 overflow-hidden">
  <div class="position-relative p-12 mw-xl ms-auto bg-dark rounded-3">
    <img class="position-absolute bottom-0 end-0 img-fluid" src="saturn-assets/images/cookies/cookies-dark-right-bottom.svg" alt="">
    <button class="position-absolute top-0 end-0 m-4 btn p-0">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.4099 11.9999L19.7099 5.70994C19.8982 5.52164 20.004 5.26624 20.004 4.99994C20.004 4.73364 19.8982 4.47825 19.7099 4.28994C19.5216 4.10164 19.2662 3.99585 18.9999 3.99585C18.7336 3.99585 18.4782 4.10164 18.2899 4.28994L11.9999 10.5899L5.70994 4.28994C5.52164 4.10164 5.26624 3.99585 4.99994 3.99585C4.73364 3.99585 4.47824 4.10164 4.28994 4.28994C4.10164 4.47825 3.99585 4.73364 3.99585 4.99994C3.99585 5.26624 4.10164 5.52164 4.28994 5.70994L10.5899 11.9999L4.28994 18.2899C4.19621 18.3829 4.12182 18.4935 4.07105 18.6154C4.02028 18.7372 3.99414 18.8679 3.99414 18.9999C3.99414 19.132 4.02028 19.2627 4.07105 19.3845C4.12182 19.5064 4.19621 19.617 4.28994 19.7099C4.3829 19.8037 4.4935 19.8781 4.61536 19.9288C4.73722 19.9796 4.86793 20.0057 4.99994 20.0057C5.13195 20.0057 5.26266 19.9796 5.38452 19.9288C5.50638 19.8781 5.61698 19.8037 5.70994 19.7099L11.9999 13.4099L18.2899 19.7099C18.3829 19.8037 18.4935 19.8781 18.6154 19.9288C18.7372 19.9796 18.8679 20.0057 18.9999 20.0057C19.132 20.0057 19.2627 19.9796 19.3845 19.9288C19.5064 19.8781 19.617 19.8037 19.7099 19.7099C19.8037 19.617 19.8781 19.5064 19.9288 19.3845C19.9796 19.2627 20.0057 19.132 20.0057 18.9999C20.0057 18.8679 19.9796 18.7372 19.9288 18.6154C19.8781 18.4935 19.8037 18.3829 19.7099 18.2899L13.4099 11.9999Z" fill="#80818C"></path>
      </svg>
    </button>
    <div class="position-relative">
      <span class="d-block fs-6 fw-semibold text-white mb-4">Cookies on this site</span>
      <p class="text-light-dark mb-6">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4"><a class="btn btn-outline-dark-light text-white" href="#">Decline</a><a class="btn btn-light-light text-primary" href="#">Accept all cokies</a></div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #108

Bootstrap

Saturn

<section class="py-12 py-lg-16 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mw-md-xl mx-auto mw-lg-none">
      <div class="row mb-20 align-items-center">
        <div class="col-lg-8">
          <div class="mw-xl">
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">JOIN OUR PLATFORM</span>
            <h3 class="font-heading mb-14">
              <span>Join &amp; build your</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">amazing</span>
              <span>apps</span>
            </h3>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="d-sm-flex">
            <svg width="100" height="2" viewBox="0 0 100 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="0.890381" x2="100" y2="0.890381" stroke="#FF6A55"></line></svg>
            <div class="flex-shrink-0 ms-sm-3 mt-sm-n3">
              <div class="mb-2">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">
                <img class="img-fluid" src="saturn-assets/images/cta/yellow-star.svg" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #109

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-50 translate-middle-x" src="saturn-assets/images/http-codes/blue-orange-double-light.png" alt="">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto text-center">
      <img class="img-fluid d-block mb-6 mx-auto" src="saturn-assets/images/http-codes/alien-ship.png" alt="">
      <h1 class="font-heading display-2 fw-bold mb-0">404</h1>
      <h4 class="font-heading lh-sm mb-6">Oops! Can't Find That Page</h4>
      <p class="mw-lg mx-auto lead fs-6 text-secondary mb-12 mb-lg-20">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <a class="btn btn-primary rounded-pill" href="#">Take me home</a>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #110

Bootstrap

Saturn

<section class="pt-12 pb-8 pt-lg-8 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 order-last order-lg-first">
          <div class="position-relative">
            <div class="position-absolute top-0 start-0 h-100 w-100 pt-12 px-8 px-sm-16 pb-16">
              <div class="d-flex flex-column h-100 justify-content-between">
                <div class="d-sm-flex align-items-center justify-content-between">
                  <img class="img-fluid" src="saturn-assets/logos/logo-saturn-light.svg" alt="">
                  <div class="mt-6 mt-sm-0">
                    <button class="btn btn-link p-0 me-2">
                      <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="white"></rect></svg>
                    </button>
                    <button class="btn btn-link p-0 me-2">
                      <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="white"></rect></svg>
                    </button>
                    <button class="btn btn-link p-0">
                      <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="#FF460C"></rect></svg>
                    </button>
                  </div>
                </div>
                <div class="mw-md">
                  <div class="d-flex mb-6 align-items-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #111

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hiddepx-8 px-sm-12 px-md-20 py-20 px-8 px-sm-12 px-md-20 py-20 n">
  <img class="position-absolute bottom-0 start-0" src="saturn-assets/images/blog/blue-light-left.png" alt="">
  <div class="container position-relative">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row align-items-end mb-20">
        <div class="col-lg-8 mb-10 mb-lg-0">
          <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">OUR BLOG</span>
          <h2 class="font-heading mb-0">
            <span>News &amp;</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Articles</span>
          </h2>
        </div>
        <div class="col-lg-4 text-lg-end"><a class="btn btn-primary-light text-primary rounded-pill" href="#">See More Articles</a></div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <a class="btn border-0 p-0 w-100 text-start position-relative" href="#">
            <img class="img-fluid d-block w-100" style="min-height: 270px;" src="saturn-assets/images/blog/blog-photo-big-1.png" alt="">
            <div class="position-absolute bottom-0 start-0 w-100 p-5">
              <div class="p-5 bg-white rounded-3">
                <h5 class="fs-6 lh-sm mb-0">Consectures Content Velit officia consequat duis</h5>
              </div>
            </div>
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #112

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute bottom-0 end-0" src="saturn-assets/images/footers/orange-light-bottom.png" alt="">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/footers/blue-light-left.png" alt="">
  <div class="container position-relative">
    <div class="d-flex pb-10 mb-10 justify-content-center border-bottom">
      <a class="btn btn-link p-0 mb-10 mb-md-0" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
    </div>
    <div class="d-flex flex-wrap gap-10 mb-14 align-items-center justify-content-center"><a class="btn btn-link p-0 text-dark" href="#">Product</a><a class="btn btn-link p-0 text-dark" href="#">Features</a><a class="btn btn-link p-0 text-dark" href="#">Pricing</a><a class="btn btn-link p-0 text-dark" href="#">Resources</a><a class="btn btn-link p-0 text-dark" href="#">Careers</a><a class="btn btn-link p-0 text-dark" href="#">Help</a><a class="btn btn-link p-0 text-dark" href="#">Privacy</a></div>
    <p class="text-center text-secondary mb-0">© 2023 saturn. All rights reserved.</p>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #113

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/newsletter/half-star-circle-top.png" alt="">
  <div class="container position-relative">
    <img class="position-absolute top-0 start-0 w-100 h-100 img-fluid" src="saturn-assets/images/newsletter/shape-background.png" alt="">
    <div class="px-8 px-md-16 py-24 position-relative">
      <div class="row align-items-end">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <h4 class="font-heading fw-semibold lh-sm mb-16">Sign up for our newsletter</h4>
          <div class="d-sm-flex mb-0">
            <div>
              <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#1E254C"></path>
              </svg>
            </div>
            <div class="mt-6 mt-sm-0 ps-sm-8 mw-sm">
              <p class="lead text-secondary mb-0">Stay in the loop with everything you need to know.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-lg-lg ms-auto">
            <form action="">
              <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
                <input class="form-control" type="email" name="" id="" placeholder="pat@shuffle.dev">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #114

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/cta/light-blue-right.png" alt="">
  <div class="position-relative container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-7 mb-24 mb-lg-0">
          <div>
            <h3 class="font-heading mb-10">
              <span>Best ways to send money</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">internationally</span>
            </h3>
            <ul class="list-unstyled mb-10">
              <li class="d-flex mb-4 align-items-center">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="11" cy="11" r="11" fill="#00AD6F"></circle>
                  <path d="M15.6666 7.5L9.24992 13.9167L6.33325 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ms-3 text-secondary">Agile web design and development methodology</span>
              </li>
              <li class="d-flex mb-4 align-items-center">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="11" cy="11" r="11" fill="#00AD6F"></circle>
                  <path d="M15.6666 7.5L9.24992 13.9167L6.33325 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #115

Bootstrap

Saturn

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-50 start-0 translate-middle-y" src="saturn-assets/images/stats/left-orange-light.png" alt="">
  <div class="position-relative container">
    <div class="row align-items-end">
      <div class="col-lg-7 col-xl-6 mb-12 mb-lg-0">
        <div class="mw-sm mw-sm-md mw-lg-lg mx-auto mx-lg-0">
          <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
          <h2 class="font-heading mb-0">
            <span>Achievements This</span>
            <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Month</span>
          </h2>
        </div>
      </div>
      <div class="col-lg-5 col-xl-6">
        <div class="mw-sm-md mw-lg-lg mx-auto me-lg-0">
          <div class="d-sm-flex align-items-center justify-content-between">
            <div class="d-flex flex-column align-items-center mb-12 mb-sm-0">
              <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="40" cy="40" r="40" fill="#FFE9B0"></circle>
                <path d="M53.3333 30.7733C53.3344 29.9603 53.0941 29.1652 52.643 28.4888C52.1918 27.8124 51.55 27.2852 50.7989 26.9739C50.0478 26.6626 49.2212 26.5813 48.4239 26.7402C47.6265 26.8992 46.8943 27.2912 46.3199 27.8666L42.5733 31.6133L33.9199 28.7333C33.6895 28.6609 33.4438 28.6524 33.209 28.7088C32.9741 28.7651 32.759 28.8842 32.5866 29.0533L29.4133 32.2C29.2629 32.3521 29.1513 32.5381 29.088 32.7424C29.0246 32.9467 29.0113 33.1632 29.0493 33.3737C29.0872 33.5842 29.1752 33.7825 29.3058 33.9518C29.4365 34.1211 29.6059 34.2566 29.7999 34.3466L36.7066 37.48L33.2399 40.9466L30.9599 39.8C30.7137 39.6668 30.4319 39.6144 30.1543 39.6503C29.8767 39.6862 29.6174 39.8085 29.4133 40L27.0533 42.4133C26.8049 42.6631 26.6655 43.0011 26.6655 43.3533C26.6655 43.7056 26.8049 44.0435 27.0533 44.2933L35.7066 52.9466C35.9564 53.195 36.2943 53.3344 36.6466 53.3344C36.9988 53.3344 37.3368 53.195 37.5866 52.9466L39.9999 50.5867C40.2 50.3886 40.3323 50.1323 40.3778 49.8545C40.4233 49.5766 40.3797 49.2915 40.2533 49.04L39.1066 46.76L42.5733 43.2933L45.7066 50.2C45.7967 50.394 45.9321 50.5634 46.1014 50.6941C46.2708 50.8247 46.469 50.9127 46.6795 50.9506C46.89 50.9886 47.1065 50.9753 47.3108 50.9119C47.5151 50.8486 47.7011 50.737 47.8533 50.5867L50.9999 47.44C51.169 47.2676 51.2881 47.0524 51.3444 46.8176C51.4008 46.5828 51.3923 46.337 51.3199 46.1066L48.4399 37.4533L52.1333 33.68C52.5162 33.2994 52.8195 32.8464 53.0256 32.3473C53.2316 31.8483 53.3362 31.3132 53.3333 30.7733ZM50.2399 31.8L45.9199 36.12C45.7508 36.2924 45.6317 36.5075 45.5754 36.7424C45.519 36.9772 45.5275 37.2229 45.5999 37.4533L48.4799 46.0933L47.2799 47.2933L44.1466 40.4C44.0577 40.2042 43.9227 40.0328 43.7532 39.9005C43.5837 39.7682 43.3847 39.6788 43.1733 39.64C42.96 39.6011 42.7405 39.6147 42.5337 39.6798C42.3269 39.7448 42.1391 39.8593 41.9866 40.0133L36.4933 45.56C36.296 45.757 36.1655 46.0109 36.1201 46.2859C36.0746 46.561 36.1166 46.8433 36.2399 47.0933L37.3333 49.3333L36.5866 50.08L29.8799 43.36L30.6666 42.6666L32.9466 43.8133C33.1966 43.9367 33.4789 43.9786 33.754 43.9331C34.029 43.8877 34.2829 43.7572 34.4799 43.56L39.9999 38.0133C40.1531 37.8613 40.2671 37.6744 40.3322 37.4686C40.3972 37.2628 40.4113 37.0443 40.3733 36.8319C40.3353 36.6194 40.2462 36.4194 40.1138 36.2489C39.9815 36.0785 39.8097 35.9427 39.6133 35.8533L32.6666 32.72L33.8666 31.52L42.5066 34.4C42.737 34.4724 42.9827 34.4809 43.2175 34.4245C43.4524 34.3682 43.6675 34.2491 43.8399 34.08L48.1599 29.76C48.2928 29.6241 48.4515 29.5162 48.6266 29.4425C48.8018 29.3688 48.9899 29.3308 49.1799 29.3308C49.37 29.3308 49.5581 29.3688 49.7332 29.4425C49.9084 29.5162 50.0671 29.6241 50.1999 29.76C50.339 29.8888 50.449 30.0459 50.5226 30.2206C50.5961 30.3954 50.6316 30.5838 50.6266 30.7733C50.6338 30.9616 50.6033 31.1494 50.5369 31.3257C50.4705 31.502 50.3695 31.6633 50.2399 31.8Z" fill="#1E2238"></path>
              </svg>
              <div class="text-center mt-4">
                <span class="d-block h3 mb-1">320</span>
                <span class="fs-7 text-secondary">Products Created</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #116

Bootstrap

Saturn

<section class="py-12 py-lg-16 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-20 text-center">
      <h2 class="font-heading mb-6">
        <span>How Saturn</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Works</span>
      </h2>
      <p class="mw-sm mx-auto text-secondary">We are a team of 20+ who are passionate about making the world a better place.</p>
    </div>
    <div class="mw-lg mx-auto mw-lg-none py-24 px-10 px-md-16 px-xl-24 bg-danger-light rounded-2">
      <div class="row">
        <div class="col-lg-6">
          <div class="d-flex align-items-center pb-12 mb-12 border-bottom border-light-dark">
            <div class="d-flex flex-shrink-0 me-6 align-items-center justify-content-center rounded-pill bg-info-light" style="width: 60px; height: 60px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.2 13.73C9.01933 13.537 8.76956 13.4233 8.50532 13.4139C8.24108 13.4046 7.98389 13.5002 7.79 13.68C6.60767 14.7214 5.65882 16.001 5.00566 17.4349C4.3525 18.8687 4.00979 20.4244 4 22C4 22.2652 4.10536 22.5196 4.29289 22.7071C4.48043 22.8946 4.73478 23 5 23C5.26522 23 5.51957 22.8946 5.70711 22.7071C5.89464 22.5196 6 22.2652 6 22C6.00687 20.6983 6.2914 19.413 6.83461 18.23C7.37782 17.047 8.16719 15.9936 9.15 15.14C9.34304 14.9593 9.45668 14.7096 9.46605 14.4453C9.47542 14.1811 9.37976 13.9239 9.2 13.73ZM19.37 18.37C18.9975 17.2922 18.4575 16.2798 17.77 15.37C16.7412 14.0372 15.4853 12.8963 14.06 12C16.3 10.57 20 7.4 20 2C20 1.73478 19.8946 1.48043 19.7071 1.29289C19.5196 1.10536 19.2652 1 19 1C18.7348 1 18.4804 1.10536 18.2929 1.29289C18.1054 1.48043 18 1.73478 18 2C18 7.4 13.41 10.17 12 10.89C11.0293 10.3726 10.1258 9.73787 9.31 9H12C12.2652 9 12.5196 8.89464 12.7071 8.70711C12.8946 8.51957 13 8.26522 13 8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7H7.55C7.1382 6.37554 6.80248 5.70412 6.55 5H15C15.2652 5 15.5196 4.89464 15.7071 4.70711C15.8946 4.51957 16 4.26522 16 4C16 3.73478 15.8946 3.48043 15.7071 3.29289C15.5196 3.10536 15.2652 3 15 3H6.06C6.01949 2.66821 5.99945 2.33425 6 2C6 1.73478 5.89464 1.48043 5.70711 1.29289C5.51957 1.10536 5.26522 1 5 1C4.73478 1 4.48043 1.10536 4.29289 1.29289C4.10536 1.48043 4 1.73478 4 2C4 9.57 11.3 12.79 11.61 12.92C12.735 13.4606 13.7758 14.1612 14.7 15H12C11.7348 15 11.4804 15.1054 11.2929 15.2929C11.1054 15.4804 11 15.7348 11 16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17H16.43C16.8446 17.6229 17.1804 18.2946 17.43 19H9C8.73478 19 8.48043 19.1054 8.29289 19.2929C8.10536 19.4804 8 19.7348 8 20C8 20.2652 8.10536 20.5196 8.29289 20.7071C8.48043 20.8946 8.73478 21 9 21H17.94C17.9802 21.3318 18.0003 21.6658 18 22C18 22.2652 18.1054 22.5196 18.2929 22.7071C18.4804 22.8946 18.7348 23 19 23C19.2652 23 19.5196 22.8946 19.7071 22.7071C19.8946 22.5196 20 22.2652 20 22C20.0036 21.2643 19.9299 20.5303 19.78 19.81C19.6826 19.3197 19.5454 18.8381 19.37 18.37Z" fill="#1E2238"></path>
              </svg>
            </div>
            <div>
              <span class="d-block fs-6 fw-semibold">Simple &amp; Uniuqe</span>
              <span class="fs-9 text-secondary">Created by our talented designer</span>
            </div>
          </div>
          <div class="d-flex align-items-center pb-12 mb-12 border-bottom border-light-dark">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #117

Bootstrap

Saturn

<div class="position-fixed bottom-0 w-100 p-16 overflow-hidden">
  <div class="mw-xl mx-auto d-flex px-6 align-items-center justify-content-center position-relative">
    <img class="position-absolute top-0 start-0 w-100 h-100 mt-6 rounded-3" style="object-fit: cover;" src="saturn-assets/images/cookies/gradient-background.png" alt="">
    <div class="p-12 bg-white shadow-sm rounded-3 position-relative">
      <img class="position-absolute bottom-0 end-0" src="saturn-assets/images/cookies/cookie-white-background.svg" alt="">
      <div class="position-relative">
        <span class="d-block fs-6 fw-semibold mb-4">Cookies on this site</span>
        <p class="text-secondary mb-6">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
        <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4"><a class="btn btn-sm btn-outline-light text-primary" href="#">Decline</a><a class="btn btn-sm btn-primary" href="#">Accept all cokies</a></div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #118

Bootstrap

Saturn

<section class="py-12 py-sm-24 position-relative overflow-hidden">
  <div class="container">
    <div class="position-relative py-24 px-8 px-sm-16 px-md-24 rounded-2 overflow-hidden">
      <img class="position-absolute top-0 start-0 h-100 w-100" src="saturn-assets/images/newsletter/bg-gradient-color-big.png" alt="">
      <div class="position-relative mw-lg mw-lg-4xl">
        <h3 class="mw-3xl font-heading text-white fw-semibold lh-sm mb-6">Sign up and get to know our updates</h3>
        <div class="d-sm-flex">
          <div>
            <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="white"></path>
            </svg>
          </div>
          <div class="mt-6 mt-sm-0 ps-sm-8">
            <p class="lead text-white mb-14">Get insider access to our company by subscribing to our newsletter and stay informed about our products, services, and initiatives.</p>
            <div class="mw-lg">
              <form action="">
                <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
                  <input class="form-control" type="email" name="" id="" placeholder="pat@shuffle.dev">
                  <button class="flex-shrink-0 btn btn-sm h-100 btn-info d-flex align-items-center justify-content-center fs-8" type="submit">
                    <span>Subscribe</span>
                    <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
                    </svg>
                  </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #119

Bootstrap

Saturn

<section class="position-relative overflow-hidden bg-dark">
  <img class="d-none d-md-block position-absolute top-0 end-0 col-6 h-100" style="object-fit: cover;" src="saturn-assets/images/http-codes/pink-image.png" alt="">
  <div class="container position-relative">
    <div class="mw-xs mw-lg-sm mx-auto mx-md-0 py-24 py-md-52">
      <h2 class="font-heading text-white mb-2">404</h2>
      <h5 class="font-heading text-white lh-sm mb-6">Oops! Can't Find That Page</h5>
      <p class="fs-6 text-white mb-12">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <a class="btn btn-primary rounded-pill" href="#">Take me home</a>
    </div>
  </div>
  <img class="d-block d-md-none w-100" style="object-fit: cover;" src="saturn-assets/images/http-codes/pink-image.png" alt="">
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #120

Bootstrap

Saturn

<section class="py-12 pt-lg-24 pt-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0 w-100 h-100" src="saturn-assets/images/footers/orange-background.png" alt="">
  <div class="container position-relative">
    <div class="mw-2xl pe-10 pe-md-0 mb-24 mb-lg-32 mb-xl-44">
      <h3 class="font-heading text-white mb-20">
        <span>Join &amp; Let’s Build</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Magnificent</span>
        <span>Products</span>
      </h3>
      <div class="d-flex flex-wrap gap-10 align-items-center">
        <div class="d-flex mw-xs align-items-center">
          <span class="flex-shrink-0">
            <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="23" cy="23" r="23" fill="white"></circle>
              <path d="M32 21C32 28 23 34 23 34C23 34 14 28 14 21C14 18.6131 14.9482 16.3239 16.636 14.636C18.3239 12.9482 20.6131 12 23 12C25.3869 12 27.6761 12.9482 29.364 14.636C31.0518 16.3239 32 18.6131 32 21Z" stroke="#FF460C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M23 24C24.6569 24 26 22.6569 26 21C26 19.3431 24.6569 18 23 18C21.3431 18 20 19.3431 20 21C20 22.6569 21.3431 24 23 24Z" stroke="#FF460C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <span class="ms-4 text-light">1929, Bancangan, Sambit, Wakanda Kidul</span>
        </div>
        <div class="d-flex mw-xs align-items-center">
          <span class="flex-shrink-0">
            <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="23" cy="23" r="23" fill="white"></circle>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #101

Get the code for 13,400+ components

Bootstrap Component #102

Get the code for 13,400+ components

Bootstrap Component #103

Get the code for 13,400+ components

Bootstrap Component #104

Get the code for 13,400+ components

Bootstrap Component #105

Get the code for 13,400+ components

Bootstrap Component #106

Get the code for 13,400+ components

Bootstrap Component #107

Get the code for 13,400+ components

Bootstrap Component #108

Get the code for 13,400+ components

Bootstrap Component #109

Get the code for 13,400+ components

Bootstrap Component #110

Get the code for 13,400+ components

Bootstrap Component #111

Get the code for 13,400+ components

Bootstrap Component #112

Get the code for 13,400+ components

Bootstrap Component #113

Get the code for 13,400+ components

Bootstrap Component #114

Get the code for 13,400+ components

Bootstrap Component #115

Get the code for 13,400+ components

Bootstrap Component #116

Get the code for 13,400+ components

Bootstrap Component #117

Get the code for 13,400+ components

Bootstrap Component #118

Get the code for 13,400+ components

Bootstrap Component #119

Get the code for 13,400+ components

Bootstrap Component #120

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support