‹ Components

7.20

???

Tiles .ui-tile

Modifiers:

  • .ui-tile--set – Variant for Sets
  • .ui-tile--small – Small
  • .ui-tile--large – Large
Media-entry-1

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<div class='ui-tile ui-tile--set'>
<div class='ui-tile__head'>
<ul class='ui-tile__actions left by-left'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-clipboard-toggle='' title='Zur Zwischenablage hinzufügen/entfernen'>
<i class='icon-checkbox'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-favor-toggle='' title='Zu Favoriten hinzufügen'>
<i class='icon-star-empty'></i>

</a>
</li>
</ul>
<ul class='ui-tile__actions right by-right'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Stöbern'>
<i class='icon-eye'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Metadaten editieren'>
<i class='icon-pen'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-delete-action='' title='Löschen'>
<i class='icon-trash'></i>

</a>
</li>
</ul>
</div>
<div class='ui-tile__body'>
<a class='ui-tile__thumbnail' href='http://example.com'>
<img alt='Media-entry-1' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>
Document.png

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<div class='ui-tile ui-tile--small ui-tile--set'>
<div class='ui-tile__head'>
<ul class='ui-tile__actions left by-left'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-clipboard-toggle='' title='Zur Zwischenablage hinzufügen/entfernen'>
<i class='icon-checkbox'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-favor-toggle='' title='Zu Favoriten hinzufügen'>
<i class='icon-star-empty'></i>

</a>
</li>
</ul>
<ul class='ui-tile__actions right by-right'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Stöbern'>
<i class='icon-eye'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Metadaten editieren'>
<i class='icon-pen'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-delete-action='' title='Löschen'>
<i class='icon-trash'></i>

</a>
</li>
</ul>
</div>
<div class='ui-tile__body'>
<a class='ui-tile__thumbnail' href='http://example.com'>
<img alt='Document.png' class='ui-tile__image' src='/assets/thumbnails/document.png.png'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>
Media-entry-1

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<div class='ui-tile ui-tile--large ui-tile--set'>
<div class='ui-tile__head'>
<ul class='ui-tile__actions left by-left'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-clipboard-toggle='' title='Zur Zwischenablage hinzufügen/entfernen'>
<i class='icon-checkbox'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-favor-toggle='' title='Zu Favoriten hinzufügen'>
<i class='icon-star-empty'></i>

</a>
</li>
</ul>
<ul class='ui-tile__actions right by-right'>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Stöbern'>
<i class='icon-eye'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' title='Metadaten editieren'>
<i class='icon-pen'></i>

</a>
</li>
<li class='ui-tile__action'>
<a class='ui-tile__action-link' data-delete-action='' title='Löschen'>
<i class='icon-trash'></i>

</a>
</li>
</ul>
</div>
<div class='ui-tile__body'>
<a class='ui-tile__thumbnail' href='http://example.com'>
<img alt='Media-entry-1' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>