Tile

Component preview opent in nieuw tabblad

De breedte van het element wordt gedicteerd door de breedte van het omliggende element. Als afbeelding kan alleen een <img> gebruikt worden.

<div class="dso-tile">
    <a href="#">
        <span class="dso-tile-icon">
            <img src="../../dummy/images/icon-tree.png" alt="" />
        </span>
        <span class="dso-tile-link">
            Boom kappen of snoeien
        </span>
    </a>
</div>
<div class="dso-tile">
  <a href="#">
    <span class="dso-tile-icon">
      <img src="{{ source | path }}" alt=""/>
    </span>
    <span class="dso-tile-link">
      {{ label }}
    </span>
  </a>
</div>
{# <div class="row">
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@tile' -%}
  </div>
</div> #}
id: tile
source: /dummy/images/icon-tree.png
label: Boom kappen of snoeien