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.
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem assumenda, voluptatum quidem cum sit animi at omnis quibusdam maiores magnam distinctio sint corrupti, praesentium architecto repellat mollitia nulla ex blanditiis.
-
Lorem ipsum dolor, sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem assumenda, voluptatum quidem cum sit animi at omnis quibusdam maiores magnam distinctio sint corrupti, praesentium architecto repellat mollitia nulla ex blanditiis.
-
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!
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit
Event
Use the event class to classify the item as an event.
<li class="event">...</li>
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, soluta nesciunt. Perferendis aliquam, ipsum nihil itaque explicabo quo? Placeat, asperiores libero dolor quia quidem accusamus fuga veniam accusantium delectus ratione?
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, soluta nesciunt
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit
-
Lorem ipsum dolor, sit amet
Exhibition
Use the exhibition class to classify the item as an exhibition.
<li class="exhibition">...</li>
-
Wednesday 5:00 pm - 1:00 am
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque obcaecati veritatis maxime animi soluta consequuntur adipisci maiores, deserunt necessitatibus saepe et accusamus repellendus, tempore nam ex atque qui enim ullam.
-
Wednesday 5:00 pm - 1:00 am
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, soluta nesciunt
-
Wednesday 5:00 pm - 1:00 am
Lorem ipsum dolor, sit amet consectetur adipisicing elit
-
Wednesday 5:00 pm - 1:00 am
Lorem ipsum dolor, sit amet
Double Listing
This variation is designed to take up two columns.
<li class="double">...</li>
-
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.
-
Lorem ipsum
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
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>
Use the instagram class.
<li class="instagram">...</li>
Use the twitter class.
<li class="instagram">...</li>
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit, id ullam recusandae neque corporis ipsa excepturi aliquam nam accusamus officia veniam esse repellat sed eveniet perspiciatis qui sunt perferendis error. Cumque accusamus nam quam magnam rem illo odio quidem, enim corrupti optio omnis qui officiis corporis dignissimos debitis consectetur sapiente blanditiis, cupiditate praesentium animi! Est eligendi praesentium labore eum ut? http://t.co/STetvM6GeA w/AProf Tilman Ruff
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque voluptatibus numquam, optio libero ipsam rerum est. Nobis sit laborum laudantium obcaecati, amet omnis! Nulla quo beatae, ad quia exercitationem voluptates. http://t.co/STetvM6GeA w/AProf Tilman Ruff
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! http://t.co/STetvM6GeA w/AProf Tilman Ruff
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa atque tempore velit excepturi veniam ducimus aperiam ipsam totam! http://t.co/STetvM6GeA w/AProf Tilman Ruff
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.
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae repellat rerum quibusdam eveniet voluptatibus quam ex corrupti
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.
-
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.
-
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!
-
Lorem ipsum dolor, sit amet
No link
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.
-
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.
-
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.
-
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.