UHasselt Component Library

Spotlight: Spotlight 

<div class='spotlight'>
    <div class='spotlight-gradient'></div>

    <div class='wrap-image'>
        <picture class="picture ">
            <img class="picture-image " src="https://picsum.photos/id/239/960/640" alt="Test" loading="lazy">
        </picture>

    </div>

    <div class='spotlight-context'>
        <div class='spotlight-context-content'>
            <h1 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h1>

            <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>

        </div>

        <div class='spotlight-context-button'>
            <a href="#" class="button button-red ">
                <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='spotlight'>
    {{#if gradient}}
        <div class='spotlight-gradient'></div>
    {{/if}}

    <div class='wrap-image'>
        {{render '@image' image}}
    </div>

    <div class='spotlight-context'>
        <div class='spotlight-context-content'>
            {{#if title}}
                {{render '@heading' heading-h2}}
            {{/if}}

            {{#if sub-text}}
                {{render '@paragraph'}}
            {{/if}}
        </div>

        {{#if button}}
            <div class='spotlight-context-button'>
                {{render '@button--red'}}
            </div>
        {{/if}}
    </div>
</div>
 
{
  "paragraph": {
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel",
    "modifier": "",
    "isRichText": true
  },
  "title": true,
  "sub-text": true,
  "button": true,
  "gradient": true,
  "image": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/960/640"
  }
}
  • Content: 
    .spotlight {
    overflow: hidden;
    position: relative;
    display: flex;

    min-height: 430px;

    .spotlight-context {
        padding: 36px;
        position: relative;
        color: white;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;

        z-index: 3;
    }

    .wrap-image {
        position: absolute;
        height: 100%;
        width: 100%;

        .picture {
            height: 100%;
            width: 100%;

            .picture-image {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }

    .spotlight-gradient {
        background-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.5),
            transparent
        );
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
    }

    .spotlight-context-content {
        height: 100%;
        max-width: unset;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        @screen sm {
            max-width: 70%;
        }
    }

    .spotlight-context-button {
        margin-top: 24px;
    }
}
  • URL: /components/raw/spotlight/spotlight.css
  • Filesystem Path: src\components\04-organisms\spotlight\spotlight.css
  • Size: 1.4 KB

No notes defined.