Card

<div class="m-card m-card--padded m-card--wide">
    <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
    <div class="m-card__content">
        <div class="m-card__meta">
            <div class="a-meta">2018-10-05</div>

            <div class="a-meta a-meta--lowercase"><svg class="icon">
                    <use xlink:href="#icon-time"></use>
                </svg>
                20 min <span class="u-hide-sm">läsning</span></div>

        </div>
        <a href="http://www.google.se" class="m-card__link">
            <h2 class="">
                Gymnasieskolor med hög bandbredd har bättre skolresultat
            </h2>
        </a>
        <p class="m-card__text">Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.</p>

    </div>
</div>
<{{#if top_level}}article{{else}}div{{/if}} class="m-card{{#if is_padded}} m-card--padded{{/if}}{{#if is_wide}} m-card--wide{{/if}}{{#if has_shadow}} m-card--shadow{{/if}}{{#if has_border}} m-card--bordered{{/if}}{{#if teaser}} m-card--teaser{{/if}}{{#if modifier}} {{modifier}}{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
	{{#if has_icon_overlay}}
		{{>@icon-overlay overlay_icon="play" additional_classes="m-card__image m-card__media" data-youtube="3GfOTUoBpRw"}}
	{{/if}}
	{{#if img_url}}
		<img src="{{img_url}}" class="m-card__image m-card__media" alt="{{alt}}">
	{{/if}}
	{{#if has_map}}
		<div class="m-card__map m-card__media">
			<iframe
				src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d8147.136286742923!2d18.0823964!3d59.3031634!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd9fb0cec146dfb7a!2sGoto%2010!5e0!3m2!1sen!2sse!4v1587631996713!5m2!1sen!2sse"
				class="m-card__map__elm" width="100%" height="100%" allowfullscreen="" aria-hidden="false"
				tabindex="0"></iframe>
		</div>
	{{/if}}
	<div class="m-card__content">
		{{#if has_meta}}
			<div class="m-card__meta">
				{{#if date}}{{> @meta text="2018-10-05" icon=false }}{{/if}}
				{{#if read_time}}{{render '@meta--lower-case'}}{{/if}}
			</div>
		{{/if}}
		{{#if url}}
			<a href="{{url}}" class="m-card__link">
				<{{#if top_level}}h1{{else}}h2{{/if}} class="{{#if teaser}}alpha{{/if}}">
					{{{title}}}
					{{#if icon}}
						{{> @icon id=icon additional_classes="m-card__headline__icon"}}
					{{/if}}
				</{{#if top_level}}h1{{else}}h2{{/if}}>
			</a>
		{{else}}
			<{{#if top_level}}h1{{else}}h2{{/if}} class="{{#if teaser}}alpha{{/if}}">
				{{{title}}}
				{{#if icon}}
					{{> @icon id=icon additional_classes="m-card__headline__icon"}}
				{{/if}}
			</{{#if top_level}}h1{{else}}h2{{/if}}>
		{{/if}}
		{{#if excerpt}}<p class="m-card__text">{{{excerpt}}}</p>{{/if}}
		{{#if has_contact_info}}{{> '@features-box' (contextData '@features-box--contact-info') additional_classes="u-p-0" modifier="contact-info" color="snow"}}{{/if}}
		{{#if tag}}
			<div class="m-card__bottom">
				{{> @tag text="Utbildning" href="#" }}
				{{> @tag text="goto10" href="#" }}
			</div>
		{{else if has_button}}
			<div class="m-card__bottom">
				<a href="#" class="a-button {{#if button_color}}a-button--{{button_color}}{{/if}}">
					<span class="a-button__text">{{button_text}}</span>
				</a>
			</div>
		{{/if}}
		{{#if youtube}}
			<div class="m-card__bottom u-visuallyhidden">
				<a href="#" class="a-button" data-youtube-play>
					<span class="a-button__text">Play video</span>
				</a>
				<a href="#" class="a-button" data-youtube-stop>
					<span class="a-button__text">Stop video</span>
				</a>
			</div>
			<script>
				function playVideo(el) {
					const parent = el.closest('.m-card');

					if (!parent) {
						return;
					}

					const youtubeEl = parent.querySelector('[data-youtube]');

					youtubeEl.click();
				}

				function stopVideo(el) {
					const parent = el.closest('.m-card');

					if (!parent) {
						return;
					}

					const youtubeEl = parent.querySelector('[data-youtube]');

					if (youtubeEl.youtube) {
						youtubeEl.youtube.stopVideo();
					}
				}

				document.addEventListener('click', (e) => {
					const play = e.target.closest('[data-youtube-play]');

					if (play) {
						e.preventDefault();
						playVideo(play);
					}

					const stop = e.target.closest('[data-youtube-stop]');

					if (stop) {
						e.preventDefault();
						stopVideo(stop);
					}
				})
			</script>
		{{/if}}
	</div>
</{{#if top_level}}article{{else}}div{{/if}}>
{
  "id": false,
  "alt": "Hands typing on laptop",
  "img_url": "/assets/images/ALX_0876.jpg",
  "title": "Gymnasieskolor med hög bandbredd har bättre skolresultat",
  "url": "http://www.google.se",
  "excerpt": "Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.",
  "is_padded": true,
  "is_wide": true,
  "has_shadow": false,
  "has_button": false,
  "has_border": false,
  "has_meta": true,
  "read_time": true,
  "date": true,
  "has_map": false,
  "has_contact_info": false,
  "has_icon_overlay": false,
  "overlay_icon": false,
  "teaser": false,
  "top_level": false,
  "icon": false,
  "button_color": false,
  "button_text": "Button",
  "modifier": false
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(card) {
    	display: flex;
    	position: relative;
    	flex-direction: column;
    	height: 100%;
    	overflow: hidden;
    	border-radius: $border-radius;
    
    	@include e(image) {
    		display: block;
    		width: 100%;
    		border-radius: $border-radius;
    	}
    
    	@include e(map) {
    		display: block;
    		position: relative;
    		padding-top: 56.25%;
    		overflow: hidden;
    		border-radius: $border-radius;
    
    		> iframe {
    			position: absolute;
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    		}
    
    		@include bp-up(lg) {
    			min-height: rhythm(44);
    			padding-top: 0;
    
    			> iframe {
    				position: static;
    			}
    		}
    	}
    
    	@include e(link) {
    		color: $color-cyberspace;
    		text-decoration: none;
    
    		&::after {
    			content: '';
    			display: block;
    			position: absolute;
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			cursor: pointer;
    		}
    
    		&:hover,
    		&:focus {
    			color: $color-ruby;
    			text-decoration: underline;
    
    			> h1,
    			> h2 {
    				> span[class*='color'] {
    					color: $color-ruby !important;
    					text-decoration: underline !important;
    				}
    			}
    		}
    	}
    
    	@include e(headline) {
    		@include e(icon) {
    			position: relative;
    			width: $icon-size-medium;
    			height: $icon-size-medium;
    			transform: translateY(rem(1px));
    			fill: currentColor;
    		}
    	}
    
    	@include e(meta) {
    		display: flex;
    		flex-wrap: nowrap;
    		align-items: flex-start;
    		justify-content: space-between;
    		margin-bottom: rhythm(1);
    	}
    
    	@include e(content) {
    
    		&:first-child {
    			padding: rhythm(3) 0;
    		}
    
    		&:not(:first-child) {
    			margin-top: rhythm(2);
    			padding-bottom: rhythm(3);
    		}
    
    		> :last-child {
    			margin-bottom: 0;
    		}
    	}
    
    	@include e(text) {
    		margin-top: rhythm(1);
    	}
    
    	@include m(shadow) {
    		@include card-shadow($color-cyberspace, 0.2);
    	}
    
    	@include m(padded) {
    		background-color: $color-snow;
    
    		@include e(media) {
    			flex: 0 0 auto;
    			width: 100%;
    			max-width: 100%;
    			border-bottom-right-radius: 0;
    			border-bottom-left-radius: 0;
    		}
    
    		@include e(content) {
    			padding-right: rhythm(2);
    			padding-left: rhythm(2);
    
    			p {
    				margin-top: rhythm(1);
    			}
    
    			@include bp-up(md) {
    				padding-right: rhythm(4);
    				padding-left: rhythm(4);
    			}
    		}
    
    		&.wp-block-iis-visualization {
    			background-color: transparent;
    
    			@include e(content) {
    				p {
    					margin-top: 0;
    				}
    			}
    
    			&--no-padding > {
    				@include e(content) {
    					padding: 0;
    				}
    			}
    		}
    	}
    
    	@include m(bordered) {
    		border-top: rem(4px) solid $color-ocean;
    	}
    
    	@include e(bottom) {
    		margin-top: rhythm(2);
    	}
    
    	@include m(wide) {
    		height: auto;
    
    		@include bp-up(md) {
    			flex-direction: row;
    			height: auto;
    
    			h1,
    			h2 {
    				font-size: rem(32px);
    				line-height: 1.2;
    			}
    
    			@include e(content) {
    				display: flex;
    				flex-basis: 50%;
    				flex-direction: column;
    				padding-top: rhythm(2);
    			}
    
    			@include e(image) {
    				display: block;
    				object-fit: cover;
    				object-position: 50% center;
    			}
    
    			@include e(media) {
    				max-width: 50%;
    				margin-bottom: 0;
    				border-top-left-radius: $border-radius;
    				border-top-right-radius: 0;
    				border-bottom-left-radius: $border-radius;
    			}
    
    			picture {
    				display: flex;
    				width: 100%;
    				max-width: 50%;
    
    				@include e(media) {
    					max-width: 100%;
    				}
    			}
    
    			@include e(bottom) {
    				margin-top: 0;
    			}
    
    			@include m(flipped) {
    				flex-direction: row-reverse;
    
    				@include e(media) {
    					border-top-right-radius: $border-radius;
    					border-top-left-radius: 0;
    					border-bottom-left-radius: 0;
    					border-bottom-right-radius: $border-radius;
    				}
    			}
    
    			@include m(stretch) {
    				height: 100%;
    			}
    		}
    	}
    
    	@include m(teaser) {
    		display: block;
    		overflow: hidden;
    
    		&:hover,
    		&:focus {
    			img {
    				opacity: 0.8;
    			}
    		}
    
    		&::after {
    			content: '';
    			position: absolute;
    			z-index: z_index(background);
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			transition: opacity 0.75s ease-out;
    			border-radius: $border-radius;
    			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-cyberspace, 0) 35%, rgba($color-cyberspace, 1) 100%);
    		}
    
    		@include e(image) {
    			width: 100%;
    			max-width: none;
    			height: 100%;
    			transition: opacity 0.25s ease-out;
    			border-radius: 0;
    			object-fit: cover;
    		}
    
    		@include e(content) {
    			display: flex;
    			position: absolute;
    			z-index: z_index(middleground);
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    			flex-direction: column;
    			align-content: stretch;
    			justify-content: flex-end;
    			padding: rhythm(4);
    			color: $color-snow;
    			text-shadow: $text-shadow;
    		}
    
    		@include e(link) {
    			color: $color-snow;
    		}
    
    		@include e(text) {
    			margin-top: 0;
    			color: $color-snow;
    		}
    
    		@include e(bottom) {
    			margin-top: 0;
    		}
    
    		@include e(meta) {
    			* {
    				color: $color-snow;
    			}
    
    			svg {
    				fill: $color-snow;
    			}
    		}
    	}
    
    	@include m(mini) {
    		padding: rhythm(1) rhythm(2);
    		background-color: $color-snow;
    
    		@include bp-up(md) {
    			padding: rhythm(2) rhythm(3);
    		}
    	}
    }
    
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/molecules/card/_card.scss
  • Size: 5 KB

No notes defined.