Search card: Default

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="vgr-search-card">
    <h2 class="vgr-search-card__headline">
        <a href="/">Lorem ipsum</a>
    </h2>
    <time class="vgr-search-card__date" datetime="2015-08-19">19 augusti 2015</time> -
    <p class="vgr-search-card__source">Västra Götalandsregionen</p>
    <p class="vgr-search-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…</p>
</div>


        <div class="vgr-search-card">
  <h2 class="vgr-search-card__headline">
    <a href="{{ url }}">{{ headline }}</a>
  </h2>
  <time class="vgr-search-card__date" {% if datetime %}datetime="{{ datetime }}"{% endif %}>{{ date }}</time> -
  <p class="vgr-search-card__source">{{ source }}</p>
  <p class="vgr-search-card__excerpt">{{ excerpt }}</p>
</div>


        
            
            {
  "headline": "Lorem ipsum",
  "url": "/",
  "datetime": "2015-08-19",
  "date": "19 augusti 2015",
  "source": "Västra Götalandsregionen",
  "excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet tristique erat a tincidunt. Morbi eleifend augue sit amet nunc vulputate finibus…"
}

File:

Content:


                                .vgr-search-card {
  margin-bottom: .625rem;
  padding: 1rem .75rem;
  background: $color-white;

  $headline-size: 1.125rem;
  $meta-size: 14px;
  $meta-size-smaller: 12px;
  $meta-color: #0c6725;
  $excerpt-size: 14px;

  p {
    font-family: $secondary-font-stack;
    font-size: 14px;
    max-width: none;
  }

  [aria-expanded=true] {
    display: block;
  }

  [aria-expanded=false] {
    display: none;
  }

  &--panel {
    box-shadow: 0 1px 3px rgba($color-black, .2);

    @media screen and (min-width:0\0) {
        /* IE9 and IE10 */
        box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  &__folded {
    display: none;
    padding-top: 0.825rem;
    border-top: 1px solid $color-gray-lighter;
  }

  &__headline {
    margin: 0;
    padding: 8px 0 0 0;
    font-weight: 100;
    font-size: $large-font-size;
    line-height: 140%;

    &--white {
      color: #fff;
      padding: 0px 0 0 0;
      font-weight: 100;

      a:link,
      a:focus,
      a:visited {
        color: #fff;
      }
    }
  }

  &__image-holder {
    position: relative;
    float: left;
    margin: .5rem;
    width: 3.75rem;
    height: 3.75rem;
  }

  &__image-container {
    border-radius: 100%;
    overflow: hidden;
    width: 3.75rem;
    height: 3.75rem;
    position: relative;
  }

  &__image {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
  }

  &__status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    overflow: hidden;

    svg {
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      shape-rendering: auto;
    }
  }

  &__introduction {
    display: block;
    overflow: hidden;
    padding: 9px 0px 6px 0px;
  }

  &__date {
    color: $meta-color;
    font-size: 14px;
  }

  &__source {
    display: inline;
    color: $meta-color;
    font-size: 14px;
  }

  &__excerpt {
    margin: 0;
    font-size: $excerpt-size;
  }

  &__meta {
    margin: 0;
    font-size: 14px;
    line-height: 140%;
  }

  &__placement {
    display: inline;
    padding-right: 4px;
  }

  &__meta-toggle-btn {
    font-size: $meta-size-smaller;
    color: #3796d7;
    padding-right: 6px;

    span {
      &:hover {
        cursor: pointer;
        text-decoration: underline;
        color: lighten( #3796d7, 5%);
      }
    }

    &__expand-button__close {
      display: none;
    }

    &__expand-button__open {
      display: inline-block;
    }

    svg {
      fill: #EBEBEB;
      shape-rendering: auto;
    }
  }
}

.vgr-search-card__header {
    width: calc(100% + 1.5rem);
    background: #004E7D;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05);
    color: #fff;

    &--photo {
      margin: -1rem -.75rem 0;
    }
  }

  .vgr-search-card--bestbet {
    .vgr-search-card__header {
      background: #004674;
      color: #fff;

      a {
        color: inherit;
      }
    }
  }

  .vgr-search-card__multi-employee {
    margin: 0 -.75rem;
    padding: .5rem .5rem .5rem .5rem;
    background-color: #E6EDF2;
    font-size: 14px;
    vertical-align: top;

    [aria-expanded=true] {
      display: block;
    }

    [aria-expanded=false] {
      display: none;
    }

    svg {
      vertical-align: top;
      padding-top: .1rem;
      padding-right: .2rem;
      padding-bottom: .5rem;
      vertical-align: top;
      display: inline;
      shape-rendering: auto;
    }

    &-label {
      vertical-align: top;
      color: $color-black;
      font-weight: bolder;
      margin-bottom: -4px;
      display: block;
    }

    &-information {
      vertical-align: top;
      margin-top: -.4rem;
      padding-top: 0;
      display: inline-block;
      overflow: hidden;
      width: 80%;

      a:hover {
        text-decoration: none;
      }
    }
  }

  .vgr-search-card__information {
    margin-top: 0.825rem;
    margin-bottom: 0.825rem;

    &--slim {
      margin-bottom: 0rem;
    }

    &[aria-hidden="true"] {
      display: none;
    }
  }

  .vgr-detail-list {
    display: table;
    margin: 0;
    width: 100%;
    font-size: 14px;
    line-height: 22px;

    &--bottom-border {
      border-bottom: 1px solid $color-gray-lighter;
    }

    &--compact {
      line-height: 1.4em;
    }

    &--margin-bottom {
      margin-bottom: 1.6rem;
    }

    &__title {
      color: #727272;
    }

    &__item {
      margin-left: 0;

      &--margin-bottom {
        line-height: 60px;
      }
    }

    &__label {
      padding-right: 10px;
      color: #000;
      font-weight: 700;
    }

    &__link {
      color: #3796d7;
      text-decoration: none;

      &--multi-employee {
        color: $text-color;
        text-decoration: underline;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &__group {
      display: inline-block;
      vertical-align: top;
      list-style: none;
      padding: 0;
      -webkit-margin-before: 0px;
      -webkit-margin-after: 0px;
      margin-bottom: 0.1em;
    }

    @media screen and (min-width: $small) {
      &__item {
        display: table-row;
      }

      &__label {
        display: table-cell;
        width: 130px;
      }

      &__group {}
    }
  }

  .vgr-link-list {
    font-size: 14px;

    &__heading {
      padding: 0.5rem 0 0.5rem 0;
      margin: 0;
      border-top: 1px solid $color-gray-lighter;
      color: #727272;
      font-size: 14px;
    }

    &__item {
      &:not(:first-child) {
        margin-top: 5px;
      }
    }

    &__link {
      display: block;
      padding: 8px;
      border: 1px solid #e3e3e3;
      background: #f6f6f6;
      line-height: 1;
    }
  }

  .vgr-search-card__map {
    margin: 0 -.75rem;
  }

  .vgr-toggle-content {
    list-style-type: none;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;

    &__container {
      padding: 0px;
      padding-top: 0.5rem;
      white-space: nowrap;
      display: none;
      color: #000;

      [aria-expanded=true] {
        display: block;
      }

      [aria-expanded=false] {
        display: none;
      }
    }

    &__list {
      margin: 0px;
      padding: 0px;
      white-space: nowrap;

      &--margin-top {
        margin-top: 0.825rem;
      }
    }

    &__item {
      display: block;
      background: #fff;
      font-size: 14px;
      line-height: 22px;
      padding: 0px;
      margin: 0px;
      margin-bottom: 30px;

      b {
        display: block;
      }
    }

    svg {
      margin: 0 10px 2px 0;
      shape-rendering: auto;
    }

    &__link {
      font-size: 14px;
      color: #3796d7;
      text-decoration: none;
      display: block;
      padding: 0.5rem 0 0.5rem 0;
      border-top: 1px solid $color-gray-lighter;
      width: 100%;

      &:hover {
        color: #3796d7;
        text-decoration: underline;
      }

      svg {
        margin: 0 6px -2px 0;
        shape-rendering: auto;
      }

      svg.rotate90 {
        margin-right: 10px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        margin: 0 10px 2px 0;
      }

      span {
        background: #999;
        margin-right: 6px;
        margin-bottom: 4px;
        vertical-align: middle;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        display: inline-block;

        svg {
          margin: 0;
          vertical-align: top;
          shape-rendering: auto;
        }
      }
    }

    .vgr-link-list__heading {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }

      &[data-expanded] {
        svg {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
          shape-rendering: auto;
        }
      }
    }
  }

  .vgr-search-card__expand-button {
    display: block;
    margin: 0 -.75rem -1rem;
    padding: 0.8rem;
    width: calc(100% + 1.5rem);
    border: 0;
    background: #EBEBEB;
    color: #5B5B5B;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background .1s ease-in-out;

    svg {
      margin-right: .5rem;
      vertical-align: middle;
      shape-rendering: auto;
    }

    &:hover {
      background: #efefef;
      text-decoration: underline;
    }

    &__open-label {
      display: inline;
    }

    &__close-label {
      display: none;
    }
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button .vgr-search-card__expand-button__open-label {
    display: none;
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button .vgr-search-card__expand-button__close-label {
    display: inline;
  }

  .vgr-search-card__meta[data-expanded] .vgr-search-card__meta-toggle-btn__expand-button__open {
    display: none;
  }

  .vgr-search-card__meta[data-expanded] .vgr-search-card__meta-toggle-btn__expand-button__close {
    display: inline-block;
  }

  .vgr-search-card__folded[aria-expanded="true"]+.vgr-search-card__expand-button svg {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  @media screen and (min-width:0\0) {
    /* IE9 and IE10 */
    .vgr-search-card--panel {
      box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  @supports (-ms-accelerator:true) {
    /* Microsoft Edge 13 */
    .vgr-search-card--panel {
      box-shadow: 0 1px 10px rgba($color-black, .2);
    }
  }

  _:-ms-lang(x), _:-webkit-full-screen, .vgr-search-card--panel {
    /* Microsoft Edge 12+ */
    box-shadow: 0 1px 10px rgba($color-black, .2);
   }

URL: /components/raw/search-card/_search-card.scss
Filesystem Path: components/components/search/search-card/_search-card.scss
Size: 9.9 KB

Handle: @search-card--default
Variants (4): Default , Panel , Person , Organisation
Preview:
- With layout
- Component only
Filesystem Path: components/components/search/search-card/search-card.html

Seach Card Person

Ett söklistningskort med kontakt- och organisationsuppgifter för en enskild anställd.

Externa beroenden:

SCSS-variabler

$secondary-font-stack:	Helvetica, Arial, sans-serif !default;
$large-font-size:	18px !default;
$small:	640px !default;
$text-color:	#494746 !default;
$color-white:	#fff !default;
$color-black:	#000 !default;
$color-gray-lighter:	#ddd !default;

Se SCSS-kod under fliken “Assets” i menyn ovan

HTML

N/A

JAVASCRIPT

N/A

ÖVRIGT

N/A

Designreferenser:

Design Desktop: https://xd.adobe.com/view/06ce1fa0-a13f-49e4-9606-01547d5220a3/

Design Mobile: https://xd.adobe.com/view/48872f8c-db79-4e69-8f14-92ad56f9cb7f/

Kompilerad CSS:

  .vgr-search-card {
    margin-bottom: .625rem;
    padding: 1rem .75rem;
    background: #fff;
  }
  .vgr-search-card p {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
      max-width: none;
  }
  .vgr-search-card [aria-expanded=true] {
      display: block;
  }
  .vgr-search-card [aria-expanded=false] {
      display: none;
  }
  .vgr-search-card–panel {
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .vgr-search-cardfolded {
      display: none;
      padding-top: 0.825rem;
      border-top: 1px solid #ddd;
  }
  .vgr-search-cardheadline {
      margin: 0;
      padding: 8px 0 0 0;
      font-weight: 100;
      font-size: 1.125rem;
      line-height: 140%;
  }
  .vgr-search-cardheadline–white {
      color: #fff;
      padding: 0px 0 0 0;
      font-weight: 100;
  }
  .vgr-search-cardheadline–white a:link,
  .vgr-search-cardheadline–white a:focus,
  .vgr-search-cardheadline–white a:visited {
      color: #fff;
  }
  .vgr-search-cardimage-holder {
      position: relative;
      float: left;
      margin: .5rem;
      width: 3.75rem;
      height: 3.75rem;
  }
  .vgr-search-cardimage-container {
      border-radius: 100%;
      overflow: hidden;
      width: 3.75rem;
      height: 3.75rem;
      position: relative;
  }
  .vgr-search-cardimage {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50%;
      margin-left: -50%;
  }
  .vgr-search-cardstatus {
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 16px;
      height: 16px;
      overflow: hidden;
  }
  .vgr-search-cardstatus svg {
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      shape-rendering: auto;
  }
  .vgr-search-cardintroduction {
      display: block;
      overflow: hidden;
      padding: 9px 0px 6px 0px;
  }
  .vgr-search-carddate {
      color: #0c6725;
      font-size: 14px;
  }
  .vgr-search-cardsource {
      display: inline;
      color: #0c6725;
      font-size: 14px;
  }
  .vgr-search-cardexcerpt {
      margin: 0;
      font-size: 14px;
  }
  .vgr-search-cardmeta {
      margin: 0;
      font-size: 14px;
      line-height: 140%;
  }
  .vgr-search-cardplacement {
      display: inline;
      padding-right: 4px;
  }
  .vgr-search-cardmeta-toggle-btn {
      font-size: 12px;
      color: #3796d7;
      padding-right: 6px;
  }
  .vgr-search-cardmeta-toggle-btn span:hover {
      cursor: pointer;
      text-decoration: underline;
      color: #4ca1db;
  }
  .vgr-search-cardmeta-toggle-btnexpand-buttonclose {
      display: none;
  }
  .vgr-search-cardmeta-toggle-btnexpand-buttonopen {
      display: inline-block;
  }
  .vgr-search-cardmeta-toggle-btn svg {
      fill: #EBEBEB;
      shape-rendering: auto;
  }
  .vgr-search-cardheader {
      width: calc(100% + 1.5rem);
      background: #004E7D;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      color: #fff;
  }
  .vgr-search-cardheader–photo {
      margin: -1rem -.75rem 0;
  }
  .vgr-search-card–bestbet .vgr-search-cardheader {
      background: #004674;
      color: #fff;
  }
  .vgr-search-card–bestbet .vgr-search-cardheader a {
      color: inherit;
  }
  .vgr-search-cardmulti-employee {
      margin: 0 -.75rem;
      padding: .5rem .5rem .5rem .5rem;
      background-color: #E6EDF2;
      font-size: 14px;
      vertical-align: top;
  }
  .vgr-search-cardmulti-employee [aria-expanded=true] {
      display: block;
  }
  .vgr-search-cardmulti-employee [aria-expanded=false] {
      display: none;
  }
  .vgr-search-cardmulti-employee svg {
      vertical-align: top;
      padding-top: .1rem;
      padding-right: .2rem;
      padding-bottom: .5rem;
      vertical-align: top;
      display: inline;
      shape-rendering: auto;
  }
  .vgr-search-cardmulti-employee-label {
      vertical-align: top;
      color: #000;
      font-weight: bolder;
      margin-bottom: -4px;
      display: block;
  }
  .vgr-search-cardmulti-employee-information {
      vertical-align: top;
      margin-top: -.4rem;
      padding-top: 0;
      display: inline-block;
      overflow: hidden;
      width: 80%;
  }
  .vgr-search-cardmulti-employee-information a:hover {
      text-decoration: none;
  }
  .vgr-search-cardinformation {
      margin-top: 0.825rem;
      margin-bottom: 0.825rem;
  }
  .vgr-search-cardinformation–slim {
      margin-bottom: 0rem;
  }
  .vgr-search-cardinformation[aria-hidden=”true”] {
      display: none;
  }

Kompilerad JavaScript:

  function Toggle(el) {
    var toggle = {};
    var element = el;
    var containerID = element.getAttribute(‘aria-controls’);
    var container = document.getElementById(containerID);

    toggle.init = function() {
        if (!container) {
            container = container || toggle.findContainer(element.parentNode);
            container = container || toggle.findContainer(element.parentNode.parentNode);
            container = container || toggle.findContainer(element.parentNode.parentNode.parentNode);
        }

        if (container) {
            toggle.addEvents();
        }
    };

    toggle.findContainer = function(node) {
        var found = node.getElementsByClassName(containerID);
        found = found ? found[0] : null;

        return found;
    };

    toggle.addEvents = function() {
        element.addEventListener(‘click’, this.onClick);
    };

    toggle.removeEvents = function() {
        element.removeEventListener(‘click’, this.onClick);
    };

    toggle.onClick = function(e) {
        if (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }

        var expanded = container.getAttribute(‘aria-expanded’);
        if (expanded === ‘true’) {
            container.setAttribute(‘aria-expanded’, ‘false’);
            element.removeAttribute(‘data-expanded’);
        } else {
            container.setAttribute(‘aria-expanded’, ‘true’);
            element.setAttribute(‘data-expanded’, ‘’);
        }
    };

    toggle.kill = function() {
        this.removeEvents();
    };

    toggle.init();

    return toggle;
  }

Utvecklingslogg:

2018-02-23

Dokumentation: var och hur kan den tillämpas

2018-02-20

Kvalitetsgranskning av komponent

2018-01-12

Komponent implementerad i stilguiden

2017-12-12

Genomgång av skisser och eventuell funktionsbeskrivning

2017-02-12

Designleverans

Search card: Default

Seach Card Person

Externa beroenden:

SCSS-variabler

HTML

JAVASCRIPT

ÖVRIGT

Designreferenser:

Kompilerad CSS:

Kompilerad JavaScript:

Utvecklingslogg:

2018-02-23

2018-02-20

2018-01-12

2017-12-12

2017-02-12

Search

Search Card

Icons

General

Specific

Javascript

Logo

Extended Links