UHasselt Component Library

Brochure newsletter 

<section class="brochure-newsletter">
    <div class="uhasselt-container">
        <div class="col">
            <h2 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h2>
            <div class="md:hidden">
                <picture class="picture ">
                    <source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
                    <img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
                </picture>
            </div>
            <a href="#" class="button button-white-border ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Bekijk of download online
                    </span>
                </span>
            </a>

            <div class='paragraph subtitle'>
                <p>Toch liever <a href="#">per post</a> ontvangen?</p>
            </div>

        </div>
        <div class="col hidden md:block">
            <picture class="picture ">
                <source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
                <source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
                <img class="picture-image " src="https://picsum.photos/id/239/400/300" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
            </picture>

        </div>
    </div>
</section>
 
<section class="brochure-newsletter">
    <div class="uhasselt-container">
        <div class="col">
            {{ render '@heading--h2' }}
            <div class="md:hidden">{{ render '@image' imgurl  merge=true}}</div>
            {{ render '@button' icon merge=true}}
            {{ render '@paragraph' subtitle }}
        </div>
        <div class="col hidden md:block">
            {{ render '@image' img merge=true}}
        </div>
    </div>
</section>
 
{
  "subtitle": {
    "text": "Toch liever <a href=\"#\">per post</a> ontvangen?",
    "modifier": "subtitle"
  },
  "img": {
    "src": "https://picsum.photos/id/239/400/300"
  },
  "icon": {
    "text": "Bekijk of download online",
    "modifier": "white-border",
    "icon": {
      "style": "fal",
      "icon": "fa-cloud-download-alt"
    }
  }
}
  • Content: 
    .brochure-newsletter
{
    .uhasselt-container
    {
        max-width: 768px;
        @apply bg-red;
        @apply text-white;
        @apply flex flex-col md:flex-row;
        @apply p-0;
    }

    .col
    {
        @apply md:w-1/2;
    }

    .heading
    {
        @apply m-6;
        @apply md:mt-10;
    }

    .button
    {
        @apply mb-6 mx-6;
    }

    .paragraph.subtitle
    {
        @apply mb-10 mx-6;
        @apply font-bold;

        a
        {
            @apply text-white;
            @apply underline;
        }
    }

    .picture
    {
        @apply h-full;
        @apply m-6 mt-0 md:m-0;

        img
        {
            @apply w-full;
            @apply h-full;
            object-fit: cover;
        }
    }
}
  • URL: /components/raw/brochure-newsletter/brochure-newsletter.css
  • Filesystem Path: src\components\04-organisms\brochure-newsletter\brochure-newsletter.css
  • Size: 799 Bytes

No notes defined.