UHasselt Component Library

Spotlight: Spotlight Nothing 

<div class='spotlight'>

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

        </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": false,
  "sub-text": false,
  "button": false,
  "gradient": false,
  "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.