UHasselt Component Library

Brands overview 

<section class="org-brands-overview">
    <div class="uhasselt-container">
        <h1 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h1>
        <div class="brands-wrapper">
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/150x350" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/150x350" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/150x350" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/350x150" alt="">
                </picture>

            </div>
            <div class="brand">
                <picture class="picture ">
                    <img class="picture-image " src="//placehold.co/150x350" alt="">
                </picture>

            </div>
        </div>
    </div>
</section>
 
<section class="org-brands-overview">
    <div class="uhasselt-container">
        {{render '@heading'}}
        <div class="brands-wrapper">
            {{#each brand}}
                <div class="brand">
                    {{render '@image' image}}
                </div>
            {{/each}}
        </div>
    </div>
</section>
 
{
  "brand": [
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/150x350"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/150x350"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/150x350"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/150x350"
      }
    }
  ]
}
  • Content: 
    .org-brands-overview {
    @apply mb-16;

    .brands-wrapper {
        @apply flex;
        @apply flex-wrap;
        @apply gap-4 md:gap-8;

        .picture {
            @apply w-20 md:w-40;
            @apply h-20 md:h-40;

            .picture-image {
                max-width: 80px;
                max-height: 80px;

                @screen md {
                    max-width: 160px;
                    max-height: 160px;
                }

                @apply relative;
                @apply top-1/2;
                transform: translateY(-50%);
                margin: 0 auto;
            }
        }
    }
}
  • URL: /components/raw/brands-overview/brands-overview.css
  • Filesystem Path: src\components\04-organisms\brands-overview\brands-overview.css
  • Size: 654 Bytes

No notes defined.