Block Listing

Use this tile-based listing to share news, events and social media posts from Instagram and Twitter.

Inside the basic news, event, and exhibition tiles, images should be provided as background images on an empty element with class block-listing__img , and have a ratio of 16/9 (56.25%). If you don't have a choice but to use img tags, make sure to wrap them inside containers with class crop-height in order to approximate the background-image behaviour.

Visit the Block Listing layout page to see all the available variations together.

News

A listing is a news item by default.

Event

Use the event class to classify the item as an event.

<li class="event">...</li>

Exhibition

Use the exhibition class to classify the item as an exhibition.

<li class="exhibition">...</li>

Double Listing

This variation is designed to take up two columns.

<li class="double">...</li>

News Hero

These variations are designed to take up two columns.

<li class="newshero double">...</li>

Special News Hero

Use the special class to adjust the layout of the News Hero.

<li class="newshero double special">...</li>

Instagram

Use the instagram class.

<li class="instagram">...</li>

Twitter

Use the twitter class.

<li class="instagram">...</li>

More

Use the more class.

<li class="instagram">...</li>

Image

This tile uses an img tag inside a crop-height container instead of a background image. The image appears shorter because it has a wider ratio than 16/9, so this technique should be avoided.

If a tile doesn't have a link (i.e. if block-container is a div rather than an anchor), use class no-anim to remove the hover effect.

  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! Numquam tenetur obcaecati deleniti voluptatum perferendis ducimus assumenda voluptate aliquid veniam aut.

    News

  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! Numquam tenetur obcaecati deleniti voluptatum perferendis ducimus assumenda voluptate aliquid veniam aut.

    News

  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! Numquam tenetur obcaecati deleniti voluptatum perferendis ducimus assumenda voluptate aliquid veniam aut.

    News

  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! Numquam tenetur obcaecati deleniti voluptatum perferendis ducimus assumenda voluptate aliquid veniam aut.

    News

Nested Div