Den Haag Design System

Bankenlijst 

<ul class="bank-list">
    <li>
        <input type="radio" name="bank-list" id="TRIONL2U" value="TRIONL2U">
        <label for="TRIONL2U" style="background-image: url(/img/triodos.svg)">
            <span class="screen-reader-only">Triodos</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="SNSBNL2A" value="SNSBNL2A">
        <label for="SNSBNL2A" style="background-image: url(/img/sns.png)">
            <span class="screen-reader-only">SNS</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="RBRBNL21" value="RBRBNL21">
        <label for="RBRBNL21" style="background-image: url(/img/regiobank.svg)">
            <span class="screen-reader-only">Regiobank</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="KNABNL2H" value="KNABNL2H">
        <label for="KNABNL2H" style="background-image: url(/img/knab.svg)">
            <span class="screen-reader-only">Knab</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="RABONL2U" value="RABONL2U">
        <label for="RABONL2U" style="background-image: url(/img/rabobank.png)">
            <span class="screen-reader-only">Rabobank</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="INGBNL2A" value="INGBNL2A">
        <label for="INGBNL2A" style="background-image: url(/img/ing.svg)">
            <span class="screen-reader-only">ING</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="ASNBNL21" value="ASNBNL21">
        <label for="ASNBNL21" style="background-image: url(/img/asn.svg)">
            <span class="screen-reader-only">ASN</span>
        </label>
    </li>
    <li>
        <input type="radio" name="bank-list" id="ABNANL2A" value="ABNANL2A">
        <label for="ABNANL2A" style="background-image: url(/img/abnamro.svg)">
            <span class="screen-reader-only">ABN Amro</span>
        </label>
    </li>
</ul>
 
<ul class="bank-list">
  <li>
    <input type="radio" name="bank-list" id="TRIONL2U" value="TRIONL2U">
    <label for="TRIONL2U" style="background-image: url(/img/triodos.svg)">
      <span class="screen-reader-only">Triodos</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="SNSBNL2A" value="SNSBNL2A">
    <label for="SNSBNL2A" style="background-image: url(/img/sns.png)">
      <span class="screen-reader-only">SNS</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="RBRBNL21" value="RBRBNL21">
    <label for="RBRBNL21" style="background-image: url(/img/regiobank.svg)">
      <span class="screen-reader-only">Regiobank</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="KNABNL2H" value="KNABNL2H">
    <label for="KNABNL2H" style="background-image: url(/img/knab.svg)">
      <span class="screen-reader-only">Knab</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="RABONL2U" value="RABONL2U">
    <label for="RABONL2U" style="background-image: url(/img/rabobank.png)">
      <span class="screen-reader-only">Rabobank</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="INGBNL2A" value="INGBNL2A">
    <label for="INGBNL2A" style="background-image: url(/img/ing.svg)">
      <span class="screen-reader-only">ING</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="ASNBNL21" value="ASNBNL21">
    <label for="ASNBNL21" style="background-image: url(/img/asn.svg)">
      <span class="screen-reader-only">ASN</span>
    </label>
  </li>
  <li>
    <input type="radio" name="bank-list" id="ABNANL2A" value="ABNANL2A">
    <label for="ABNANL2A" style="background-image: url(/img/abnamro.svg)">
      <span class="screen-reader-only">ABN Amro</span>
    </label>
  </li>
</ul>
 
/* No context defined for this component. */
  • Content: 
    .bank-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 0;

  li {
    list-style: none;
    position: relative;
    width: 48%;
    margin-bottom: 4%;
    min-height: 8em;
  }

  label {
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    border: 2px solid $grey-light;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s border-color ease-in-out;
    text-indent: -9999em;
    background-size: contain;

    &::before {
      content: '';
      display: block;
      position: absolute;
      right: $space-xs;
      top: $space-xs;
      width: $space-s;
      height: $space-s;
      background-repeat: no-repeat;
      background-size: $space-s;
      transition: .2s opacity ease-in-out;
    }
  }

  input[type="radio"] {
    position: absolute;
    left: -9999em;
    top: -9999em;

    + label {
      margin: 0;

      &:before {
        opacity: .25;
      }
    }

    + label:hover {
      border-color: $brown;

      &::before {
        background-image: url('../img/icons/check-gold.svg');
      }
    }

    &:focus + label:hover,
    &:checked + label {
      border-color: $blue;

      &::before {
        background-image: url('../img/icons/check-blue.svg');
        opacity: 1;
      }
    }

    &:focus + label {
      border-color: $black;

      &::before {
        background-image: url('../img/icons/check-black.svg');
        opacity: 1;
      }
    }
  }

  @media(min-width: $tablet-landscape) {
    li {
      width: 22.75%;
      margin-bottom: 2.5%;
    }
  }
}
  • URL: /components/raw/bank-list/_bank-list.scss
  • Filesystem Path: src/components/01-componenten/bank-list/_bank-list.scss
  • Size: 1.7 KB

There are no notes for this item.