Listings

Simple listing

Three variants are available to control the layout: simple-listing--four, simple-listing--three, simple-listing--two. You must always specify a variant.
Provide images via inline styles with background-image: url(...);. The ideal dimensions depend on the variant used (cf. examples below). All images should have a ratio of 16/10 (62.5%) or they will be cropped.
The heading elements inside the items can be marked with h2, h3 or h4 depending on the context in which the listing is used. The examples below demonstrate all three cases for testing purposes. If adapting the heading level to the context is too complex, a good default is generally h3.

<ul>
  <li>Three variants are available to control the layout: <code>simple-listing--four</code>, <code>simple-listing--three</code>, <code>simple-listing--two</code>. <strong>You must always specify a variant</strong>.
  </li>
  <li>Provide images via inline styles with <code>background-image: url(...);</code>. The ideal dimensions depend on the variant used (cf. examples below). All images should have a ratio of 16/10 (62.5%) or they will be cropped.
  </li>
  <li>The heading elements inside the items can be marked with <code>h2</code>, <code>h3</code> or <code>h4</code> depending on the context in which the listing is used. The examples below demonstrate all three cases for testing purposes. If adapting the heading level to the context is too complex, a good default is generally <code>h3</code>.
  </li>
</ul>
<ul class="simple-listing simple-listing--four">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/animals);"></div>
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/arch);"></div>
      <h3 class="simple-listing__heading">
        Consectetur adipisicing elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/nature);"></div>
      <h3 class="simple-listing__heading">
        Pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/people);"></div>
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/696/people);"></div>
      <h3 class="simple-listing__heading">
        Portrait image
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/any/sepia);"></div>
      <h2 class="simple-listing__heading">
        Level-2 heading
      </h2>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/any/grayscale);"></div>
      <h4 class="simple-listing__heading">
        Level-4 heading
      </h4>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/435/272/tech);"></div>
      <h3 class="simple-listing__heading">
        Heading that is very, very long and takes at least two lines
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing sit amet.
      </p>
    </a>
  </li>
</ul>
<ul class="simple-listing simple-listing--three">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/736/460/animals);"></div>
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/736/460/arch);"></div>
      <h3 class="simple-listing__heading">
        Consectetur adipisicing elit cras pretium et pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet deleniti dicta dignissimos.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/736/460/nature);"></div>
      <h3 class="simple-listing__heading">
        Pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
</ul>
<ul class="simple-listing simple-listing--two">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/736/460/any/sepia);"></div>
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <div class="simple-listing__img" style="background-image: url(http://placeimg.com/736/460/any/grayscale);"></div>
      <h3 class="simple-listing__heading">
        Consectetur adipisicing elit cras
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
</ul>

Simple text listing

Simple listings can be turned into text-only listings with class simple-listing--text. A fourth layout variant, simple-listing--one, can then be used to display the items in a single column (and with a larger font size for the excerpts). Note that text-only listings with 2 and 3 columns are narrower than their image counterparts.

<p>Simple listings can be turned into <strong>text-only listings</strong> with class <code>simple-listing--text</code>. A fourth layout variant, <code>simple-listing--one</code>, can then be used to display the items in a single column (and with a larger font size for the excerpts). Note that text-only listings with 2 and 3 columns are narrower than their image counterparts.
</p>
<ul class="simple-listing simple-listing--text simple-listing--four">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Consectetur adipisicing elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Optio cupiditate quis, neque, itaque est quae! Ipsam quas dolor modi vero placeat accusantium distinctio rem iusto reprehenderit. Deleniti dicta dignissimos saepe dolore.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloribus commodi incidunt voluptatem nihil dignissimos eos ullam modi assumenda!
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h2 class="simple-listing__heading">
        Level-2 heading
      </h2>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nam, id corporis itaque possimus quod libero quibusdam, voluptate suscipit, architecto veritatis. Sed, maxime.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h4 class="simple-listing__heading">
        Level-4 heading
      </h4>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos. Optio cupiditate quis, neque, itaque est quae!
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Heading that is very, very long and takes at least two lines
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing sit amet.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla itaque beatae consectetur harum facere animi.
      </p>
    </a>
  </li>
</ul>
<ul class="simple-listing simple-listing--text simple-listing--three">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Consectetur adipisicing elit
      </h3>
      <p class="simple-listing__excerpt">
        Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Pretium bibendum
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. At, esse amet.
      </p>
    </a>
  </li>
</ul>
<ul class="simple-listing simple-listing--text simple-listing--two">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Consectetur
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
</ul>
<ul class="simple-listing simple-listing--text simple-listing--one">
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Cras pretium et elit
      </h3>
      <p class="simple-listing__excerpt">
        Consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
  <li class="simple-listing__item">
    <a class="simple-listing__link" href="">
      <h3 class="simple-listing__heading">
        Consectetur
      </h3>
      <p class="simple-listing__excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, esse amet. Deleniti dicta dignissimos saepe dolore, incidunt deserunt totam id earum.
      </p>
    </a>
  </li>
</ul>

Hero listing

<ul class="hero-listing">
  <li>
    <a href="" style="background-image:url(http://placeimg.com/1200/600/animals)">
      <div class="inner">
        <strong>Cras pretium et elit id bibendum elit id bibendum pretium et elit pretium et elit</strong>
        <p>
          Implement a template-based truncation to 20 words to prevent the summary from unbalancing the list item and extending the…
        </p>
      </div>
    </a>
  </li>
  <li>
    <a href="" style="background-image:url(http://placeimg.com/1200/600/tech)">
      <div class="inner">
        <strong>Cras pretium et elit id bibendum.</strong>
        <p>
          Implement a template-based truncation to 20 words to prevent the summary from unbalancing the list item and extending the…
        </p>
      </div>
    </a>
  </li>
</ul>

Navigational text listing

<section class="navigation-text-listing">
  <h1>
    Headline (optional)
  </h1>
  <p>
    Descriptive text (optional)
  </p>
  <ul>
    <li>
      <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
    </li>
    <li>
      <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
    </li>
    <li>
      <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
    </li>
    <li>
      <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
    </li>
    <li>
      <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
    </li>
    <li>
      <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
    </li>
    <li>
      <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
    </li>
    <li>
      <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
    </li>
    <li>
      <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
    </li>
    <li>
      <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
    </li>
    <li>
      <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
    </li>
    <li>
      <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
    </li>
    <li>
      <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
    </li>
    <li>
      <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
    </li>
    <li>
      <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
    </li>
  </ul>
</section>

Navigational block listing with linked header

<section class="navigation-block-listing">
  <h1 class="aligned-title">
    Title
  </h1>
  <ul>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        <a href="#" title="Lorum ipsum dolor sit amet"> Main heading</a>
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
  </ul>
</section>

Navigational block listing with unlinked header

<section class="navigation-block-listing">
  <ul>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
    <li>
      <h3>
        Main heading
      </h3>
      <ul>
        <li>
          <a href="#" title="Lorum ipsum dolor sit amet"> Lorem</a>
        </li>
        <li>
          <a href="#" title="Aliquam tincidunt mauris eu risus"> Aliquam</a>
        </li>
        <li>
          <a href="#" title="Morbi in sem quis dui placerat ornare"> Morbi</a>
        </li>
        <li>
          <a href="#" title="Praesent dapibus, neque id cursus faucibus"> Praesent</a>
        </li>
        <li>
          <a href="#" title="Pellentesque fermentum dolor"> Pellentesque</a>
        </li>
      </ul>
    </li>
  </ul>
</section>

Logo listing

For specific dimension images that you want to keep unmodified (no cropping), eg. in sponsor logo grids. The markup will allow labels and links if required.

Label

Another label

<p>
  For specific dimension images that you want to keep unmodified (no cropping), eg. in sponsor logo grids. The markup will allow labels and links if required.
</p>
<div class="logo-listing">
  <figure class="logo-listing__item">
    <img alt="" src="http://placeimg.com/110/180/animals" /><figcaption>Label</figcaption>
  </figure>
  <img alt="" class="logo-listing__item" src="http://placeimg.com/190/50" /><img alt="" class="logo-listing__item" src="http://placeimg.com/230/120/animals" /><img alt="" class="logo-listing__item" src="http://placeimg.com/130/130/animals" /><a class="logo-listing__item" href="#">
    <figure>
      <img alt="" src="http://placeimg.com/60/230/animals" /><figcaption>Another label</figcaption>
    </figure>
  </a><a class="logo-listing__item" href="#"><img alt="" src="http://placeimg.com/130/130" /></a><img alt="" class="logo-listing__item" src="http://placeimg.com/130/130/animals" />
</div>