Internetstiftelsen Styleguide

Members Service Product: Single Item 

<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="{{logo}}" alt="{{provider}}"></a>
	</div>
	<div class="o-service-product-list__data">
		<dl class="o-service-product-list__data__list">
			<dt>{{serviceName}}</dt>
			<dd><a href="http://www.gotit.se/" class="u-link u-display-inline-block u-m-b-1">{{provider}}</a></dd>
			<dd>{{description}}</dd>
		</dl>
	</div>
</li>
 
{
  "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
        }
      ]
    }
  ]
}
  • 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.