UHasselt Component Library

Brands 

<section class="brands">
    <div class="uhasselt-container">
        <div class="wrapper">
            <div class="partners">
                <h2 class="heading ">
                    Onze partners
                </h2>
                <div class='paragraph '>
                    <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
                </div>

                <a class="button button-red ">
                    <span>
                        <span class="text">
                            Meer over onze partners
                        </span>
                    </span>
                </a>

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

                <div class='paragraph '>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
                </div>

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

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

                <div class='paragraph '>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="brands">
    <div class="uhasselt-container">
        {{#if partners}}
            <div class="wrapper">
                <div class="partners">
                    {{ render '@heading' @root.heading }}
                    {{ render '@paragraph' @root.paragraph }}
                    {{ render '@button' @root.button }}
                </div>
            </div>
        {{/if}}
        {{#each brand}}
            <div class="wrapper">
                <div class="brand">
                    {{render '@image' image}}
                    {{#if paragraph}}{{ render '@paragraph' paragraph }}{{/if}}
                </div>
            </div>
        {{/each}}
    </div>
</section>
 
{
  "partners": true,
  "heading": {
    "text": "Onze partners",
    "tag": "h2"
  },
  "button": {
    "text": "Meer over onze partners",
    "element": "a",
    "icon": false,
    "modifier": "red"
  },
  "brand": [
    {
      "paragraph": {
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "image": {
        "src": "//placehold.co/350x150"
      }
    },
    {
      "image": {
        "src": "//placehold.co/350x150"
      },
      "paragraph": false
    },
    {
      "paragraph": {
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "image": {
        "src": "//placehold.co/350x150"
      }
    }
  ]
}
  • Content: 
    .brands {
    @apply mb-16;

    .uhasselt-container {
        @apply grid gap-8;

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        @screen lg {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        }
    }

    .wrapper {
        .brand {
            @apply flex flex-col content-center border border-solid border-gray items-center bg-white;

            .picture {
                @apply m-4;
                height: 150px;

                .picture-image {
                    max-width: 160px;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .paragraph {
                @apply w-full p-4 border-t border-solid border-gray text-center;
            }
        }

        .partners {
            h2 {
                @apply block mb-4;
            }

            p {
                @apply block mb-5;
            }
        }
    }
}
  • URL: /components/raw/brands/brands.css
  • Filesystem Path: src\components\03-molecules\brands\brands.css
  • Size: 1.1 KB

No notes defined.