app/views/styleguide/08 Combos/_combos.html
<section class="sg-body">
<section class="sg-example" id="8.1">
<h3>
<a href="#8.1">8.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-toolbar.scss</span>
<h2>Toolbar <code>.ui-toolbar</code></h2>
<p>Toolbar comes in two variations: the one appearing right above the media entry thumbnails (top example) or the one above the vocabulary terms (lower example).</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-container inverted ui-toolbar pvx">
<h2 class="ui-toolbar-header pls">
Sektion enthält 13 Inhalte
</h2>
<div class="ui-toolbar-controls by-right">
<div class="button-group tertiary small right mls" id="ui-resources-layout-switcher">
<a class="button small ui-toolbar-vis-button" data-vis-mode="miniature" title="Miniatur-Ansicht">
<i class="icon-vis-miniature" title="Miniatur-Ansicht"></i>
</a>
<a class="button small ui-toolbar-vis-button active" data-default="" data-vis-mode="grid" title="Raster-Ansicht">
<i class="icon-vis-grid" title="Raster-Ansicht"></i>
</a>
<a class="button small ui-toolbar-vis-button" data-vis-mode="list" title="Listen-Ansicht">
<i class="icon-vis-list" title="Listen-Ansicht"></i>
</a>
</div>
<div class="dropdown ui-dropdown stick-right" id="ui-resources-sorting">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown">
<span class="ui-text">
Sortieren nach Erstelldatum
</span>
</a>
<i class="icon-arrow-down bright small"></i>
<ul aria-labelledby="dLabel" class="dropdown-menu ui-drop-menu" role="menu">
<li class="ui-drop-item active" data-default="">
<a data-sort="created_at">
Sortieren nach Importdatum
</a>
</li>
<li class="ui-drop-item">
<a data-sort="updated_at">
Sortieren nach Änderungsdatum
</a>
</li>
<li class="ui-drop-item">
<a data-sort="title">
Sortieren nach Titel
</a>
</li>
<li class="ui-drop-item">
<a data-sort="author">
Filtern und sortieren nach Autor/in
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-container inverted ui-toolbar pvx">
<h2 class="ui-toolbar-header pls">
Vokabular bezieht sich auf [number] Medieneinträge. Davon sind [number] beschlagwortet.
</h2>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.2">
<h3>
<a href="#8.2">8.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-filterbar.scss</span>
<h2>Filterbar <code>.ui-filterbar</code></h2>
<p>Filterbar comes in two variations: the one appearing right above the media entry thumbnails (top example) or the one above the vocabulary terms (lower example).</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-filterbar separated ui-container">
<div class="left col2of6">
<a class="button" id="ui-side-filter-toggle">
<i class="icon-filter small"></i>
Filtern
</a>
<a class="mlx hidden" id="ui-side-filter-reset">
Filter zurücksetzen
</a>
</div>
<div class="col2of6 by-center">
<div class="button-group" id="ui-resources-type-filter">
<a class="active button">
Alle
</a>
<a class="button" data-type="media_entries">
Medieneinträge
</a>
<a class="button" data-type="media_sets">
Sets
</a>
</div>
</div>
<div class="col2of6 by-right">
<label class="weak ui-filterbar-select" id="ui-clipboard-select-all">
<span class="active">
Alle abwählen
</span>
<span class="inactive">
Alle auswählen
</span>
<i class="icon-checkbox"></i>
</label>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-filterbar separated ui-container">
<div class="by-center">
<div class="button-group" id="ui-resources-type-filter">
<a class="active button">Alle Begriffe</a>
<a class="button" data-type="media_entries">Vergebene</a>
<a class="button" data-type="media_sets">Häufigste</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.3">
<h3>
<a href="#8.3">8.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-header.scss</span>
<h2>Header <code>.ui-header</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<header class="ui-header ui-container inverted">
<div class="ui-header-brand">
<img alt="ZHdK" class="ui-header-logo" src="/assets/inserts/image-logo-zhdk.png">
<h1 class="ui-header-brand-name">Zürcher Hochschule der Künste</h1>
<h2 class="ui-header-instance-name">Medienarchiv der Künste</h2>
</div>
<div class="ui-header-menu">
<ul class="large primary ui-tabs">
<li class="ui-tabs-item active">
<a href="#">Mein Archiv</a>
</li>
<li class="ui-tabs-item">
<a href="#">Erkunden</a>
</li>
<li class="ui-tabs-item">
<a href="#">
<i class="icon-lens bright"></i>
Suchen
</a>
</li>
<li class="ui-tabs-item">
<a href="#">
<i class="icon-nav-help"></i>
</a>
</li>
</ul>
</div>
<div class="ui-header-user">
<div class="dropdown ui-dropdown stick-right">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown" id="user-action-button">
Normin Normalo
<i class="icon-arrow-down stand-alone small"></i>
</a>
<ul aria-labelledby="dLabel" class="dropdown-menu ui-drop-menu" role="menu" style="top: 100%; bottom: auto;">
<li class="ui-drop-item">
<a class="strong" href="">
Dropdown
</a>
</li>
</ul>
</div>
</div>
</header>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.4">
<h3>
<a href="#8.4">8.4</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-footer.scss</span>
<h2>Footer <code>.ui-footer</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<footer class="ui-footer ui-container inverted">
<ul class="ui-footer-menu">
<li>
<a href="http://www.zhdk.ch/?madek">About the project
</a>
</li>
<li>
<a href="http://www.zhdk.ch/index.php?id=12970">Impressum
</a>
</li>
<li>
<a href="http://www.zhdk.ch/index.php?id=49591">Contact
</a>
</li>
<li>
<a href="http://wiki.zhdk.ch/madek-hilfe">Help
</a>
</li>
<li>
<a href="https://wiki.zhdk.ch/madek-hilfe/doku.php?id=terms">Terms of Use
</a>
</li>
<li>
<a href="http://www.zhdk.ch/?archivierung">Archivierungsrichtlinien ZHdK
</a>
</li>
</ul>
<p class="ui-footer-copy">
<a href="http://madek.zhdk.ch"><i class="icon-madek ui-footer-logo"></i>
</a>
Zürcher Hochschule der Künste and contributors
</p>
<p class="ui-footer-version">
Last deployment:
<a class="weak" href="#">Fri, 22 Nov 2013</a>
</p>
</footer>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.5">
<h3>
<a href="#8.5">8.5</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-summary-table.scss</span>
<h2>Metadata summary <code>.ui-summary-table</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-metadata-box ui-summary-table">
<table class="borderless">
<tbody>
<tr>
<td class="ui-summary-label">Titel</td>
<td class="ui-summary-content title-l">Black hot drink</td>
</tr>
<tr>
<td class="ui-summary-label">Beschreibung</td>
<td class="ui-summary-content">Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können.</td>
</tr>
<tr>
<td class="ui-summary-label">Autor/in</td>
<td class="ui-summary-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-summary-label">Eigentumer/in</td>
<td class="ui-summary-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-summary-label">Schlagworte</td>
<td class="ui-summary-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.6">
<h3>
<a href="#8.6">8.6</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-clipboard.scss</span>
<h2>Clipboard <code>.ui-clipboard</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="padding-top: 50px;margin: 0 auto">
<div class="ui-clipboard">
<a class="block ui-clipboard-toggle inverted-transparent" id="clipboard-toggle">Zwischenablage <span class="ui-clipboard-counter hidden" style="display: inline;">1</span></a>
<div class="ui-container inverted-transparent ui-clipboard-content" style="display: block;">
<div class="col5of6">
<ul class="ui-resources miniature ui-clipboard-resources-list hidden" style="display: block;">
<li class="ui-resource" data-id="71" title="">
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry doc">
<a class="ui-thumbnail-image-wrapper" href="#"></a>
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img class="ui-thumbnail-image" src="/media_resources/71/image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui-resource-clipboard-remove" title="Aus der Zwischenablage entfernen">
<div class="icon-remove bright"></div>
</div>
</li>
</ul>
<p class="ui-clipboard-alert ui-clipboard-empty-alert" style="display: none;">
<span class="text title-l">Keine Inhalte ausgewählt</span>
</p>
<p class="ui-clipboard-alert ui-clipboard-size-alert title-l hidden" style="display: none;">
Mehr als 99 Elemente ausgewählt
</p>
</div>
<div class="col1of6">
<div class="ui-clipboard-actions">
<div class="ui-dropup dropup stick-right">
<a class="primary-button block dropdown-toggle ui-drop-toggle" data-toggle="dropdown">Aktionen</a>
<ul aria-labelledby="dLabel" class="dropdown-menu ui-drop-menu" role="menu">
<li class="ui-drop-item">
<a>Zu Set hinzufügen/entfernen</a>
</li>
<li class="ui-drop-item">
<a>Zugriffsberechtigungen anzeigen</a>
</li>
<li class="ui-drop-item ui-clipboard-manage-button" style="">
<a><span class="ui-count">37</span> Zugriffsberechtigungen editieren</a>
</li>
<li class="ui-drop-item ui-clipboard-edit-button" style="">
<a><span class="ui-count">36</span> MetaDaten von Medieneinträgen bearbeiten</a>
</li>
</ul>
</div><a class="tertiary-button small block ui-clipboard-clear">Zwischenablage Leeren</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.8.1">
<h3>
<a href="#8.8.1">8.8.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-media-overview.scss</span>
<h2>Media overview <code>.ui-media-overview</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-media-overview">
<dl class="ui-media-overview-metadata ui-metadata-box">
<dt class="media-data-title title-xs-alt">Titel</dt>
<dd class="media-data-content title-l">Die Eismalerin</dd>
<dt class="media-data-title title-xs-alt">Untertitel</dt>
<dd class="media-data-content">Installationsansicht</dd>
<dt class="media-data-title title-xs-alt">Autor/in</dt>
<dd class="media-data-content">
<a href="#">Stemmle, Janka</a>
</dd>
<dt class="media-data-title title-xs-alt">Datierrung</dt>
<dd class="media-data-content">2012</dd>
<dt class="media-data-title title-xs-alt">Schlagworte zu Inhalt und Motiv</dt>
<dd class="media-data-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 1</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 2</a>
</li>
</ul>
</dd>
<dt class="media-data-title title-xs-alt">Rechte am geistigen Eigentum</dt>
<dd class="media-data-content">ZHdK DKM VMK</dd>
<dt class="media-data-title title-xs-alt">Privacy</dt>
<dd class="media-data-content">
This entry is public
<i class="icon-privacy-public"></i>
</dd>
<dt class="media-data-title title-xs-alt">Eigentumer/in im Medienarchiv</dt>
<dd class="media-data-content">
<a href="#">Rüegger, Romy</a>
</dd>
</dl>
<div class="ui-media-overview-preview">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.8.2">
<h3>
<a href="#8.8.2">8.8.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-set-overview.scss</span>
<h2>Set overview combo <code>.ui-set-overview</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-set-overview">
<div class="ui-set-preview">
<div class="ui-thumbnail filter-set">
<div class="ui-thumbnail-level-up-items">
<span class="ui-thumbnail-level-notes">Keine übergeordneten Sets</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action">
<a class="ui-thumbnail-action-checkbox">Select</a>
</li>
<li class="ui-thumbnail-action">
<a class="ui-thumbnail-action-favorite">Favorite</a>
</li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action">
<a class="ui-thumbnail-action-browse">Browse</a>
</li>
<li class="ui-thumbnail-action">
<a class="ui-thumbnail-action-edit">Edit</a>
</li>
<li class="ui-thumbnail-action">
<a class="ui-thumbnail-action-delete">Delete</a>
</li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul aria-labelledby="dLabel" class="dropdown-menu ui-drop-menu" role="menu">
<li class="ui-drop-item">
<a href="#">Item 1</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 2</a>
</li>
<li class="separator"></li>
<li class="ui-drop-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a class="ui-level-image-wrapper" href="#" title="Set name">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a class="ui-level-image-wrapper" href="#" title="Set name">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-metadata-box ui-summary-table ui-set-summary">
<table class="borderless">
<tbody>
<tr>
<td class="ui-summary-label">Titel</td>
<td class="ui-summary-content title-l">Black hot drink</td>
</tr>
<tr>
<td class="ui-summary-label">Beschreibung</td>
<td class="ui-summary-content">Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können. Die Medieneinträge in diesem Set dienen als Beispiele, wie die Metadatenfelder zur Verschlagwortung genutzt werden können.</td>
</tr>
<tr>
<td class="ui-summary-label">Autor/in</td>
<td class="ui-summary-content">
<a href="#">Federico C.</a>
</td>
</tr>
<tr>
<td class="ui-summary-label">Eigentumer/in</td>
<td class="ui-summary-content">
<a href="#">Federico C.</a>
</td>
</tr>
<tr>
<td class="ui-summary-label">Schlagworte</td>
<td class="ui-summary-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 1</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 2</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.8.1">
<h3>
<a href="#8.8.1">8.8.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-collage.scss</span>
<h2>Straight Collage <code>.ui-collage</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-collage" id="teaser-set">
<div class="ui-collage-row">
<a class="ui-collage-item" href="/media_resources/16">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Präsentation</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/6">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-3.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Mein Erstes Photo (mit der neuen Nikon)</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/16">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Präsentation</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/6">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Mein Erstes Photo (mit der neuen Nikon)</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/16">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-8.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Präsentation</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
</div>
<div class="ui-collage-row">
<a class="ui-collage-item" href="/media_resources/6">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Mein Erstes Photo (mit der neuen Nikon)</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/16">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-8.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Präsentation</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/6">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Mein Erstes Photo (mit der neuen Nikon)</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/16">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Präsentation</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
<a class="ui-collage-item" href="/media_resources/6">
<div class="ui-collage-item-wrapper">
<div class="ui-collage-item-table">
<div class="ui-collage-item-cell">
<div class="ui-collage-item-inner">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
<div class="ui-collage-item-meta">
<h3 class="title-xs">Mein Erstes Photo (mit der neuen Nikon)</h3>
<h4 class="title-xs-alt"></h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.8.2">
<h3>
<a href="#8.8.2">8.8.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-collage.scss</span>
<h2>Crooked Collage <code>.ui-collage.crooked</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-collage crooked">
<div class="ui-collage-row">
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-5" class="ui-collage-item-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-7" class="ui-collage-item-image" src="/assets/styleguide/media-entry-8.jpeg">
</div>
</div>
</div>
<div class="ui-collage-row">
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-1" class="ui-collage-item-image" src="/assets/styleguide/media-entry-1.jpg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-2" class="ui-collage-item-image" src="/assets/styleguide/media-entry-2.jpg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-3" class="ui-collage-item-image" src="/assets/styleguide/media-entry-3.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
<div class="ui-collage-row">
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-7" class="ui-collage-item-image" src="/assets/styleguide/media-entry-8.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-6" class="ui-collage-item-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-7" class="ui-collage-item-image" src="/assets/styleguide/media-entry-8.jpeg">
</div>
</div>
</div>
<div class="ui-collage-row">
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-1" class="ui-collage-item-image" src="/assets/styleguide/media-entry-1.jpg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-3" class="ui-collage-item-image" src="/assets/styleguide/media-entry-3.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
<div class="ui-collage-item even">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-3" class="ui-collage-item-image" src="/assets/styleguide/media-entry-3.jpeg">
</div>
</div>
<div class="ui-collage-item odd">
<div class="ui-collage-item-wrapper">
<img alt="Media-entry-4" class="ui-collage-item-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.9.1">
<h3>
<a href="#8.9.1">8.9.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-resources-grid.scss</span>
<h2>Media Resources Grid Mode <code>.ui-resources.grid</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.active</strong>
-
To be interacted with
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="padding-top: 150px;margin: 0 auto;padding-bottom: 80px">
<ul class="ui-resources grid">
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail filter-set image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail filter-set image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="padding-top: 150px;margin: 0 auto;padding-bottom: 80px">
<ul class="ui-resources grid active">
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail filter-set image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail filter-set image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.9.2">
<h3>
<a href="#8.9.2">8.9.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-resources-miniature.scss</span>
<h2>Media Resources Miniature Mode <code>.ui-resources.miniature</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.active</strong>
-
To be interacted with
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="padding-top: 50px;margin: 0 auto;padding-bottom: 50px">
<ul class="ui-resources miniature $modifier-class">
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="padding-top: 50px;margin: 0 auto;padding-bottom: 50px">
<ul class="ui-resources miniature active">
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-10" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-10.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<div class="ui-resource-actions">
<ul class="ui-resource-actions-list">
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-resource-action"><a href="#" class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
</div>
<h3 class="ui-resource-title">Resource Title</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-11" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-11.jpg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.9.3">
<h3>
<a href="#8.9.3">8.9.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-resources-list.scss</span>
<h2>Media Resources List Mode <code>.ui-resources.list</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.active</strong>
-
To be interacted with
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<ul class="ui-resources list $modifier-class">
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="">
<ul class="ui-resources list active">
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-group" title="This media is shared with a group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-6.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-private" title="This media is private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-resource-head">
<ul class="ui-resource-actions">
<li class="ui-resource-action">
<a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-resource-action">
<a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<h3 class="ui-resource-title">FilterSet including all public accessible resources</h3>
</div>
<div class="ui-resource-body">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry image">
<div class="ui-thumbnail-privacy">
<i class="icon-privacy-open" title="This media is Public"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-5" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-5.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle ui-drop-toggle button block" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-resource-meta">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-description">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
<div class="ui-resource-extension">
<table class="borderless block">
<tbody>
<tr>
<td class="ui-resource-meta-label">Autor/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Datierung</td>
<td class="ui-resource-meta-content">1470/1500</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Schlagworte</td>
<td class="ui-resource-meta-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 1</a></li>
<li class="ui-tag-cloud-item"><a href="#" class="ui-tag-button">Tag 2</a></li>
</ul>
</td>
</tr>
<tr>
<td class="ui-resource-meta-label">Eigentumer/in</td>
<td class="ui-resource-meta-content"><a href="#">Federico C.</a></td>
</tr>
<tr>
<td class="ui-resource-meta-label">Rechte</td>
<td class="ui-resource-meta-content">unbekannt</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.9.4">
<h3>
<a href="#8.9.4">8.9.4</a>
</h3>
<div class="sg-description">
<h2>Media Resources Tiles Mode</h2>
<p>Tile View comes in size (small, normal, large) and orientation variations (horizontal, vertical). Vertical variation is to replace legacy featured-items styles displaying items highlighted by user within a set.</p>
<ul class="sg-modifiers">
<li>
<strong>.active</strong>
-
To be interacted with
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical</span>
<div style="">
<ul class="ui-resources tiles vertical">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical.small</span>
<div style="">
<ul class="ui-resources tiles vertical small">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical.large</span>
<div style="">
<ul class="ui-resources tiles vertical large">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal</span>
<div style="">
<ul class="ui-resources tiles horizontal">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal.small</span>
<div style="">
<ul class="ui-resources tiles horizontal small">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal.large</span>
<div style="">
<ul class="ui-resources tiles horizontal large">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<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-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<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-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.10">
<h3>
<a href="#8.10">8.10</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-featured-entries.scss</span>
<h2>Featured entries <code>.ui-featured-entries</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.small</strong>
-
Small thumbnails variation
</li>
<li>
<strong>.active</strong>
-
Large active variation showing actions on thumbnails
</li>
<li>
<strong>.small.active</strong>
-
Small active variation showing actions on thumbnails
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical</span>
<div style="">
<ul class="ui-resources tiles vertical">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical.small</span>
<div style="">
<ul class="ui-resources tiles vertical small">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.vertical.large</span>
<div style="">
<ul class="ui-resources tiles vertical large">
<li class="ui-resources-page">
<ul class="ui-resources-page-items vertical">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal</span>
<div style="">
<ul class="ui-resources tiles horizontal">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal.small</span>
<div style="">
<ul class="ui-resources tiles horizontal small">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.horizontal.large</span>
<div style="">
<ul class="ui-resources tiles horizontal large">
<li class="ui-resources-page">
<ul class="ui-resources-page-items">
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-1.jpg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-3.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-4.jpeg" class="ui-tile__image">
</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="icon-privacy-group ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-5.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-6.jpeg" class="ui-tile__image">
</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="icon-privacy-open ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-8.jpeg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
<li class="ui-resource">
<div class="ui-tile">
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-3" src="/assets/styleguide/media-entry-9.jpg" class="ui-tile__image">
</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="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.11">
<h3>
<a href="#8.11">8.11</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-home-claim.scss</span>
<h2>Elevator Pitch <code>.ui-home-claim</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-home-claim ui-container">
<div class="col2of3">
<div class="pitch-claim">
<h1 class="title-xxl">
Bilder, Videos, Audio-Dateien und Dokumente
</h1>
<h2 class="title-l">
<!-- / TODO INTERNATIONALIZE -->
Diese Plattform dient dem gemeinschaftlichen Arbeiten mit Medien und dem Teilen von Inhalten.
</h2>
</div>
</div>
<div class="col1of3">
<div class="pitch-login">
<ul class="ui-tabs ui-container">
<li class="active left ui-tabs-item">
<a data-toggle="tab" href="#zhdk-user" id="zhdk-user-login-tab">
ZHdK-Login
</a>
</li>
<li class="right ui-tabs-item">
<a data-toggle="tab" href="#database-user" id="database-user-login-tab">
Externe
</a>
</li>
</ul>
<div class="pitch-login-tab tab-content">
<div class="active tab-pane" id="zhdk-user">
<form>
<div class="form-body">
<div class="ui-form-group rowed">
<p class="mbm">Alle Funktionen nutzen und auf <br> mehr Inhalte zugreifen.</p>
<a class="primary-button block large" href="/login" id="internal-login-link">
Anmelden
</a>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="database-user">
<form action="db/login" method="post">
<div class="form-body">
<div class="ui-form-group rowed compact">
<input autofocus="false" class="block large" name="login" placeholder="Benutzername" type="text">
</div>
<div class="ui-form-group rowed compact">
<input class="block large" name="password" placeholder="Passwort" type="password">
</div>
<div class="ui-form-group rowed compact">
<button class="primary-button block large" type="submit">
Anmelden
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.12">
<h3>
<a href="#8.12">8.12</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-rights-management.scss</span>
<h2>Rights management table <code>.ui-rights-management</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-rights-management">
<h3 class="title-l mbs">Ich</h3>
<div class="ui-rights-body">
<table class="ui-rights-group bordered block">
<thead>
<tr>
<td class="ui-rights-user-title">User</td>
<td class="ui-rights-owner-title">Eigentümer/in</td>
<td class="ui-rights-role-title">Berechtigung</td>
<td class="ui-rights-check-title">Betrachten</td>
<td class="ui-rights-check-title">Download Original</td>
<td class="ui-rights-check-title">Editieren</td>
<td class="ui-rights-check-title">Berechtigung verwalten</td>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-rights-user">Interactive Things</td>
<td class="ui-rights-owner"><input type="radio" disabled="disabled" checked="checked"></td>
<td class="ui-rights-role">Eigentumer/in</td>
<td class="ui-rights-check"><input type="checkbox" checked="checked" disabled="disabled"></td>
<td class="ui-rights-check"><input type="checkbox" checked="checked" disabled="disabled"></td>
<td class="ui-rights-check"><input type="checkbox" checked="checked" disabled="disabled"></td>
<td class="ui-rights-check"><input type="checkbox" checked="checked" disabled="disabled"></td>
</tr>
</tbody>
</table>
</div>
<div class="ui-rights-body">
<table class="ui-rights-group bordered">
<caption>Gruppen <i class="icon-privacy-group"></i></caption>
<tbody>
<tr>
<td class="ui-rights-user">Interactive Things</td>
<td class="ui-rights-owner"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
<tr>
<td class="ui-rights-user">Interactive Things 2</td>
<td class="ui-rights-owner"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
</tbody>
</table>
<a href="#" class="button small"><i class="icon-plus"></i> Gruppe hinzufugen</a>
</div>
<h3 class="title-l mbs">Andere</h3>
<div class="ui-rights-body">
<table class="ui-rights-group bordered">
<caption>Personen <i class="icon-privacy-private-alt"></i></caption>
<tbody>
<tr>
<td class="ui-rights-user"><a href="#" class="button small ui-rights-remove" title="Remove">×</a> Interactive Things</td>
<td class="ui-rights-owner"><input type="radio"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
<tr>
<td class="ui-rights-user"><a href="#" class="button small ui-rights-remove" title="Remove">×</a> Interactive Things 2</td>
<td class="ui-rights-owner"><input type="radio"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
</tbody>
</table>
<a href="#" class="button small"><i class="icon-plus"></i> Person hinzufugen</a>
</div>
<div class="ui-rights-body">
<table class="ui-rights-group bordered">
<caption>Gruppen <i class="icon-privacy-group-alt"></i></caption>
<tbody>
<tr>
<td class="ui-rights-user">Interactive Things</td>
<td class="ui-rights-owner"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
<tr>
<td class="ui-rights-user">Interactive Things 2</td>
<td class="ui-rights-owner"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
</tbody>
</table>
<a href="#" class="button small"><i class="icon-plus"></i> Gruppe hinzufugen</a>
</div>
<div class="ui-rights-body">
<table class="ui-rights-group bordered">
<caption>Öffentlichkeit <i class="icon-privacy-open"></i></caption>
<tbody>
<tr>
<td class="ui-rights-user">Öffentlichkeit</td>
<td class="ui-rights-owner"></td>
<td class="ui-rights-role">
<select class="ui-rights-role-select">
<option>Bevollmachtigte/r</option>
<option>Betrachter/in</option>
<option>Betrachter/in & Original</option>
<option>Gesperrt</option>
<option>Redakteur/in</option>
</select>
</td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
<td class="ui-rights-check"><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.14">
<h3>
<a href="#8.14">8.14</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-workgroups.scss</span>
<h2>Workgroups tables <code>.ui-workgroups</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<table class="ui-workgroups bordered block">
<tbody>
<tr data-id="4">
<td class="ui-workgroup-name">Diplomarbeitsgruppe</td>
<td class="ui-workgroup-items"><a href="/media_resources?permissions%5Bgroup%5D%5Bids%5D%5B%5D=4" title="Inhalte dieser Gruppe anzeigen">2 Inhalte</a></td>
<td class="ui-workgroup-actions"><a class="button delete-workgroup"><i class="icon-trash dark"></i></a> <a class="button edit-workgroup"><i class="icon-pen dark"></i></a></td>
</tr>
<tr data-id="3">
<td class="ui-workgroup-name">ZHdK</td>
<td class="ui-workgroup-items"><a href="/media_resources?permissions%5Bgroup%5D%5Bids%5D%5B%5D=3" title="Inhalte dieser Gruppe anzeigen">3 Inhalte</a></td>
<td class="ui-workgroup-actions"><a class="button delete-workgroup"><i class="icon-trash dark"></i></a> <a class="button edit-workgroup"><i class="icon-pen dark"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.15">
<h3>
<a href="#8.15">8.15</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-confirmation-dialog.scss</span>
<h2>Confirmation dialog</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="modal hide fade ui-modal narrow in ui-shown" style=
"display: block;" tabindex="-1">
<form>
<div class="ui-modal-head">
<a class="ui-modal-close" data-dismiss="modal" title="Close"
type="button"></a>
<h3 class="title-l">Confirmation Modal</h3>
</div>
<div class="ui-modal-body" style="max-height: 886.21875px;">
<p class="phl pvm by-center">Are you sure?</p>
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak" data-dismiss="modal">No</a>
<button class="primary-button" type="submit">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.16">
<h3>
<a href="#8.16">8.16</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-resources-table.scss</span>
<h2>Media resources table <code>.ui-resources-table</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-resources-table">
<table class="block">
<thead>
<tr>
<td>Auswahl</td>
<td>Title</td>
<td>Autor/in</td>
<td>Datierung</td>
<td>Schlagw...nd Motiv</td>
<td>Rechte</td>
<td>Eigentü...enarchiv</td>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-resources-table-selection"><label><input type="checkbox"><img alt="ZHdK" class="ui-thumbnail micro" src="/assets/styleguide/media-entry-1.jpg"></label></td>
<td>File Title</td>
<td>Pinco Pallino</td>
<td>20.02.2010</td>
<td><ul class="inline"><li>tag 1</li><li>tag 2</li></ul></td>
<td>ZHdK</td>
<td>Pinco Pallino</td>
</tr>
<tr>
<td class="ui-resources-table-selection"><label><input type="checkbox"><img alt="ZHdK" class="ui-thumbnail micro" src="/assets/styleguide/media-entry-2.jpg"></label></td>
<td>File Title</td>
<td>Pinco Pallino</td>
<td>20.02.2010</td>
<td><ul class="inline"><li>tag 1</li><li>tag 2</li></ul></td>
<td>ZHdK</td>
<td>Pinco Pallino</td>
</tr>
<tr>
<td class="ui-resources-table-selection"><label><input type="checkbox"><img alt="ZHdK" class="ui-thumbnail micro" src="/assets/styleguide/media-entry-3.jpeg"></label></td>
<td>File Title</td>
<td>Pinco Pallino</td>
<td>20.02.2010</td>
<td><ul class="inline"><li>tag 1</li><li>tag 2</li></ul></td>
<td>ZHdK</td>
<td>Pinco Pallino</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.17">
<h3>
<a href="#8.17">8.17</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-side-filter.sass</span>
<h2>Side filter <code>.ui-side-filter</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="filter-panel ui-side-filter" id="ui-side-filter">
<div class="ui-side-filter-search filter-search" id="ui-side-filter-search">
<form id="filter_search_form">
<input class="unstyled" type="submit" value="Eingrenzen mit Suchwort">
<input class="block ui-filter-search-input" id="search_term" name="search" type="text">
</form>
</div>
<ul class="top-filter-list ui-side-filter-list"><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="media_resources" data-filter-type="media_resources"> <a class="strong ui-accordion-toggle"> Inhalte <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="type"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Typ </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="MediaEntry"> <a class="weak"> Medieneinträge <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="media_files" data-filter-type="media_files"> <a class="strong ui-accordion-toggle"> Datei <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="media_type"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Medientyp </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="image"> <a class="weak"> image <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> </li> <li class="ui-side-filter-lvl2-item" data-key-name="extension"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Dokumenttyp </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="tif"> <a class="weak"> tif <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="permissions" data-filter-type="permissions"> <a class="strong ui-accordion-toggle"> Berechtigung <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="owner"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Verantwortliche Person </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="7"> <a class="weak"> Knacknuss, Karen <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> </li> <li class="ui-side-filter-lvl2-item" data-key-name="scope"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Zugriff </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="public"> <a class="weak"> Öffentliche Inhalte <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="Landschaftsvisualisierung" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle"> Landschaftsvisualisierung <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Landschaftstyp"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Landschaftstyp </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1065"> <a class="weak"> Erholungszone <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1087"> <a class="weak"> Naturlandschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1089"> <a class="weak"> Parklandschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1093"> <a class="weak"> Stadtlandschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1095"> <a class="weak"> Tourismusgebiet <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Verwendungszweck"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Verwendungszweck </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1067"> <a class="weak"> Architekturbild <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1017"> <a class="weak"> Ausstellung <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1071"> <a class="weak"> Computerspiel <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1069"> <a class="weak"> Illustration <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="79"> <a class="weak"> Kunst <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1115"> <a class="weak"> Wettbewerb <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Bildzeit"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Bildzeit </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1033"> <a class="weak"> Frühling <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1037"> <a class="weak"> Herbst <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1047"> <a class="weak"> Mittag <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1053"> <a class="weak"> Nacht <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1035"> <a class="weak"> Sommer <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1039"> <a class="weak"> Winter <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Wetter/Klima"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Wetter/Klima </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1119"> <a class="weak"> Bewölkung/wolkig <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1125"> <a class="weak"> Morgenrot <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1127"> <a class="weak"> Nebel <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1131"> <a class="weak"> Schnee <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1139"> <a class="weak"> Wind <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Farbe"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Farbe </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1241"> <a class="weak"> Blautöne <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1231"> <a class="weak"> Gelb <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1267"> <a class="weak"> Gelbtöne <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1255"> <a class="weak"> Grüntöne <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1245"> <a class="weak"> Oker <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1213"> <a class="weak"> hellblau <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1211"> <a class="weak"> weiss <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Horizontlinie"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Horizontlinie </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1061"> <a class="weak"> unten <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Ra?umliche Wahrnehmung"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Räumliche Wahrnehmung </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1103"> <a class="weak"> Froschperspektive <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1109"> <a class="weak"> Texturgradient <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1099"> <a class="weak"> Vogelperspektive <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1101"> <a class="weak"> Zentralperspektive <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Abstraktionsgrad"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Abstraktionsgrad </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1021"> <a class="weak"> abstrakt <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Landschaftselemente"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Landschaftselemente </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="431"> <a class="weak"> Blumen <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="443"> <a class="weak"> Bucht <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="435"> <a class="weak"> Wolken <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="LV_Bildwirkung"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Bildwirkung </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1253"> <a class="weak"> Einsamkeit <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1251"> <a class="weak"> Erhabenheit <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1425"> <a class="weak"> clean <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1401"> <a class="weak"> dramatisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1403"> <a class="weak"> düster <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1313"> <a class="weak"> fantastisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1165"> <a class="weak"> friedlich <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1161"> <a class="weak"> idyllisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1205"> <a class="weak"> kühl <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1399"> <a class="weak"> künstlich <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1209"> <a class="weak"> modern <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1361"> <a class="weak"> naturnah <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1335"> <a class="weak"> ruhig <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1287"> <a class="weak"> technisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1371"> <a class="weak"> technologisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1289"> <a class="weak"> unfreundlich <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1311"> <a class="weak"> utopisch <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1393"> <a class="weak"> verspielt <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="genre"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Genre </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="447"> <a class="weak"> Landschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="style"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Stil- und Kunstrichtungen </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1995"> <a class="weak"> Futurismus <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="655"> <a class="weak"> Konzeptkunst <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1839"> <a class="weak"> Subjektive Fotografie <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="epoch"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Epoche </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="667"> <a class="weak"> 20. Jahrhundert <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item has-active" data-context-id="media_content" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle open"> Werk <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body open"> <li class="ui-side-filter-lvl2-item has-active" data-key-name="keywords"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Schlagworte zu Inhalt und Motiv </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="405"> <a class="weak"> Diplomarbeit <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="76"> <a class="weak"> Fotografie <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="4608"> <a class="weak"> Freizeit <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="2665"> <a class="weak"> Inszenierung <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="447"> <a class="weak"> Landschaft <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="4607"> <a class="weak"> Mode <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1353"> <a class="weak"> Natur <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="4606"> <a class="weak"> Outdoor <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="4604"> <a class="weak"> Sport <span class="ui-lvl3-item-count resources_count">11</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="4605"> <a class="weak"> Sportbekleidung <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox" checked="checked"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item has-active" data-key-name="type"> <a class="ui-accordion-toggle weak open"> <i class="ui-side-filter-lvl2-marker"></i> Gattung </a> <ul class="ui-side-filter-lvl3 ui-accordion-body open"> <li class="ui-side-filter-lvl3-item resources_filter active" data-value="76"> <a class="weak"> Fotografie <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="media_object" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle"> Medium <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="portrayed object materials"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Material/Format </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="2197"> <a class="weak"> Original: Kleinbilddia Farbe; Digitalisat: TIFF <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="Columns" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle"> Säulenordnungen <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="genre"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Genre </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="447"> <a class="weak"> Landschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="style"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Stil- und Kunstrichtungen </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1995"> <a class="weak"> Futurismus <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="655"> <a class="weak"> Konzeptkunst <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1839"> <a class="weak"> Subjektive Fotografie <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="epoch"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Epoche </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="667"> <a class="weak"> 20. Jahrhundert <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="zhdk_bereich" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle"> ZHdK <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="project type"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> ZHdK-Projekttyp </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="85"> <a class="weak"> Abschlussarbeit <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="academic year"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Studienabschnitt </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="341"> <a class="weak"> Hauptstudium Diplom <span class="ui-lvl3-item-count resources_count">11</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li><li class="ui-side-filter-lvl1-item ui-side-filter-item" data-context-id="VFO" data-filter-type="meta_data"> <a class="strong ui-accordion-toggle"> Lehrmittel Fotografie <i class="ui-side-filter-lvl1-marker"></i> </a> <ul class="ui-side-filter-lvl2 ui-accordion-body"> <li class="ui-side-filter-lvl2-item" data-key-name="genre"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Genre </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="447"> <a class="weak"> Landschaft <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="style"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Stil- und Kunstrichtungen </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="1995"> <a class="weak"> Futurismus <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="655"> <a class="weak"> Konzeptkunst <span class="ui-lvl3-item-count resources_count">1</span> </a> </li><li class="ui-side-filter-lvl3-item resources_filter " data-value="1839"> <a class="weak"> Subjektive Fotografie <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> <li class="ui-side-filter-lvl2-item" data-key-name="epoch"> <a class="ui-accordion-toggle weak"> <i class="ui-side-filter-lvl2-marker"></i> Epoche </a> <ul class="ui-side-filter-lvl3 ui-accordion-body"> <li class="ui-side-filter-lvl3-item resources_filter " data-value="667"> <a class="weak"> 20. Jahrhundert <span class="ui-lvl3-item-count resources_count">1</span> </a> </li> </ul> <label class="ui-any-value" title="Jegliche Werte"> <input class="any-value hidden" type="checkbox"> <i class="icon-checkbox"></i> </label> </li> </ul> </li></ul>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.18">
<h3>
<a href="#8.18">8.18</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-search-form.scss</span>
<h2>Search Form <code>.ui-search-form</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-search-form">
<form accept-charset="UTF-8" action="/search" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="J2zGT/GbRydo5RJ9ogojTO79rSF5U+wWOPTfufkMmcU=">
</div>
<div class="ui-search large mts">
<input class="block ui-search-input" id="search" name="search" placeholder="z.B. Bild-Text" type="text">
<button class="primary-button ui-search-button" type="submit">Suche</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.19">
<h3>
<a href="#8.19">8.19</a>
</h3>
<div class="sg-description">
<h2>Terms cloud</h2>
<p>Term clouds are used on the Vocabulary pages to display list of terms that a particular vocabulary contains.</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-metadata-box prl mbm">
<div class="h3 title-s-alt light mbx">Farbe <span class="title-xs-alt mlx">(categorical)</span></div>
<ul class="ui-tag-cloud small ellipsed compact">
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Oker">
Oker
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Grüntöne">
Grüntöne
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Gelbtöne">
Gelbtöne
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="hellblau">
hellblau
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="weiss">
weiss
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-metadata-box prl mbm">
<div class="h3 title-s-alt light mbx">Days <span class="title-xs-alt mlx">(alphabetical)</span></div>
<ul class="ui-tag-cloud small ellipsed compact">
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Monday">
Monday
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Saturday">
Saturday
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Sunday">
Sunday
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Thursday">
Thursday
</a>
</li>
<li class="ui-tag-cloud-item">
<a class="ui-tag-button meta-term" title="Wednesday">
Wednesday
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="8.20">
<h3>
<a href="#8.20">8.20</a>
</h3>
<div class="sg-description">
<h2>Terms filter</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-terms-filter separated mhm">
<div class="ui-terms-filter-label-holder left by-center">
<span class="title-s">Häufigkeit auswerten <span class="ui-form-ui-ttip-toggle ui-ttip-toggle" data-original-title="Tooltip Content." data-placement="bottom" rel="tooltip"><i class="icon-question mid"></i></span></span>
</div>
<div class="ui-terms-filter-slider-holder ptx">
<div class="ui-slider">
<a class="ui-slider-handle"><span class="ui-slider-info ui-container inverted">min. 2 x vergeben</span></a>
</div>
</div>
<div class="ui-terms-filter-note-holder by-center right">
Max. 140
</div>
</div>
</div>
</div>
</div>
</section>
</section>