Stylebook

id: w-s-11

Steps

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?

1

Zvolíte si velikost, typ, barvu a počet kusů tašek

2

Vyberete tašku bez potisku, nebo si navrhnete vlastní

3

Platbu provedete klidne online a hned

4

Expedice tašek do 24h

5

Zvolíte si velikost, typ, barvu a počet kusů tašek

6

Vyberete tašku bez potisku, nebo si navrhnete vlastní

7

Platbu provedete klidne online a hned

        {% include "@Components/sections/steps-section/steps-section.twig" with {props: {
  header: {
    heading: {
      title: "Steps",
    },
    perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?"
  },
  group: {
    items: steps_sample,
  },
}} %}

          


<section class="base-section  s-steps overflow-hidden">
  <div class="base-section__container container">
    
          <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h2 class="base-heading mb-0 u-fw-700 u-h2">
            Steps
      </h2>
  
      <div class="base-header__description entry-content mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</div>
  
  
  

</header>
    
    

  <div class="g-steps row justify-content-center">
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr --first">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><path fill="#FACA9D" fill-rule="evenodd" d="M14.484 37.867 17.464 20h17.602l2.904 17.866H14.484Z" clip-rule="evenodd"/><path fill="#15324F" fill-rule="evenodd" d="m36.476 18.394 3.51 21.605H12.453l3.601-21.605h20.423Zm-18.24 2.577-2.741 16.45h21.113a.3.3 0 0 0 .294-.344l-2.618-16.106H18.236Z" clip-rule="evenodd"/><path fill="#15324F" fill-rule="evenodd" d="M28.145 29.196v-4.46h2.577v4.46c0 2.458-2 4.46-4.46 4.46a4.466 4.466 0 0 1-4.46-4.46v-4.46h2.579v4.46c0 1.038.844 1.882 1.882 1.882a1.885 1.885 0 0 0 1.882-1.882ZM2.577 35.54c0 1.038.844 1.882 1.883 1.882h4.604L8.634 40H4.46a4.466 4.466 0 0 1-4.461-4.46V16.511c0-2.46 2.001-4.461 4.46-4.461h1.883V6.045A6.052 6.052 0 0 1 12.388 0a6.052 6.052 0 0 1 6.046 6.045v6.006h6.343v2.578H4.46a1.884 1.884 0 0 0-1.883 1.883v19.027ZM8.92 6.044v6.006h6.935V6.045a3.472 3.472 0 0 0-3.467-3.468A3.472 3.472 0 0 0 8.92 6.045Z" clip-rule="evenodd"/></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-support-orange-400">1</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Zvolíte si  velikost, typ, barvu a&nbsp;počet kusů tašek</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><g clip-path="url(#clip0_3547_91044)"><path fill="#15324F" fill-rule="evenodd" d="M17.014 2.822c-.961 0-1.74.778-1.74 1.74v7.246h-2.822V4.561A4.562 4.562 0 0 1 17.014 0h6.3a4.562 4.562 0 0 1 4.563 4.562v7.247h-2.823V4.561c0-.96-.778-1.739-1.74-1.739h-6.3Z" clip-rule="evenodd"/><path fill="#15324F" fill-rule="evenodd" d="M3 5.67h34.329v26.616A7.713 7.713 0 0 1 29.616 40H10.713A7.713 7.713 0 0 1 3 32.286V5.67Zm2.823 2.823v23.793a4.89 4.89 0 0 0 4.89 4.89h18.903a4.89 4.89 0 0 0 4.89-4.89V8.493H5.823Z" clip-rule="evenodd"/><path fill="#15324F" d="M15.953 30.875h-3.665v2.823h3.665v-2.823ZM28.042 30.875h-10.11v2.823h10.11v-2.823Z"/><path fill="#15324F" fill-rule="evenodd" d="m20.165 15.365 7.218 12.032H12.946l7.219-12.032Zm-2.234 9.21h4.467l-2.233-3.722-2.234 3.721Z" clip-rule="evenodd"/><path fill="#B1D0FE" fill-rule="evenodd" d="M17.931 24.574h4.466l-2.233-3.722-2.233 3.722Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_3547_91044"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-support-blue-400">2</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Vyberete tašku bez potisku, nebo si navrhnete vlastní</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><g clip-path="url(#clip0_3547_91050)"><path fill="#FEB1BF" d="M8.837 1.838h22v14h-22z"/><path fill="#15324F" fill-rule="evenodd" d="M7.561 0H32.44v17H7.56V0Zm2.823 2.823v2.015h19.232V2.823H10.384ZM29.616 7.66H10.384v6.517h19.232V7.66ZM11.79 24.64a4.496 4.496 0 0 0-4.121 2.698l-.37.846H2.823v8.992H27.1l9.568-9.567a1.74 1.74 0 0 0-2.46-2.46l-6.973 6.974H14.048V29.3h11.19v-1.74c0-.96-.778-1.739-1.738-1.739h-4.163c-2.128 0-4.217-.362-6.213-.98-.42-.13-.867-.201-1.333-.201Zm16.264 2.67A4.562 4.562 0 0 0 23.5 23h-4.163c-1.808 0-3.614-.307-5.378-.854a7.313 7.313 0 0 0-2.168-.327 7.313 7.313 0 0 0-6.27 3.544H0V40h28.27l10.394-10.394a4.562 4.562 0 0 0-6.452-6.452l-4.157 4.157Z" clip-rule="evenodd"/><path fill="#15324F" d="M20.675 9.462h-8.838v2.8h8.838v-2.8Z"/></g><defs><clipPath id="clip0_3547_91050"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-support-pink-400">3</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Platbu provedete klidne online a&nbsp;hned</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><mask id="mask0_3547_91056" width="40" height="40" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M40 0H0v40h40V0Z"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#mask0_3547_91056)"><path fill="#15324F" d="m12.506 42.943-1.747-6.518 5.259-1.409-.36-1.34a4.736 4.736 0 0 1-.16-1.378l.007-.207L.72 23.77l-.143-.532-.005-.02C-2.021 13.536 4.446 3.691 15.27.791c10.823-2.9 21.346 2.394 23.94 12.075l.148.552-8.642 14.598.108.175c.239.385.427.812.55 1.274l.36 1.34 4.755-1.274 3.267 12.19-2.578.69-2.575-9.615-20.579 5.514 1.057 3.943-2.575.69Zm16.608-11.437-.36-1.34a2.035 2.035 0 0 0-2.49-1.438l-6.548 1.755a2.034 2.034 0 0 0-1.438 2.492l.358 1.34 10.479-2.809ZM13.732 14.501l.043.749.534-.527c1.055-1.037 2.415-2.038 4.032-2.472 1.618-.433 3.296-.246 4.728.125l.725.189-.337-.67c-2.066-4.084-5.235-6.587-7.028-7.757l-.319-.208-.17.338c-.97 1.91-2.461 5.662-2.208 10.233Zm.848 4.134 6.389 8.705 2.638-.707 1.18-10.735-.218-.103c-1.369-.644-3.69-1.415-5.529-.924-1.838.494-3.458 2.32-4.323 3.565l-.136.199Zm13.005-3.367-1.173 10.68.378-.002a4.735 4.735 0 0 1 1.534.257l.263.088 7.86-13.28-.18-.186c-.663-.68-2.24-1.969-4.127-1.464-1.981.532-3.71 2.614-4.51 3.839l-.045.068ZM12.491 5.341l.31-.82-.781.399c-4.8 2.44-8.082 6.606-9.024 11.248l-.158.787.675-.435a6.048 6.048 0 0 1 1.73-.759c1.886-.505 3.858-.17 5.423.325l.497.157-.057-.518c-.458-4.192.41-7.815 1.385-10.384ZM3.04 21.963l13.449 7.57.181-.208a4.722 4.722 0 0 1 1.2-.989l.33-.188-6.358-8.662-.071-.036c-1.304-.659-3.844-1.6-5.826-1.069-1.89.505-2.61 2.41-2.843 3.332l-.062.25ZM33.315 8.535l.801.038-.53-.602c-3.136-3.548-8.06-5.516-13.44-5.23l-.875.047.68.555c2.127 1.733 4.692 4.44 6.39 8.3l.21.477.352-.384c1.108-1.211 2.646-2.488 4.535-2.993a6.086 6.086 0 0 1 1.877-.208Z"/><path fill="#FFF27D" d="m13.731 14.501.043.749.534-.527c1.055-1.037 2.415-2.038 4.032-2.472 1.618-.433 3.296-.246 4.728.125l.725.189-.337-.67c-2.066-4.084-5.235-6.587-7.028-7.757l-.319-.208-.17.338c-.97 1.91-2.461 5.662-2.208 10.233Z"/></g></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-secondary-400">4</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Expedice tašek do&nbsp;24h</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><g fill-rule="evenodd" clip-path="url(#clip0_3547_91062)" clip-rule="evenodd"><path fill="#ADC9BD" d="M14.484 37.867 17.464 20h17.602l2.904 17.866H14.484Z"/><path fill="#15324F" d="m36.476 18.394 3.51 21.605H12.453l3.601-21.605h20.423Zm-18.24 2.577-2.741 16.45h21.113a.3.3 0 0 0 .294-.344l-2.618-16.106H18.236Z"/><path fill="#15324F" d="M28.145 29.196v-4.46h2.577v4.46c0 2.458-2 4.46-4.46 4.46a4.466 4.466 0 0 1-4.46-4.46v-4.46h2.579v4.46c0 1.038.844 1.882 1.882 1.882a1.885 1.885 0 0 0 1.882-1.882ZM2.577 35.54c0 1.038.844 1.882 1.883 1.882h4.604L8.634 40H4.46a4.466 4.466 0 0 1-4.461-4.46V16.511c0-2.46 2.001-4.461 4.46-4.461h1.883V6.045A6.052 6.052 0 0 1 12.388 0a6.052 6.052 0 0 1 6.046 6.045v6.006h6.343v2.578H4.46a1.884 1.884 0 0 0-1.883 1.883v19.027ZM8.92 6.044v6.006h6.935V6.045a3.472 3.472 0 0 0-3.467-3.468A3.472 3.472 0 0 0 8.92 6.045Z"/></g><defs><clipPath id="clip0_3547_91062"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle ">5</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Zvolíte si  velikost, typ, barvu a&nbsp;počet kusů tašek</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><g clip-path="url(#clip0_3547_91070)"><path fill="#15324F" fill-rule="evenodd" d="M17.014 2.822c-.961 0-1.74.778-1.74 1.74v7.246h-2.822V4.561A4.562 4.562 0 0 1 17.014 0h6.3a4.562 4.562 0 0 1 4.563 4.562v7.247h-2.823V4.561c0-.96-.778-1.739-1.74-1.739h-6.3Z" clip-rule="evenodd"/><path fill="#15324F" fill-rule="evenodd" d="M3 5.67h34.329v26.616A7.713 7.713 0 0 1 29.616 40H10.713A7.713 7.713 0 0 1 3 32.286V5.67Zm2.823 2.823v23.793a4.89 4.89 0 0 0 4.89 4.89h18.903a4.89 4.89 0 0 0 4.89-4.89V8.493H5.823Z" clip-rule="evenodd"/><path fill="#15324F" d="M15.953 30.875h-3.665v2.823h3.665v-2.823ZM28.042 30.875h-10.11v2.823h10.11v-2.823Z"/><path fill="#15324F" fill-rule="evenodd" d="m20.165 15.365 7.218 12.032H12.946l7.219-12.032Zm-2.234 9.21h4.467l-2.233-3.722-2.234 3.721Z" clip-rule="evenodd"/><path fill="#FACA9D" fill-rule="evenodd" d="M17.931 24.574h4.466l-2.233-3.722-2.233 3.722Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_3547_91070"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-support-orange-400">6</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Vyberete tašku bez potisku, nebo si navrhnete vlastní</span>
  </div>

</article>
      </div>
          <div class="g-steps__cell col-xl-3 col-md-4 col-sm-6">
                                  
<article class="i-step d-flex gap-3 flex-column align-items-center text-center u-posr --last">

  <div class="i-step__icon d-flex align-items-center justify-content-center flex-shrink-0 u-posr u-bg-white u-border u-border--tertiary-500">
      
  <span class="icon d-flex align-items-center justify-content-center  --xxl">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><g clip-path="url(#clip0_3547_91076)"><path fill="#B1D0FE" d="M8.837 1.838h22v14h-22z"/><path fill="#15324F" fill-rule="evenodd" d="M7.561 0H32.44v17H7.56V0Zm2.823 2.823v2.015h19.232V2.823H10.384ZM29.616 7.66H10.384v6.517h19.232V7.66ZM11.79 24.64a4.496 4.496 0 0 0-4.121 2.698l-.37.846H2.823v8.992H27.1l9.568-9.567a1.74 1.74 0 0 0-2.46-2.46l-6.973 6.974H14.048V29.3h11.19v-1.74c0-.96-.778-1.739-1.738-1.739h-4.163c-2.128 0-4.217-.362-6.213-.98-.42-.13-.867-.201-1.333-.201Zm16.264 2.67A4.562 4.562 0 0 0 23.5 23h-4.163c-1.808 0-3.614-.307-5.378-.854a7.313 7.313 0 0 0-2.168-.327 7.313 7.313 0 0 0-6.27 3.544H0V40h28.27l10.394-10.394a4.562 4.562 0 0 0-6.452-6.452l-4.157 4.157Z" clip-rule="evenodd"/><path fill="#15324F" d="M20.675 9.462h-8.838v2.8h8.838v-2.8Z"/></g><defs><clipPath id="clip0_3547_91076"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>      </span>

          <span class="i-step__count d-flex justify-content-center align-items-center u-rounded-full u-posa u-fw-700 u-top-50-p u-left-0 u-translate-middle --bg-support-blue-400">7</span>
      </div>
  <div class="i-step__body d-flex flex-column gap-2">
    <span class="i-step__heading u-fw-600 u-fz-20">Platbu provedete klidne online a&nbsp;hned</span>
  </div>

</article>
      </div>
      </div>

    </div>
</section>