Internetstiftelsen Styleguide

Download 

<div class="m-download">
    <div class="row align-items-center justify-content-center">
        <div class="grid-auto">
            <figure class="m-download__icon-file">
                <svg class="icon">
                    <use xlink:href="#icon-file"></use>
                </svg>
            </figure>
        </div>
        <div class="grid u-position-static">
            <div class="row flex-column">
                <div class="grid-18 u-position-static">
                    <a href="https://www.iis.se/docs/Remiss_se_sv.pdf" class="beta m-download__link" download>
                        Svenskarna och internet 2019
                    </a>
                </div>
                <div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
                    <p class="u-m-b-0">Rapport om Svenskarnas internetanvändande i pdf-format</p>
                    <div class="display-flex align-self-end flex-nowrap m-download__trigger">
                        <strong class="m-download__text">Ladda ner</strong>
                        <figure class="m-download__icon-download">
                            <svg class="icon">
                                <use xlink:href="#icon-download"></use>
                            </svg>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="m-download">
	<div class="row align-items-center justify-content-center">
		<div class="grid-auto">
			<figure class="m-download__icon-file">
				{{> @icon id="file"}}
			</figure>
		</div>
		<div class="grid u-position-static">
			<div class="row flex-column">
				<div class="grid-18 u-position-static">
					<a href="{{url}}" class="beta m-download__link" download>
						{{link_text}}
					</a>
				</div>
				<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
					<p class="u-m-b-0">{{description}}</p>
					<div class="display-flex align-self-end flex-nowrap m-download__trigger">
						<strong class="m-download__text">{{download}}</strong>
						<figure class="m-download__icon-download">
							{{> @icon id="download"}}
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
 
{
  "url": "https://www.iis.se/docs/Remiss_se_sv.pdf",
  "link_text": "Svenskarna och internet 2019",
  "description": "Rapport om Svenskarnas internetanvändande i pdf-format",
  "background_image": "/assets/images/KPA_5090-5-4.jpg",
  "download": "Ladda ner",
  "icon": "arrow-forwards"
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.molecule(download) {
	position: relative;
	padding: func.rhythm(2.5);
	border: 1px solid colors.$color-peacock;
	border-radius: var.$border-radius;
	background-color: var(--snow-color);

	@include bem.e(link) {
		display: block;
		margin-bottom: func.rhythm(1);
		color: currentcolor;
		text-decoration: none;

		&:hover,
		&:focus {
			color: colors.$color-peacock;
			text-decoration: underline;
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			z-index: func.z_index(background);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	@include bem.e(icon-file) {
		margin-bottom: func.rhythm(1);
		line-height: 0;

		@include breakpoint.bp-up(sm) {
			margin-right: func.rhythm(0.5);
			margin-bottom: 0;
		}
	}

	@include bem.e(icon-download) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: func.rhythm(3.5);
		height: func.rhythm(3.5);
		margin-left: func.rhythm(1);
		border-radius: var.$border-radius;
		background-color: colors.$color-peacock-light;
	}

	@include bem.e(text) {
		white-space: nowrap;
	}

	@include bem.b(icon) {
		width: func.to_rem(57px);
		height: func.to_rem(78px);
		color: var(--cyberspace-color);
		fill: currentColor;
	}

	@include bem.e(trigger) {
		margin-top: func.rhythm(1);
		margin-left: 0;

		@include bem.b(icon) {
			width: var.$icon-size-medium;
			height: var.$icon-size-medium;
			color: var(--dark-color);
			fill: currentColor;
		}

		@include breakpoint.bp-up(sm) {
			margin-top: 0;
			margin-left: func.rhythm(1);
		}
	}
}
  • URL: /components/raw/download/_download.scss
  • Filesystem Path: src/molecules/download/_download.scss
  • Size: 2 KB

No notes defined.