Vebego Component Library

Vacancy Hero 

<section class="org-vacancy-hero flex flex-col md:grid md:grid-cols-2 md:gap-x-8 h-screen">
    <div class="vacancy-hero-left">
        <div class="md:pl-8 flex flex-col items-center justify-center h-full">
            <div class="lg:w-2/3 xl:w-2/3">
                <h1 class="atm-heading ">Schoonmaker ouderenzorg Gulpen Vloeren</h1>

                <div class="atm-paragraph text-md">Gulpen • Ouderenzorg • 30 uur • € 11,83 - € 13,50 per uur</div>

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

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

                </div>
            </div>
        </div>
    </div>
    <div class="vacancy-right">
        <svg class="block md:hidden absolute top-0 left-0 w-full" viewBox="0 0 1416 242" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M124 241.5L0 121.748V0H1415.5C870.7 151.786 327.5 224.203 124 242Z" fill="white" />
        </svg>
        <picture class="atm-image ">
            <img class="" src="https://picsum.photos/id/250/768/432" alt="">
        </picture>
        <svg class="absolute bottom-0" viewBox="0 0 400 184" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M400 75.5C234.707 101.9 64.753 36.1667 0 0V184H400.5V75.5Z" fill="white" />
        </svg>
    </div>
</section>
 
<section class="org-vacancy-hero flex flex-col md:grid md:grid-cols-2 md:gap-x-8 h-screen">
  <div class="vacancy-hero-left">
    <div class="md:pl-8 flex flex-col items-center justify-center h-full">
      <div class="lg:w-2/3 xl:w-2/3">
        {{#if heading}}
        {{ render '@heading' heading }}
        {{/if}}
        {{#if paragraph}}
        {{render '@paragraph' paragraph merge=true}}
        {{/if}}
        <div class="vacancy-hero-content-buttons">
          {{#each buttonsPrimary}}
          {{render '@button-primary' this merge=true}}
          {{/each}}
          {{#each buttonsSecondary}}
          <div class="py-4">
            {{render '@button-secondary' this merge=true}}
          </div>
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  <div class="vacancy-right">
    <svg class="block md:hidden absolute top-0 left-0 w-full" viewBox="0 0 1416 242" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M124 241.5L0 121.748V0H1415.5C870.7 151.786 327.5 224.203 124 242Z" fill="white" />
    </svg>
    {{ render "@image" image }}
    <svg class="absolute bottom-0" viewBox="0 0 400 184" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M400 75.5C234.707 101.9 64.753 36.1667 0 0V184H400.5V75.5Z" fill="white" />
    </svg>
  </div>
</section>
 
{
  "heading": {
    "text": "Schoonmaker ouderenzorg Gulpen Vloeren",
    "tag": "h1"
  },
  "paragraph": {
    "text": "Gulpen • Ouderenzorg • 30 uur • € 11,83 - € 13,50 per uur"
  },
  "buttonsPrimary": [
    {
      "text": "Solliciteer direct"
    }
  ],
  "buttonsSecondary": [],
  "image": {
    "src": "https://picsum.photos/id/250/768/432"
  }
}
  • Content: 
    .org-vacancy-hero {
    .vacancy-hero-left {
        @apply pt-12;

        @media (max-width: theme('screens.md')) {
            @apply vebego-container;
        }

        /* Add padding to the column so it aligns with .vebego-container */
        @screen md {
            padding-left: calc((100vw - theme('screens.md')) / 2);
        }

        @screen lg {
            padding-left: calc((100vw - theme('screens.lg')) / 2);
        }

        @screen xl {
            padding-left: calc((100vw - theme('screens.xl')) / 2);
        }

        @screen 2xl {
            padding-left: calc((100vw - theme('screens.2xl')) / 2);
        }

        .atm-heading {
            @apply text-h2;
        }

        .atm-paragraph {
            @apply text-secondary-col-1;
        }

        .vacancy-hero-content-buttons {
            @apply flex items-center mt-6 flex-wrap;
        }
    }

    .vacancy-right {
        @apply relative flex-grow;

        .atm-image {
            @apply h-full;

            img {
                @apply h-full w-full object-cover;
            }
        }
    }
}
  • URL: /components/raw/vacancy-hero/vacancy-hero.css
  • Filesystem Path: src\components\04-organisms\vacancy-hero\vacancy-hero.css
  • Size: 1.1 KB

No notes defined.