Den Haag Design System

Menutile 

<div class="modiv-tile">
    <ul>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="../../../img/parkeren.png" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#paginaLink" class="" title="paginaTitle">
                <div>
                    <div class="thumb">
                        <!--<img src="#imageTile" alt="parkerenPlaatje">-->
                        <div class="rect"></div>
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="altText">
                        <p>Parkeervergunningen, tegoed en naheffingen</p>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
 
<div class="modiv-tile">
  <ul>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="../../../img/parkeren.png" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="#paginaLink" class="" title="paginaTitle">
        <div>
          <div class="thumb">
            <!--<img src="#imageTile" alt="parkerenPlaatje">-->
            <div class="rect"></div>
          </div>
          <div class="title">
            <span>Parkeren</span>
          </div>
          <div class="altText">
            <p>Parkeervergunningen, tegoed en naheffingen</p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>
 
/* No context defined for this component. */
  • Content: 
    .modiv-tile {
  ul {
    display: flex;
    flex-wrap: wrap;
    margin: -6px;
    list-style-type: none;
    padding-left: 0;

    .item {
      width: calc(100% - 12px);
      margin: 6px;
    }

    a {
      text-align: center;
      height: 100%;
      display: block;
      padding: $space-s;
      text-decoration: none;
      border: 2px solid $grey-light;
      background-color: $white;

      .rect {
        margin: 0 auto;
        height: 3.33333em;
        background-color: $grey-light;
        width: 75px;
      }

      img {
        margin: 0 auto;
        height: 3.33333em;
        width: auto;
      }

      span {
        color: $blue;
        font-size: $fs-up-3;
        display: block;
        line-height: normal;
      }

      p {
        margin: $space-xs 0;
        color: $grey-dark;
        font-size: $fs-down-1;
      }
    }

    a:hover {
      border-color: $brown;

      span {
        color: $brown;
        text-decoration: none;
      }
    }
  }
}

@media (min-width: $tablet-portrait) {
  .modiv-tile ul .item {
    width: calc(50% - 12px);
  }
}

@media (min-width: $tablet-landscape) {
  .modiv-tile ul .item {
    width: calc(#{math.div(1, 3)} * 100% - 12px);
  }
}

@media (min-width: $desktop-wide) {
  .modiv-tile ul .item {
    width: calc(25% - 12px);
  }

  @supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
    .modiv-tile ul .item {
      width: calc(25% - 13px);
    }
  }
}
  • URL: /components/raw/menutile/_menutile.scss
  • Filesystem Path: src/components/01-componenten/menutile/_menutile.scss
  • Size: 1.4 KB

There are no notes for this item.