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://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="{{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://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
        }
      ]
    }
  ]
}
  • 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.