MIUN - Design Library

ContentBannerBlock: No Image 

<div class="content-banner-block ">
    <div class="block-header content-banner-block-no-border">
        <h2 class="heading-level-2">Full width</h2>
    </div>
    <div class="content-banner-block-item">
        <p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>
    </div>
</div>
 
<div class="content-banner-block {{linkBlockClass}}">
        {{#if title}}
        <div class="block-header content-banner-block-no-border">
                <h2 class="heading-level-2">{{title}}</h2>
        </div>
        {{/if}}
        <div class="content-banner-block-item">
                {{#if imageUrl}}
                <figure data-bg="{{imageUrl}}" class="lazyload">
                        <img class="sr-only" src="{{ imageUrl }}" alt="{{imageCaption}}">
                </figure>
                {{/if}}
                {{#if textHtml}}
                {{{ textHtml }}}
                {{/if}}
        </div>
</div>
 
{
  "imageUrl": null,
  "imageCaption": "Image caption",
  "title": "Full width",
  "textHtml": "<p>ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.</p>",
  "epiDivClass": "col-md-6"
}
  • Content: 
    .primary-content-area{
    .content-banner-block{
        figure{
            background-size: contain;
        }
    }
}

.content-banner-block {

    figure {
        position: relative;
        margin-bottom: 20px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 200px;

        figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 2px $xs-space;
            background-color: $orange;
            color: #fff;
        }
    }

    h3 {
        margin-bottom: 20px;

        a {
            font-size: inherit;
            color: inherit;
        }
    }
    .content-banner-block-no-border{
        border-top: none;
        padding-top: 0px;
        padding-bottom: $xs-space;
    }
    .content-banner-block-item {
        p{
            &:last-child{
                margin-bottom: 0px;
            }
        }
 
        h1{
            margin-bottom: $sm-space;
        }
    }
}
.container-fluid.no-padding{
    .content-banner-block-item{
        &:first-child{
            figure{
                min-height: 250px;
                transition: min-height 0.3s ease;
                @include media-breakpoint-up(sm) {
                    min-height: 600px;
                  }
            }
        }
    }
}
.contentbannerblock{
    margin-bottom: $md-space;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
    
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@element .content-banner-block and (min-width: 400px) {
    :self .content-banner-block-item figure {
        height: 250px;
    }
}

@element .content-banner-block and (min-width: 600px) {
    :self .content-banner-block-item figure {
        height: 300px;
    }
}

@element .content-banner-block and (min-width: 900px) {
    :self .content-banner-block-item figure {
        min-height: 600px;
    }
}
  • URL: /components/raw/contentbannerblock/ContentBannerBlock.scss
  • Filesystem Path: src\components\02-block_components\ContentBannerBlock\ContentBannerBlock.scss
  • Size: 2.2 KB

There are no notes for this item.