Internetstiftelsen Styleguide

Members Service Product: With Filter 

<div class="o-search">
    <div class="o-search__padded">
        <div class="row display-flex align-items-center">
            <div class="grid-auto u-p-r-0">
                <span class="o-search__icon">
                    <svg class="icon">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                </span>
            </div>
            <div class="grid u-p-l-0 display-flex">
                <label for="" class="u-visuallyhidden">Sök Medlemmar</label>
                <input type="search" class="o-search__input js-search-domain-input" placeholder="Sök Medlemmar" id="" aria-describedby="number-of-hits" value="">
                <button id="o-search-result-submit" type="submit" class="a-button a-button--sandstone a-button--large o-search__submit">
                    <span class="a-button__text">Sök</span>
                </button>
            </div>
        </div>
    </div>

    <div class="o-filter">
        <div class="js-o-accordion o-accordion o-accordion--transparent">
            <h3 class="o-filter__title js-accordion__header o-accordion__header--no-border o-accordion__header--inline">
                Filtrera
            </h3>
            <div class="js-accordion__panel o-accordion__panel--ash u-border-radius">
                <div class="o-accordion__panel__content">
                    <div class="row">
                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                            <fieldset class="field-group">
                                <legend class="label-legend">Kategori</legend>

                                <div class="checkbox">
                                    <input type="checkbox" id="tjansteleverantor" name="" value="0" class="a-checkbox u-visuallyhidden">
                                    <label for="tjansteleverantor">Tjänsteleverantör</label>
                                </div>

                                <div class="checkbox">
                                    <input type="checkbox" id="anvandarorganisation" name="" value="1" class="a-checkbox u-visuallyhidden">
                                    <label for="anvandarorganisation">Användarorganisation</label>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <button type="button" class="a-button a-button--ruby-light small o-filter__clear">
                        <span class="a-button__text">Rensa</span>
                    </button>
                </div>
            </div>
        </div>

    </div>
    <div class="o-search__status o-search__padded background-sandstone-light">
        Antal Medlemmar i listan: <span data-total-registrars="true">127</span>
    </div>
    <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>
</div>
<div class="a-paging-wrapper">
    <a href="#" class="a-paging">
        <span class="u-visuallyhidden">Föregående sida</span>
        <svg class="icon a-paging__icon">
            <use xlink:href="#icon-arrow-backwards"></use>
        </svg>
    </a>
    <span class="a-paging-wrapper__text">sida 2 av 11</span>
    <a href="#" class="a-paging">
        <span class="u-visuallyhidden">Nästa sida</span>
        <svg class="icon a-paging__icon">
            <use xlink:href="#icon-arrow-forwards"></use>
        </svg>
    </a>
</div>
 
<div class="o-search">
	<div class="o-search__padded">
		<div class="row display-flex align-items-center">
			<div class="grid-auto u-p-r-0">
				<span class="o-search__icon">
					<svg class="icon">
						<use xlink:href="#icon-search"></use>
					</svg>
				</span>
			</div>
			<div class="grid u-p-l-0 display-flex">
				<label for="" class="u-visuallyhidden">Sök Medlemmar</label>
				<input type="search" class="o-search__input js-search-domain-input" placeholder="Sök Medlemmar" id="" aria-describedby="number-of-hits" value="">
				<button id="o-search-result-submit" type="submit" class="a-button a-button--sandstone a-button--large o-search__submit">
					<span class="a-button__text">Sök</span>
				</button>
			</div>
		</div>
	</div>

	{{> '@filter'}}
	<div class="o-search__status o-search__padded background-sandstone-light">
		Antal Medlemmar i listan: <span data-total-registrars="true">127</span>
	</div>
	{{render '@members-service-product--list' member="true"}}
</div>
<div class="a-paging-wrapper">
	<a href="#" class="a-paging">
		<span class="u-visuallyhidden">Föregående sida</span>
		<svg class="icon a-paging__icon">
			<use xlink:href="#icon-arrow-backwards"></use>
		</svg>
	</a>
	<span class="a-paging-wrapper__text">sida 2 av 11</span>
	<a href="#" class="a-paging">
		<span class="u-visuallyhidden">Nästa sida</span>
		<svg class="icon a-paging__icon">
			<use xlink:href="#icon-arrow-forwards"></use>
		</svg>
	</a>
</div>
 
{
  "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.