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://www.skolfederation.se/wp-content/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://www.skolfederation.se/wp-content/uploads/2016/10/MV-Nordic_logotyp-180x34.png" alt="MV 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">MV 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://www.skolfederation.se/wp-content/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://www.skolfederation.se/wp-content/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://www.skolfederation.se/wp-content/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": "MV Nordic AB",
      "logo": "https://www.skolfederation.se/wp-content/uploads/2016/10/MV-Nordic_logotyp-180x34.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://www.skolfederation.se/wp-content/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';

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

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

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

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

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

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

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

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

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

			dt {
				@extend %beta;
			}

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

No notes defined.