Internetstiftelsen Styleguide

Search Result 

<div class="o-search-result">
    <ul class="o-search-result__list">
        <li class="o-search-result__item o-search-result__item--article">
            <article class="row">
                <div class="grid-18 grid-md-4">
                    <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                </div>
                <div class="grid-18 grid-md-14">
                    <div class="o-search-result__item__content">
                        <header>
                            <div class="a-meta">September 27, 2018</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>

                        </header>
                        <h2>
                            <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                        </h2>
                        <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                    </div>
                </div>
            </article>
        </li>
        <li class="o-search-result__item o-search-result__item--article">
            <article class="row">
                <div class="grid-18 grid-md-4">
                    <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                </div>
                <div class="grid-18 grid-md-14">
                    <div class="o-search-result__item__content">
                        <header>
                            <div class="a-meta">September 27, 2018</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>

                        </header>
                        <h2>
                            <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                        </h2>
                        <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                    </div>
                </div>
            </article>
        </li>
        <li class="o-search-result__item o-search-result__item--file">
            <article class="row">
                <div class="o-search-result__item__content">
                    <header>
                        <div class="a-meta">September 27, 2018</div>
                    </header>
                    <h2>
                        <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                    </h2>
                    <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                </div>
                <div class="grid">
                    <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>
            </article>
        </li>
        <li class="o-search-result__item o-search-result__item--page">
            <article class="row flex-row-reverse">
                <div class="grid-18 grid-md-9">
                    <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--page"></a>
                </div>
                <div class="grid-18 grid-md-9">
                    <div class="o-search-result__item__content">
                        <header>
                            <div class="a-meta">September 27, 2018</div>
                        </header>
                        <h2>
                            <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                        </h2>
                        <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                    </div>
                </div>
            </article>
        </li>
        <li class="o-search-result__item o-search-result__item--article">
            <article class="row">
                <div class="grid-18 grid-md-4">
                    <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                </div>
                <div class="grid-18 grid-md-14">
                    <div class="o-search-result__item__content">
                        <header>
                            <div class="a-meta">September 27, 2018</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>

                        </header>
                        <h2>
                            <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                        </h2>
                        <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                    </div>
                </div>
            </article>
        </li>
    </ul>
</div>
 
<div class="o-search-result">
	<ul class="o-search-result__list">
		<li class="o-search-result__item o-search-result__item--article">
			<article class="row">
				<div class="grid-18 grid-md-4">
					<a href="#"><img src="{{img_url}}" alt="{{alt}}" class="o-search-result__image o-search-result__image--article"></a>
				</div>
				<div class="grid-18 grid-md-14">
					<div class="o-search-result__item__content">
						<header>
							{{> @meta text="September 27, 2018"}}
							{{render '@meta--lower-case'}}
						</header>
						<h2>
							<a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
						</h2>
						<p>{{exerpt}}</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-search-result__item o-search-result__item--article">
			<article class="row">
				<div class="grid-18 grid-md-4">
					<a href="#"><img src="{{img_url}}" alt="{{alt}}" class="o-search-result__image o-search-result__image--article"></a>
				</div>
				<div class="grid-18 grid-md-14">
					<div class="o-search-result__item__content">
						<header>
							{{> @meta text="September 27, 2018"}}
							{{render '@meta--lower-case'}}
						</header>
						<h2>
							<a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
						</h2>
						<p>{{exerpt}}</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-search-result__item o-search-result__item--file">
			<article class="row">
				<div class="o-search-result__item__content">
					<header>
						{{> @meta text="September 27, 2018"}}
					</header>
					<h2>
						<a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
					</h2>
					<p>{{exerpt}}</p>
				</div>
				<div class="grid">
					{{render '@download'}}
				</div>
			</article>
		</li>
		<li class="o-search-result__item o-search-result__item--page">
			<article class="row flex-row-reverse">
				<div class="grid-18 grid-md-9">
					<a href="#"><img src="{{img_url}}" alt="{{alt}}" class="o-search-result__image o-search-result__image--page"></a>
				</div>
				<div class="grid-18 grid-md-9">
					<div class="o-search-result__item__content">
						<header>
							{{> @meta text="September 27, 2018"}}
						</header>
						<h2>
							<a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
						</h2>
						<p>{{exerpt}}</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-search-result__item o-search-result__item--article">
			<article class="row">
				<div class="grid-18 grid-md-4">
					<a href="#"><img src="{{img_url}}" alt="{{alt}}" class="o-search-result__image o-search-result__image--article"></a>
				</div>
				<div class="grid-18 grid-md-14">
					<div class="o-search-result__item__content">
						<header>
							{{> @meta text="September 27, 2018"}}
							{{render '@meta--lower-case'}}
						</header>
						<h2>
							<a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
						</h2>
						<p>{{exerpt}}</p>
					</div>
				</div>
			</article>
		</li>
	</ul>
</div>
 
{
  "label": "sök på internetstiftelsen.se",
  "alt": "Hands typing on laptop",
  "img_url": "/assets/images/ALX_0876.jpg",
  "title": "Man spelar Candy Crush",
  "url": "http://www.google.se",
  "exerpt": "Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in."
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/typography/typography';
@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;
@use '../../vendor/grid/grid' as grid;

@include mixin.organism(search-result) {
	@include bem.e(list) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@include bem.e(item) {
		position: relative;
		padding: func.rhythm(3) func.rhythm(2);

		&:not(:first-child) {
			border-top: 1px solid colors.$color-concrete;
		}

		div > a:not([class*=tag]) {
			@extend %reset-link-style;
		}

		@include bem.m(article) {
			article {
				display: flex;
				align-items: flex-start;
			}

			header {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: func.rhythm(1);
			}

			p {
				margin-bottom: 0;
			}

			@include breakpoint.bp-up(xl) {
				> h2,
				p {
					@include grid.make-col(14);
				}
			}

			@include bem.e(content) {
				@include breakpoint.bp-up(sm) {
					margin-right: func.rhythm(2);
				}

				@include breakpoint.bp-up(md) {
					margin-right: 0;
				}
			}
		}

		@include bem.m(page) {
			padding-right: func.rhythm(2);
			padding-left: func.rhythm(2);
		}

		@include bem.m(file) {
			@include bem.e(content) {
				margin: 0 func.rhythm(3);

				@include breakpoint.bp-up(xl) {
					> h2,
					p {
						@include grid.make-col(12);
					}
				}
			}
		}

		@include bem.e(content) {
			flex: 0 1 100%;
		}

		@include bem.e(link) {
			@extend %reset-link-style;

			color: colors.$color-cyberspace;
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
			}
		}
	}

	@include bem.e(image) {
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: func.rhythm(2);
		border-radius: var.$border-radius;

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

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

		@include breakpoint.bp-up(lg) {
			margin-right: func.rhythm(3);
		}

		@include breakpoint.bp-up(xl) {
			margin-right: func.rhythm(4);
		}
	}

	@include breakpoint.bp-up(md) {
		@include bem.e(item) {
			padding: func.rhythm(3);
		}
	}
}
  • URL: /components/raw/search-result/_search-result.scss
  • Filesystem Path: src/organisms/search-result/_search-result.scss
  • Size: 2.5 KB

No notes defined.