Vebego Component Library

Section Block 

<section class="org-section-block">
    <div class="vebego-container">
        <h2 class="atm-heading ">Waar voel jij je thuis?</h2>

        <div class="atm-paragraph text-md">Selecteer de omgeving die bij je past</div>

        <section class="mol-section-slider">

            <div class="cards-grid swiper-container">
                <div class="swiper-wrapper">
                    <div class="card-item swiper-slide">
                        <div class="atm-slide-section">
                            <picture class="atm-image ">
                                <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                                <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                                <img class="" src="https://picsum.photos/id/200/400/500" alt="" loading="lazy">
                            </picture>
                            <div class="slide-content">
                                <div class="slide-content-inner">
                                    <h3 class="atm-heading ">Facility management</h3>

                                    <i class="atm-icon  far fa-external-link   "></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-item swiper-slide">
                        <div class="atm-slide-section">
                            <picture class="atm-image ">
                                <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                                <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                                <img class="" src="https://picsum.photos/id/201/400/500" alt="" loading="lazy">
                            </picture>
                            <div class="slide-content">
                                <div class="slide-content-inner">
                                    <h3 class="atm-heading ">Facility management</h3>

                                    <i class="atm-icon  far fa-external-link   "></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-item swiper-slide">
                        <div class="atm-slide-section">
                            <picture class="atm-image ">
                                <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                                <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                                <img class="" src="https://picsum.photos/id/202/400/500" alt="" loading="lazy">
                            </picture>
                            <div class="slide-content">
                                <div class="slide-content-inner">
                                    <h3 class="atm-heading ">Facility management</h3>

                                    <i class="atm-icon  far fa-external-link   "></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-item swiper-slide">
                        <div class="atm-slide-section">
                            <picture class="atm-image ">
                                <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                                <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                                <img class="" src="https://picsum.photos/id/203/400/500" alt="" loading="lazy">
                            </picture>
                            <div class="slide-content">
                                <div class="slide-content-inner">
                                    <h3 class="atm-heading ">Facility management</h3>

                                    <i class="atm-icon  far fa-external-link   "></i>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="pagination">
                <div class="swiper-pagination"></div>
            </div>
        </section>
    </div>
</section>
 
<section class="org-section-block">
    <div class="vebego-container">
        {{#if title}}
            {{render "@heading" title merge=true}}
        {{/if}}
        
        {{#if subtitle}}
            {{render "@paragraph" subtitle merge=true}}
        {{/if}}

    {{#if cards}}
        {{render "@section-slider" cards merge=true}}
    {{/if}}
    </div>
</section>
 
{
  "title": {
    "text": "Waar voel jij je thuis?",
    "tag": "h2"
  },
  "subtitle": {
    "text": "Selecteer de omgeving die bij je past"
  },
  "cards": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/400/500"
      },
      "heading": {
        "text": "Facility management",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/201/400/500"
      },
      "heading": {
        "text": "Groen voorziening",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/202/400/500"
      },
      "heading": {
        "text": "Zorg",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/203/400/500"
      },
      "heading": {
        "text": "Schoonmaak",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    }
  ]
}
  • Content: 
    .org-section-block {
    @apply overflow-hidden;

    .atm-heading {
        @apply text-secondary-col-1 mb-2;
    }

    .atm-paragraph {
        @apply mb-6;
    }

    .pagination {
        @apply flex justify-center items-center mt-8;

        * {
            @apply transition;
        }
    }

    .slide-content {
        @apply text-white;
    }

    .swiper-pagination {
        @apply relative w-auto mx-8;

        &-bullet {
            @apply bg-secondary-col-2 bg-opacity-50 rounded-full transition-all duration-300 p-1 mx-1 cursor-pointer;

            &-active {
                @apply bg-opacity-100 w-4;
            }
        }
    }

    @media (min-width: 1280px) {
        .cards-grid.swiper-container {
            @apply grid;

            .swiper-wrapper {
                @apply contents;
            }
        }

        .pagination {
            @apply hidden;
        }
    }
}
  • URL: /components/raw/section-block/section-block.css
  • Filesystem Path: src\components\04-organisms\section-block\section-block.css
  • Size: 955 Bytes

No notes defined.