‹ Combos

8.10

_ui-featured-entries.scss

Featured entries .ui-featured-entries

Modifiers:

  • .small – Small thumbnails variation
  • .active – Large active variation showing actions on thumbnails
  • .small.active – Small active variation showing actions on thumbnails
TODO: Example!!!
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

TODO: Example!!!
<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-1-aba6b25d75efd6708f3851ae08449afd.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-3-a2bb646de9c612b9b3cc88828256544b.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-4-cb3a161ad30ed88ee7749b57a48d5dec.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-group'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-5-643f53ebb33c2a989198970ffe34543e.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-6-7ad988ebe90a3a1427f16399bea74a40.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-8-171a73ac7d26c545480fa481a8fc1fca.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-9-c1772ebd26a157593fd9e14aef830da8.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
.small
TODO: Example!!!
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

TODO: Example!!!
<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-1-aba6b25d75efd6708f3851ae08449afd.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-3-a2bb646de9c612b9b3cc88828256544b.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-4-cb3a161ad30ed88ee7749b57a48d5dec.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-group'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-5-643f53ebb33c2a989198970ffe34543e.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-6-7ad988ebe90a3a1427f16399bea74a40.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-8-171a73ac7d26c545480fa481a8fc1fca.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-9-c1772ebd26a157593fd9e14aef830da8.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
.active
TODO: Example!!!
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

TODO: Example!!!
<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-1-aba6b25d75efd6708f3851ae08449afd.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-3-a2bb646de9c612b9b3cc88828256544b.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-4-cb3a161ad30ed88ee7749b57a48d5dec.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-group'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-5-643f53ebb33c2a989198970ffe34543e.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-6-7ad988ebe90a3a1427f16399bea74a40.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-8-171a73ac7d26c545480fa481a8fc1fca.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-9-c1772ebd26a157593fd9e14aef830da8.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
.small.active
TODO: Example!!!
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

TODO: Example!!!
<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-1-aba6b25d75efd6708f3851ae08449afd.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-3-a2bb646de9c612b9b3cc88828256544b.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-4-cb3a161ad30ed88ee7749b57a48d5dec.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-group'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-5-643f53ebb33c2a989198970ffe34543e.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-6-7ad988ebe90a3a1427f16399bea74a40.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-open'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></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' class='ui-tile__image' src='/assets/styleguide/media-entry-8-171a73ac7d26c545480fa481a8fc1fca.jpeg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</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' class='ui-tile__image' src='/assets/styleguide/media-entry-9-c1772ebd26a157593fd9e14aef830da8.jpg'>
</a>
</div>
<div class='ui-tile__foot'>
<h3 class='ui-tile__title'>Name that can easily go onto 2 lines</h3>
<h4 class='ui-tile__meta'>Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class='ui-tile__flags'>
<i class='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
.vertical.small
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

.vertical.large
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

.horizontal
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

.horizontal.small
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

.horizontal.large
    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-1

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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

    • Media-entry-3

      Name that can easily go onto 2 lines

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