Internetstiftelsen Styleguide

Members Service Product: List 

<ul class="o-service-product-list">
    <li class="o-service-product-list__item">
        <div class="o-service-product-list__logo">
            <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://skolfederation.se/app/uploads/2017/02/logo_gotit.png" alt="Gotit AB"></a>
        </div>
        <div class="o-service-product-list__data">
            <dl class="o-service-product-list__data__list">
                <dt>Alvis</dt>
                <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">Gotit AB</a></dd>
                <dd>Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.</dd>
            </dl>
        </div>
    </li>
    <li class="o-service-product-list__item">
        <div class="o-service-product-list__logo">
            <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://skolfederation.se/app/uploads/2017/06/lexplore_logo-180x55.png" alt="Lexplore Nordic AB"></a>
        </div>
        <div class="o-service-product-list__data">
            <dl class="o-service-product-list__data__list">
                <dt>Det flexibla avtalet</dt>
                <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">Lexplore Nordic AB</a></dd>
                <dd>Avtalen ger dig som uppköpare eller rektor möjlighet att hjälpa elever med dyslexi eller andra läs- och skrivsvårigheter med att klara sig i skolan eller på en utbildning.</dd>
            </dl>
        </div>
    </li>
    <li class="o-service-product-list__item">
        <div class="o-service-product-list__logo">
            <a href="http://www.gotit.se/"><img class="o-service-product-list__logo__image" src="https://skolfederation.se/app/uploads/2015/04/NoK_Logo_35mm.gif" alt="Natur &amp; kultur"></a>
        </div>
        <div class="o-service-product-list__data">
            <dl class="o-service-product-list__data__list">
                <dt>Digitalbok</dt>
                <dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">Natur &amp; kultur</a></dd>
                <dd>En digitalbok är den tryckta boken i digitalt format. Läs boken på en pekplatta, datorn eller telefon.</dd>
            </dl>
        </div>
    </li>
</ul>
 
<ul class="o-service-product-list">
	{{#each items}}
		{{> '@members-service-product'}}
	{{/each}}
</ul>
 
{
  "provider": "Gotit AB",
  "logo": "https://skolfederation.se/app/uploads/2017/02/logo_gotit.png",
  "description": "Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.",
  "serviceName": "Alvis",
  "heading": "Filtrera",
  "filter": true,
  "columns": [
    {
      "title": "Kategori",
      "textSearch": false,
      "checkboxes": [
        {
          "id": "tjansteleverantor",
          "checkboxLabel": "Tjänsteleverantör",
          "value": "0",
          "is_inline": false,
          "is_disabled": false
        },
        {
          "id": "anvandarorganisation",
          "checkboxLabel": "Användarorganisation",
          "value": "1",
          "is_inline": false,
          "is_disabled": false
        }
      ]
    }
  ],
  "items": [
    {
      "provider": "Gotit AB",
      "logo": "https://skolfederation.se/app/uploads/2017/02/logo_gotit.png",
      "description": "Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.",
      "serviceName": "Alvis"
    },
    {
      "provider": "Lexplore Nordic AB",
      "logo": "https://skolfederation.se/app/uploads/2017/06/lexplore_logo-180x55.png",
      "description": "Avtalen ger dig som uppköpare eller rektor möjlighet att hjälpa elever med dyslexi eller andra läs- och skrivsvårigheter med att klara sig i skolan eller på en utbildning.",
      "serviceName": "Det flexibla avtalet"
    },
    {
      "provider": "Natur & kultur",
      "logo": "https://skolfederation.se/app/uploads/2015/04/NoK_Logo_35mm.gif",
      "description": "En digitalbok är den tryckta boken i digitalt format. Läs boken på en pekplatta, datorn eller telefon.",
      "serviceName": "Digitalbok"
    }
  ]
}
  • 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;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.organism(service-product-list) {
	list-style: none;
	margin: 0 0 func.rhythm(2) 0;
	padding: 0;

	@include bem.e(item) {
		display: flex;
		flex-direction: column;
		padding: func.rhythm(3) func.rhythm(2);

		& + & {
			border-top: 1px solid colors.$color-concrete;
		}

		@include breakpoint.bp-up(sm) {
			padding-top: func.rhythm(2);
			padding-bottom: func.rhythm(2);
			flex-direction: row;
			align-items: center;
		}
	}

	@include bem.e(logo) {
		flex-shrink: 0;

		@include bem.e(image) {
			width: 100px;
			height: auto;
			margin-right: func.rhythm(4);
			margin-bottom: func.rhythm(1);

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

	@include bem.e(data) {
		@include bem.e(list) {
			list-style: none;
			margin: 0;
			padding: 0;

			dt, dd {
				margin: 0;
				padding: 0;
			}

			dt {
				@extend %beta;
			}

			dd {
				max-width: calc(#{func.to_rem(612px)} + #{(var.$indent * 2)});
			}
		}
	}
}
  • URL: /components/raw/members-service-product/_members-service-product.scss
  • Filesystem Path: src/organisms/members-service-product/_members-service-product.scss
  • Size: 1.5 KB

No notes defined.