Vebego Component Library

Hero Block 

<section class="org-hero-block">
    <div class="vebego-container">
        <picture class="atm-image ">
            <img class="" src="https://picsum.photos/id/19/1920/1080" alt="">
        </picture>
    </div>

    <div class="vebego-container">
        <div class="org-hero-block-wrapper">
            <div class="org-hero-block-content">
                <h1 class="atm-heading h2">Transform your green space with Vebego Groen</h1>

                <div class="atm-paragraph ">
                    <p>Want to create a vibrant and colorful green space that not only beautifies your surroundings, but also promotes biodiversity? Our experts are ready to help you transform your outdoor space into a beautiful ecosystem that brings people and nature together.</p>
                </div>

                <div class="hero-block-content-buttons">
                    <a class="atm-button atm-button-primary  button-md no-icon  ">
                        <div class="button-content-wrapper">
                            <span class="button-content">
                                <span>Request advice</span>
                                <i class="atm-icon  fal fa-arrow-right   "></i>

                            </span>
                        </div>
                        <span class="button-triangle"></span>
                    </a>

                    <a class="atm-button atm-button-secondary button-md ">
                        <div class="button-content-wrapper">
                            <span class="button-content">
                                <span>Onze activiteiten</span>
                                <i class="atm-icon  far fa-long-arrow-right   "></i>

                                <span class="button-underline"></span>
                            </span>
                        </div>
                    </a>

                </div>
            </div>
            <div class="marketing-area">
                <span class="text">
                    Do you need advice right now? Call
                    <a class="atm-link " href="" title="" aria-label="" target="">+31 (0)88 099 08 90</a>
                </span>
            </div>

        </div>
    </div>
</section>
 
<section class="org-hero-block">
    <div class="vebego-container">
    {{ render "@image" image}}
    </div>
        
    <div class="vebego-container">
        <div class="org-hero-block-wrapper">
            <div class="org-hero-block-content">
                {{#if title}}
                    {{render "@heading" title}}
                {{/if}}
                {{#if paragraph}}
                    {{render "@paragraph--small" paragraph}}   
                {{/if}}     
                <div class="hero-block-content-buttons">
                    {{#each buttonsPrimary}}
                        {{render '@button-primary' this merge=true}}
                    {{/each}}
                    
                    {{#each buttonsSecondary}}
                        {{render '@button-secondary' this merge=true}}
                    {{/each}}
                </div>
            </div>
           {{render '@marketing-area'}}
            
        </div>
    </div>
</section>
 
{
  "title": {
    "text": "Transform your green space with Vebego Groen",
    "tag": "h1",
    "modifier": "h2"
  },
  "paragraph": {
    "text": "Want to create a vibrant and colorful green space that not only beautifies your surroundings, but also promotes biodiversity? Our experts are ready to help you transform your outdoor space into a beautiful ecosystem that brings people and nature together."
  },
  "buttonsPrimary": [
    {
      "text": "Request advice"
    }
  ],
  "buttonsSecondary": [
    {
      "text": "Onze activiteiten"
    }
  ]
}
  • Content: 
    .org-hero-block {
    @apply relative grid items-start lg:items-center;

    .atm-image {
        @apply relative h-full lg:h-full transition-all;
        grid-area: 1/1;

        img {
            @apply w-full h-full object-cover absolute rounded-2xl;
        }
    }

    .vebego-container {
        @apply transition-all h-full;
        grid-area: 1/1;

        .org-hero-block-wrapper {
            @apply relative bg-white max-w-lg rounded-xl transition-all lg:m-20 lg:my-32 m-6 mb-64;

            .org-hero-block-content {
                @apply p-8 sm:p-12 transition-all;

                .atm-button {
                    @apply mr-4;
                }
            }
        }
    }

    .marketing-area {
        @apply md:p-4 p-3;

        .atm-paragraph p {
            @apply text-center md:text-sm text-xs;
        }
    }
}
  • URL: /components/raw/hero-block/hero-block.css
  • Filesystem Path: src\components\04-organisms\hero-block\hero-block.css
  • Size: 878 Bytes

No notes defined.