UHasselt Component Library

Photo Block 

<section class="photo-block">
    <div class="uhasselt-container">
        <h2 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h2>
        <div class="wrapper">
            <div class="column">
                <div class="item-1">
                    <picture class="picture ">
                        <img class="picture-image " src="https://picsum.photos/id/238/762/616" alt="" loading="lazy">
                    </picture>

                    <div class='paragraph '>
                        <p>“Naast hard studeren is er natuurlijk ook tijd voor vermaak.”</p>
                    </div>

                </div>
                <div class="wrap-three">
                    <div class="item-2">
                        <picture class="picture ">
                            <img class="picture-image " src="https://picsum.photos/id/240/371/300" alt="" loading="lazy">
                        </picture>
                    </div>
                    <div class="item-3">
                        <picture class="picture ">
                            <img class="picture-image " src="https://picsum.photos/id/241/371/300" alt="" loading="lazy">
                        </picture>
                    </div>
                    <div class="item-4">
                        <picture class="picture ">
                            <img class="picture-image " src="https://picsum.photos/id/242/371/300" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="wrap-two">
                    <div class="arrow">
                        <img src="../../assets/img/down-arrow.svg">
                    </div>
                    <div class="item-5">
                        <picture class="picture ">
                            <img class="picture-image " src="https://picsum.photos/id/243/371/300" alt="" loading="lazy">
                        </picture>

                    </div>
                </div>
                <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>
            </div>
        </div>
    </div>
</section>
 
<section class="photo-block">
    <div class="uhasselt-container">
        {{ render '@heading--h2' }}
        <div class="wrapper">
            <div class="column">
                {{#if image-1}}
                    <div class="item-1">
                        {{ render '@image' image-1 }}
                        {{#if description}}{{ render '@paragraph' description }}{{/if}}
                    </div>
                {{/if}}
                <div class="wrap-three">
                    {{#if image-2}}
                        <div class="item-2">{{ render '@image' image-2 }}</div>
                    {{/if}}
                    {{#if image-3}}
                        <div class="item-3">{{ render '@image' image-3 }}</div>
                    {{/if}}
                    {{#if image-4}}
                        <div class="item-4">{{ render '@image' image-4 }}</div>
                    {{/if}}
                </div>
            </div>
            <div class="column">
                <div class="wrap-two">
                    <div class="arrow">
                        <img src="{{ path '/assets/img/down-arrow.svg' }}">
                    </div>
                    {{#if image-5}}
                        <div class="item-5">
                            {{ render '@image' image-5 }}
                        </div>
                    {{/if}}
                </div>
                {{ render '@brochure-newsletter' }}
            </div>
        </div>
    </div>
</section>
 
{
  "description": {
    "text": "“Naast hard studeren is er natuurlijk ook tijd voor vermaak.”"
  },
  "image-1": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "",
    "src": "https://picsum.photos/id/238/762/616"
  },
  "image-2": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "",
    "src": "https://picsum.photos/id/240/371/300"
  },
  "image-3": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "",
    "src": "https://picsum.photos/id/241/371/300"
  },
  "image-4": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "",
    "src": "https://picsum.photos/id/242/371/300"
  },
  "image-5": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "",
    "src": "https://picsum.photos/id/243/371/300"
  }
}
  • Content: 
    .photo-block
{
    @apply mb-16;

    .wrapper
    {
        @apply grid;
        @apply gap-4;

        .column
        {
            @apply grid;
            @apply grid-cols-1 lg:grid-cols-2;
            @apply gap-4;

            .item-1
            {
                @apply relative;

                .paragraph
                {
                    @apply absolute;
                    @apply bottom-6 md:bottom-12;
                    @apply bg-black;
                    @apply text-white;
                    @apply px-6;
                    @apply py-6 md:py-8;
                    @apply w-2/3;

                    p
                    {
                        @apply m-0;
                    }
                }
            }

            .wrap-three
            {
                @apply grid;
                @apply grid-cols-2;
                @apply grid-rows-none;
                @apply gap-4;

                grid-template-rows: auto;
                grid-template-areas:
                "item-2 ."
                "item-3 item-4";

                .item-2
                {
                    grid-area: item-2;
                }
                .item-3
                {
                    grid-area: item-3;
                }
                .item-4
                {
                    grid-area: item-4;
                }                
            }

            .wrap-two
            {
                @apply grid;
                @apply grid-cols-2;
                @apply grid-rows-none;
                @apply gap-4;

                grid-template-rows: auto;
                grid-template-areas:
                "arrow item-5";

                .arrow
                {
                    grid-area: arrow;

                    img
                    {
                        @apply h-24 md:h-48;
                        @apply -mt-4;
                        @apply ml-auto;
                        @apply mr-auto;
                    }
                }
                .item-5
                {
                    grid-area: item-5;
                }             
            }

            .picture
            {
                @apply h-full;

                img
                {
                    @apply w-full;
                    @apply h-full;
                    object-fit: cover;
                }
            }
        }
    }

}
  • URL: /components/raw/photo-block/photo-block.css
  • Filesystem Path: src\components\04-organisms\photo-block\photo-block.css
  • Size: 2.5 KB

No notes defined.