Den Haag Design System

Tegel 

<div class="modiv-tile">
    <div class="wrapper">
        <div class="item">
            <a href="/" title="Aspernatur molestiae dolorum.">
                <div>
                    <div class="thumb">
                        <img src="/img/parkeren.png" alt="">
                    </div>
                    <div class="title">
                        <span>Parkeren</span>
                    </div>
                    <div class="alttext">
                        <p>Laborum qui doloribus porro consequatur architecto officia provident quaerat numquam cumque qui voluptate adipisci.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Est temporibus dolore.">
                <div>
                    <div class="thumb">
                        <img src="/img/erfpacht.png" alt="">
                    </div>
                    <div class="title">
                        <span>Erfpacht</span>
                    </div>
                    <div class="alttext">
                        <p>Illo rerum debitis accusantium illo iure tempore quasi eos ipsam dolores autem molestias accusantium.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Possimus quae qui.">
                <div>
                    <div class="thumb">
                        <img src="/img/belastingzaken.png" alt="">
                    </div>
                    <div class="title">
                        <span>Belastingzaken</span>
                    </div>
                    <div class="alttext">
                        <p>Vero debitis placeat delectus non rerum sunt occaecati tenetur quidem exercitationem cum a asperiores.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Deserunt rem ab.">
                <div>
                    <div class="thumb">
                        <img src="/img/woz.png" alt="">
                    </div>
                    <div class="title">
                        <span>WOZ</span>
                    </div>
                    <div class="alttext">
                        <p>Sed cumque quam commodi ut dolores incidunt amet commodi cum quia et sapiente quisquam.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Harum incidunt in.">
                <div>
                    <div class="thumb">
                        <img src="/img/overzichtaanvragen.png" alt="">
                    </div>
                    <div class="title">
                        <span>Overzicht Aanvragen</span>
                    </div>
                    <div class="alttext">
                        <p>Perspiciatis minima consequatur ad ea ex mollitia incidunt amet voluptatum perferendis laudantium voluptatibus aliquid.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Dolor ut quia.">
                <div>
                    <div class="thumb">
                        <img src="/img/berichtenbox.png" alt="">
                    </div>
                    <div class="title">
                        <span>Berichtenbox</span>
                    </div>
                    <div class="alttext">
                        <p>Ut qui inventore magni ad sint repudiandae et repellendus nesciunt in ut quia illo.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Et deserunt quis.">
                <div>
                    <div class="thumb">
                        <img src="/img/basisregistratie.png" alt="">
                    </div>
                    <div class="title">
                        <span>Basisregistratie</span>
                    </div>
                    <div class="alttext">
                        <p>Velit asperiores placeat ipsa non eaque atque inventore neque rem corrupti nemo id voluptates.</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="/" title="Atque et quod.">
                <div>
                    <div class="thumb">
                        <img src="/img/contactgegevens.png" alt="">
                    </div>
                    <div class="title">
                        <span>Contactgegevens</span>
                    </div>
                    <div class="alttext">
                        <p>Qui harum modi animi cumque perferendis expedita qui iste necessitatibus voluptas deleniti aliquid ad.</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
 
<div class="modiv-tile">
  <div class="wrapper">
    {{#each tiles}}
      <div class="item">
        <a href="{{this.container.to}}" title="{{this.container.title}}">
          <div>
            <div class="thumb">
              <img src="{{this.content.image}}" alt="">
            </div>
            <div class="title">
              <span>{{this.content.title}}</span>
            </div>
            <div class="alttext">
              <p>{{this.content.body}}</p>
            </div>
          </div>
        </a>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "tiles": [
    {
      "container": {
        "to": "/",
        "title": "Aspernatur molestiae dolorum."
      },
      "content": {
        "image": "/img/parkeren.png",
        "title": "Parkeren",
        "body": "Laborum qui doloribus porro consequatur architecto officia provident quaerat numquam cumque qui voluptate adipisci."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Est temporibus dolore."
      },
      "content": {
        "image": "/img/erfpacht.png",
        "title": "Erfpacht",
        "body": "Illo rerum debitis accusantium illo iure tempore quasi eos ipsam dolores autem molestias accusantium."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Possimus quae qui."
      },
      "content": {
        "image": "/img/belastingzaken.png",
        "title": "Belastingzaken",
        "body": "Vero debitis placeat delectus non rerum sunt occaecati tenetur quidem exercitationem cum a asperiores."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Deserunt rem ab."
      },
      "content": {
        "image": "/img/woz.png",
        "title": "WOZ",
        "body": "Sed cumque quam commodi ut dolores incidunt amet commodi cum quia et sapiente quisquam."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Harum incidunt in."
      },
      "content": {
        "image": "/img/overzichtaanvragen.png",
        "title": "Overzicht Aanvragen",
        "body": "Perspiciatis minima consequatur ad ea ex mollitia incidunt amet voluptatum perferendis laudantium voluptatibus aliquid."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Dolor ut quia."
      },
      "content": {
        "image": "/img/berichtenbox.png",
        "title": "Berichtenbox",
        "body": "Ut qui inventore magni ad sint repudiandae et repellendus nesciunt in ut quia illo."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Et deserunt quis."
      },
      "content": {
        "image": "/img/basisregistratie.png",
        "title": "Basisregistratie",
        "body": "Velit asperiores placeat ipsa non eaque atque inventore neque rem corrupti nemo id voluptates."
      }
    },
    {
      "container": {
        "to": "/",
        "title": "Atque et quod."
      },
      "content": {
        "image": "/img/contactgegevens.png",
        "title": "Contactgegevens",
        "body": "Qui harum modi animi cumque perferendis expedita qui iste necessitatibus voluptas deleniti aliquid ad."
      }
    }
  ]
}
  • Content: 
    $tile-space: 6px;

.modiv-tile .wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: -$tile-space;

  .item {
    width: calc(#{math.div(100%, 1)} - #{$tile-space * 2});
    margin: $tile-space;
    transition: all 200ms ease-in;
  }

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

    &:hover {
      border-color: $brown;
    }
    &:focus {
      border-color: $black;
    }

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

    img {
      margin: 0 auto;
      height: math.div(10em, 3);
      width: auto;
    }

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

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

  @media (min-width: $tablet-portrait) {

    .item {
      width:calc(#{math.div(100%, 2)} - #{$tile-space * 2});
    }
  }

  @media (min-width: $tablet-landscape) {

    .item {
      width: calc(#{math.div(100%, 3)} - #{$tile-space * 2});
    }
  }

  @media (min-width: $desktop-wide) {

    .item {
      width: calc(#{math.div(100%, 4)} - #{$tile-space * 2});
    }
  }
}
  • URL: /components/raw/tile/_tile.scss
  • Filesystem Path: src/components/01-componenten/tile/_tile.scss
  • Size: 1.3 KB

Tegels zijn flexibele containers met een verscheidenheid aan inhoud.

Gebruik

Tegels bieden een diverse methode voor het weergeven van informatie. Het type inhoud in een tegel kan variëren van informatief tot aan de slag gaan. Tegels kunnen worden aangepast aan een specifieke use-case.

Wanneer er een call-to-action in een tegel wordt gebruikt, raden we aan een secundaire button te gebruiken. Primaire buttons moeten worden gebruikt voor de belangrijkste actie die een gebruiker op de pagina uitvoert.

Type tegels

Alle onderstaande afbeeldingen tonen een voorbeeld van welk type inhoud binnen een tegel kan worden gepresenteerd. Dit zijn de stijlkeuzes die wij aanbevelen, maar je bent vrij om een eigen lay-out en ontwerp te maken binnen een tegel.

Klikbaar

Klikbare tegels kunnen worden gebruikt als navigatie-items, waarbij de gehele tegel in een klikbare staat is. Het stuurt de gebruiker naar een nieuwe pagina wanneer erop wordt geklikt. De tegels kunnen een link bevatten.

alt text

Selecteerbaar

Selecteerbare tegels werken als radio buttons waarbij de gehele tegel een klikdoel is. De tegels werken goed voor het presenteren van opties aan een gebruiker op een gestructureerde wijze, zoals een reeks banken.

alt text