MIUN - Design Library

LinkedContentBannerBlock: One Fourth Width 

<div class="link-block" data-link="https://google.com">
    <div class="link-block-item">
        <figure class="lazyload" data-bg="https://picsum.photos/600/400">
            <img class="sr-only lazyload" data-src="https://picsum.photos/600/400" alt="Ons 12 dec">
            <figcaption>Ons 12 dec</figcaption>
        </figure>
        <h2 class="heading-level-3"><a href="https://google.com">One fourth width</a></h2>
        <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>
 
{{#if videoTag}}
	
		<div class="video-block">
			<div class="video-block-item">
				<div role="button" href="#" data-toggle="modal" data-target="#id-{{videoUUID}}"></a>
					<figure class="lazyload" data-bg="{{this.imageUrl}}" >
						<img class="sr-only lazyload" data-src="{{this.imageUrl}}"  alt="alt text">
						{{#if imageCaption}}
							<figcaption>{{ this.imageCaption }}</figcaption>
						{{/if}}
					</figure>
				</div>
				{{#if title}}
					<h3 class="heading-level-3"><a href="{{this.linkUrl}}">{{ this.title }}</a></h3>
				{{/if}}
				{{#if text}}
					<p>{{ text }}</p>
				{{/if}}
			</div>
		</div>

	<div class="modal fade video-modal" id="id-{{videoUUID}}" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog" role="document">
			 <div class="modal-content">
				<div class="modal-header">
					<a href="javascript:void(0);" class="button-close-video" data-dismiss="modal">&times;</a>
				</div>
				<div class="video-wrapper">
					{{{videoTag}}}
				</div>
			</div>
		</div>
	</div>
{{else}}
	<div class="link-block" data-link="{{this.linkUrl}}">
		<div class="link-block-item">
				<figure class="lazyload" data-bg="{{this.imageUrl}}">
					<img class="sr-only lazyload" data-src="{{this.imageUrl}}" alt="{{ this.imageCaption }}">
					{{#if imageCaption}}
						<figcaption>{{ this.imageCaption }}</figcaption>
					{{/if}}
				</figure>
			<h2 class="heading-level-3"><a href="{{this.linkUrl}}">{{ this.title }}</a></h2>
			<p>{{ this.text }}</p>
			{{this.divClass}}
		</div>
	</div>
{{/if}}
 
{
  "linkUrl": "https://google.com",
  "imageUrl": "https://picsum.photos/600/400",
  "imageCaption": "Ons 12 dec",
  "title": "One fourth width",
  "text": "ETOUR bedriver forskning och utbildning i nära dialog och samverkan med aktörer inom turistnäringen med fokus på fyra forskningsområden.",
  "videoTag": null,
  "epiDivClass": "col-md-3"
}
  • Content: 
    $(document).ready(function() {
    $('.link-block').on('click', function() {
        window.location = $('a', this).attr('href');
    });

    $('.video-modal').each(function() {
        var height = $('iframe', this).attr('height');
        var width = $('iframe', this).attr('width');
        var ratio = height / width;

        $('.video-wrapper', this).css('padding-top', (ratio * 100) + '%');
    });

    $('.video-modal').on('hidden.bs.modal', function(event) {
        var src = $('iframe', this).attr('src');

        $('iframe', this).attr('src', src);
    });
});
  • URL: /components/raw/linkedcontentbannerblock/LinkedContentBannerBlock.js
  • Filesystem Path: src\components\02-block_components\LinkedContentBannerBlock\LinkedContentBannerBlock.js
  • Size: 593 Bytes
  • Content: 
    /* Link block */

.link-block {

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

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

    h3 {
        margin-bottom: 20px;

        a {
            font-size: inherit;
            color: inherit;
        }
    }

    .link-block-item {
        padding: 15px;
        margin-bottom: $xs-space;
        transition: box-shadow 0.3s ease;
        &:hover {
            box-shadow: $box-shadow;
            cursor: pointer;

            h3 {
                text-decoration: underline;
            }
        }
    }
}

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

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

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

/* End Link block */
  • URL: /components/raw/linkedcontentbannerblock/LinkedContentBannerBlock.scss
  • Filesystem Path: src\components\02-block_components\LinkedContentBannerBlock\LinkedContentBannerBlock.scss
  • Size: 1.3 KB

There are no notes for this item.