UHasselt Component Library

USP Banner 

<!-- Usp Banner Red -->
<div class="org-usp-banner red">
    <div class="wrap-image">
        <picture class="picture ">
            <img class="picture-image " src="https://picsum.photos/id/239/960/1000" alt="Test" loading="lazy">
        </picture>

    </div>
    <div class="wrap-information">
        <h1 class="heading heading-display">
            Een persoonlijke aanpak
        </h1>
        <div class="wrap-text">
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 1
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 2
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 3
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 4
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="wrap-cta">
            <a href="#" class="button button-black ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        This is a CTA Button
                    </span>
                </span>
            </a>

        </div>
    </div>
</div>


<!-- Usp Banner White -->
<div class="org-usp-banner white">
    <div class="wrap-image">
        <picture class="picture ">
            <img class="picture-image " src="https://picsum.photos/id/239/960/1000" alt="Test" loading="lazy">
        </picture>

    </div>
    <div class="wrap-information">
        <h1 class="heading heading-display">
            Een persoonlijke aanpak
        </h1>
        <div class="wrap-text">
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 1
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 2
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 3
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
            <div class="item">
                <div class='usp-text '>
                    <div class='usp-wrapper'>
                        <div class='usp-icon'><span class="icon fal fa-user-friends   " aria-hidden="true"></span></div>
                        <div class='usp-heading'>
                            <h3 class="heading title">
                                Usp Item 4
                            </h3>
                        </div>
                    </div>

                    <div class='paragraph '>
                        <p>Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt.</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="wrap-cta">
            <a href="#" class="button button-black ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        This is a CTA Button
                    </span>
                </span>
            </a>

        </div>
    </div>
</div>


<div class="org-usp-banner {{ modifier }}">
    <div class="wrap-image">
        {{ render '@image' image }}
    </div>
    <div class="wrap-information">
        {{ render '@heading' @root.heading merge=true }}
        <div class="wrap-text">
            {{#each usp-text}}
                <div class="item">
                    {{ render '@usp-text' this merge=true}}
                </div>
            {{/each}}
        </div>
        <div class="wrap-cta">
            {{ render '@button' }}
        </div>
    </div>
</div>
 
/* Usp Banner Red */
{
  "heading": {
    "tag": "h1",
    "text": "Een persoonlijke aanpak",
    "modifier": "heading-display"
  },
  "usp-text": [
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 1"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 2"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 3"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 4"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    }
  ],
  "image": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/960/1000"
  },
  "modifier": "red"
}


/* Usp Banner White */
{
  "heading": {
    "tag": "h1",
    "text": "Een persoonlijke aanpak",
    "modifier": "heading-display"
  },
  "usp-text": [
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 1"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 2"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 3"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    },
    {
      "modifier": "",
      "heading": {
        "text": "Usp Item 4"
      },
      "icon": {
        "style": "fal",
        "icon": "fa-user-friends"
      },
      "paragraph": {
        "text": "Aan de UHasselt sturen we je de wereld in via uitwisselingen met buitenlandse universiteiten en organisaties. Ook krijg je de kans om stage te doen of mee te werken aan TEDx-UHasselt."
      }
    }
  ],
  "image": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/960/1000"
  },
  "modifier": "white"
}
  • Content: 
    .org-usp-banner {
    @apply mb-16;
    @apply lg:flex lg:justify-start;

    .wrap-image {
        @apply w-full lg:w-2/6 xl:w-1/2;
        @apply relative overflow-hidden;

        &:after {
            content: url(/assets/img/triangles.svg);
            @apply absolute;
            @apply top-8 left-0;
            width: 110%;
            height: auto;
            @apply md:top-8 md:-left-32;

            @screen md {
                width: 960px;
                height: auto;
            }
        }

        picture {
            @apply h-full;

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

    .wrap-information {
        @apply px-8 py-8 lg:px-14 lg:py-8 xl:px-20 xl:py-12;
        @apply w-full lg:w-4/6 xl:w-1/2 xl:flex-col;
        @apply relative;

        .wrap-text {
            @apply lg:flex lg:flex-wrap lg:-mx-4;

            .item {
                @apply mb-8 lg:mb-0;
                @apply lg:p-4 lg:w-1/2;
            }
        }

        .wrap-cta {
            @apply absolute;
            @apply w-10/12;
            @apply block;
            @apply md:mt-6;
            @apply md:relative;
            @apply md:ml-8;
            @apply md:w-auto;
            @apply md:inline-block;

            .button {
                @apply w-full;
                @apply w-auto;
            }
        }
    }

    &.white {
        @apply bg-white text-black;
    }

    &.red {
        @apply bg-red text-white;
    }
}
  • URL: /components/raw/usp-banner/usp-banner.css
  • Filesystem Path: src\components\04-organisms\usp-banner\usp-banner.css
  • Size: 1.6 KB

No notes defined.