Skip to main content

Raven Design System

Listing Block

Listing blocks display a series of related content in vertical lists as a single continuous element. The Listing block has several options and variants for dealing with different content types.

Base example

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Base example</h2>
    </header>
    <div class="b-listing">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>White-necked Raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Common_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Common raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Australian raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Thick-billed_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Thick-billed raven</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Listing block headings

For Listing blocks a heading is required. Therefore all the code examples on this page include a block headings.

Listing block with subtitles

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Listing block with subtitles</h2>
    </header>
    <div class="b-listing">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                    <div>
                        <h3 itemprop="name">White-necked Raven</h3>
                        <p itemprop="description">Corvus albicollis</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Common_raven" itemprop="url">
                    <div>
                        <h3 itemprop="name">Common raven</h3>
                        <p itemprop="description">Corvus corax</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                    <div>
                        <h3 itemprop="name">Australian raven</h3>
                        <p itemprop="description">Corvus crassirostris</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Thick-billed_raven" itemprop="url">
                    <div>
                        <h3 itemprop="name">Thick-billed raven</h3>
                        <p itemprop="description">Corvus cryptoleucus</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Listing block with image

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Listing block with image</h2>
    </header>
    <div class="b-listing">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-1.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">White-necked Raven</h3>
                        <p itemprop="description">Corvus albicollis</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Common_raven" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-2.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Common raven</h3>
                        <p itemprop="description">Corvus corax</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-3.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Australian raven</h3>
                        <p itemprop="description">Corvus crassirostris</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Thick-billed_raven" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-4.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Thick-billed raven</h3>
                        <p itemprop="description">Corvus cryptoleucus</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Listing block with badges

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Listing block with badges</h2>
    </header>
    <div class="b-listing">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>White-necked Raven</h3>
                    </div>
                    <span class="c-badge">3</span>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Common_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Common raven</h3>
                    </div>
                    <span class="c-badge">5</span>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Australian raven</h3>
                    </div>
                    <span class="c-badge">v1.0</span>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Thick-billed_raven" itemprop="url">
                    <div itemprop="name">
                        <h3>Thick-billed raven</h3>
                    </div>
                    <span class="c-badge">New</span>
                </a>
            </li>
        </ul>
    </div>
</section>

Listing block with icons

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Listing block with icons</h2>
    </header>
    <div class="b-listing b-listing--icon">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                    <figure>
                        <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64.46 128c36.62-33.212 53.897-76.17 54.456-119.942C102.432 10.738 83.56 8.213 64.46 0 45.354 8.213 26.483 10.74 10 8.058 10.558 51.83 27.836 94.788 64.46 128zM30.042 36.78c0-2.466.856-4.732 2.282-6.528l7.156 2.96-4.773.885a6.395 6.395 0 0 0-.592 2.684 6.48 6.48 0 0 0 6.486 6.475 6.455 6.455 0 0 0 4.443-1.767l3.974 1.643a10.535 10.535 0 0 1-8.414 4.19c-5.83 0-10.562-4.718-10.562-10.54zm8.518 25.1c11.917-5.08 21.163-12.825 25.9-22.21v41.12c4.776-8.373 14.19-15.25 25.898-18.91-13.84 5.847-24.946 25.76-25.898 45.253-.955-19.492-12.06-39.406-25.9-45.254z"/></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>White-necked Raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Common_raven" itemprop="url">
                    <figure>
                        <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64.46 128c36.62-33.212 53.897-76.17 54.456-119.942C102.432 10.738 83.56 8.213 64.46 0 45.354 8.213 26.483 10.74 10 8.058 10.558 51.83 27.836 94.788 64.46 128zM30.042 36.78c0-2.466.856-4.732 2.282-6.528l7.156 2.96-4.773.885a6.395 6.395 0 0 0-.592 2.684 6.48 6.48 0 0 0 6.486 6.475 6.455 6.455 0 0 0 4.443-1.767l3.974 1.643a10.535 10.535 0 0 1-8.414 4.19c-5.83 0-10.562-4.718-10.562-10.54zm8.518 25.1c11.917-5.08 21.163-12.825 25.9-22.21v41.12c4.776-8.373 14.19-15.25 25.898-18.91-13.84 5.847-24.946 25.76-25.898 45.253-.955-19.492-12.06-39.406-25.9-45.254z"/></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Common raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                    <figure>
                        <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64.46 128c36.62-33.212 53.897-76.17 54.456-119.942C102.432 10.738 83.56 8.213 64.46 0 45.354 8.213 26.483 10.74 10 8.058 10.558 51.83 27.836 94.788 64.46 128zM30.042 36.78c0-2.466.856-4.732 2.282-6.528l7.156 2.96-4.773.885a6.395 6.395 0 0 0-.592 2.684 6.48 6.48 0 0 0 6.486 6.475 6.455 6.455 0 0 0 4.443-1.767l3.974 1.643a10.535 10.535 0 0 1-8.414 4.19c-5.83 0-10.562-4.718-10.562-10.54zm8.518 25.1c11.917-5.08 21.163-12.825 25.9-22.21v41.12c4.776-8.373 14.19-15.25 25.898-18.91-13.84 5.847-24.946 25.76-25.898 45.253-.955-19.492-12.06-39.406-25.9-45.254z"/></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Australian raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://en.wikipedia.org/wiki/Thick-billed_raven" itemprop="url">
                    <figure>
                        <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64.46 128c36.62-33.212 53.897-76.17 54.456-119.942C102.432 10.738 83.56 8.213 64.46 0 45.354 8.213 26.483 10.74 10 8.058 10.558 51.83 27.836 94.788 64.46 128zM30.042 36.78c0-2.466.856-4.732 2.282-6.528l7.156 2.96-4.773.885a6.395 6.395 0 0 0-.592 2.684 6.48 6.48 0 0 0 6.486 6.475 6.455 6.455 0 0 0 4.443-1.767l3.974 1.643a10.535 10.535 0 0 1-8.414 4.19c-5.83 0-10.562-4.718-10.562-10.54zm8.518 25.1c11.917-5.08 21.163-12.825 25.9-22.21v41.12c4.776-8.373 14.19-15.25 25.898-18.91-13.84 5.847-24.946 25.76-25.898 45.253-.955-19.492-12.06-39.406-25.9-45.254z"/></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Thick-billed raven</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Files listing block - icons and subtitles 

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Files listing block - icons and subtitles </h2>
    </header>
    <div class="b-listing b-listing--icon">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="#filepath" itemprop="url">
                    <figure>
                        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M4 23V1h10.84L20 6.473V23z" fill="#fff"/><g fill="#bf112b"><path d="M14.62 1.611l4.809 5.142v15.636H4.57V1.61zM14.858 1H4v22h16V6.5z"/><path d="M14 7V1h.195L20 6.805V7z" fill-opacity=".215"/><path d="M14.6 1.848L19.152 6.4H14.6zm0-.848H14v6h6v-.6z"/></g></g><path d="M16 15.34c0-1.98-8-.117-8 2.263 0 .192.135.397.353.397 1.675 0 4.779-11 3.26-11s.859 9.023 3.66 9.023c.408 0 .727-.167.727-.683z" stroke="#bf112b" stroke-width=".5"/></g></svg>
                    </figure>
                    <div>
                        <h3 itemprop="name">Ravens Annual Report (PDF)</h3>
                        <p itemprop="description">73KB - June 15 1973</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#filepath" itemprop="url">
                    <figure>
                        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none"><path d="M4 23V1h10.84L20 6.473V23z" fill="#fff"/><path d="M14.62 1.611l4.809 5.142v15.636H4.57V1.61zM14.858 1H4v22h16V6.5z" fill="#388e3c"/><path d="M14 7V1h.195L20 6.805V7z" fill="#e8f5e9"/><path d="M14.6 1.848L19.152 6.4H14.6zm0-.848H14v6h6v-.6zM11.497 11.327L12.78 9h2.16l-2.193 3.471L15 16h-2.183l-1.32-2.37-1.32 2.37H8l2.247-3.529L8.06 9h2.156z" fill="#388e3c"/></g></svg>
                    </figure>
                    <div>
                        <h3 itemprop="name">Yay, Another Spreadsheet (XLS)</h3>
                        <p itemprop="description">73KB - June 15 1973</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#filepath" itemprop="url">
                    <figure>
                        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none"><path d="M4 23V1h10.84L20 6.473V23z" fill="#fff"/><path d="M14.62 1.611l4.809 5.142v15.636H4.57V1.61zM14.858 1H4v22h16V6.5z" fill="#1976d2"/><path d="M14 7V1h.195L20 6.805V7z" fill="#e3f2fd"/><path d="M14.6 1.848L19.152 6.4H14.6zm0-.848H14v6h6v-.6zM13.324 13.39L14.19 9H16l-1.606 7h-1.891l-1.013-3.99-.993 3.99H8.611L7 9h1.813l.868 4.39L10.721 9h1.548z" fill="#1976d2"/></g></svg>
                    </figure>
                    <div>
                        <h3 itemprop="name">Project Charter (DOC)</h3>
                        <p itemprop="description">73KB - June 15 1973</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#filepath" itemprop="url">
                    <figure>
                        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M4 23V1h10.84L20 6.473V23z" fill="#fff"/><path d="M14.62 1.611l4.809 5.142v15.636H4.57V1.61zM14.858 1H4v22h16V6.5z" fill="#ff6d00"/><path d="M14 7V1h.195L20 6.805V7z" fill="#fff3e0"/><path d="M14.6 1.848L19.152 6.4H14.6zm0-.848H14v6h6v-.6z" fill="#ff6d00"/></g><path d="M10 12.5v-3" stroke="#ff6d00" stroke-linecap="square"/><path d="M11.656 9H9v7h1.65v-2.412h.854c.91 0 1.637-.217 2.18-.651.544-.435.817-1.004.816-1.706C14.5 9.744 13.552 9 11.656 9zm-.622 3.45H10V10.2h1.034c1.31 0 1.966.371 1.966 1.113 0 .759-.655 1.137-1.966 1.137z" fill="#ff6d00" fill-rule="nonzero"/></g></svg>
                    </figure>
                    <div>
                        <h3 itemprop="name">Watch me read bullets (PPT)</h3>
                        <p itemprop="description">73KB - June 15 1973</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#filepath" itemprop="url">
                    <figure>
                        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M4 23V1h10.84L20 6.473V23z" fill="#fff"/><path d="M14.62 1.611l4.809 5.142v15.636H4.57V1.61zM14.858 1H4v22h16V6.5z" fill="#ffa000"/><path d="M14 7V1h.195L20 6.805V7z" fill="#ffca28" fill-opacity=".38"/><path d="M14.6 1.848L19.152 6.4H14.6zm0-.848H14v6h6v-.6z" fill="#ffa000"/></g><g fill="#ffa000"><path d="M8 11v.889h1.836v.052L8 14.381V15h3v-.889H9.164v-.052L11 11.619V11zM12 11v4h1v-4zM14 11v4h.855l.002-1.333h.807c.793 0 1.336-.555 1.336-1.344 0-.8-.52-1.323-1.288-1.323z"/></g><path d="M15 12h.525c.29 0 .475.173.475.501 0 .327-.187.499-.479.499H15z" fill="#f9f9f9"/><g fill="#ffa000"><path d="M6.5 2a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 8a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 11a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 14a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 17a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM6.5 20a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1z"/></g></g></svg>
                    </figure>
                    <div>
                        <h3 itemprop="name">Zip it, Dr. Evil (ZIP)</h3>
                        <p itemprop="description">73KB - June 15 1973</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Events variant

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Events variant</h2>
    </header>
    <div class="b-listing b-listing--event">
        <ul itemscope itemtype="http://schema.org/Event">
            <li itemprop="item">
                <a href="#eventurl" itemprop="url">
                    <time itemprop="startDate" datetime="" content="">
                        Apr<span>21</span>
                    </time>
                     <div>
                        <h3>08:00 am</h3>
                        <p>09:00 pm</p>
                    </div>
                    <div>
                        <h3 itemprop="name">Event Title</h3>
                        <p itemprop="location">Event location</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#eventurl" itemprop="url">
                    <time itemprop="startDate" datetime="" content="">
                        Apr<span>21</span>
                    </time>
                     <div>
                        <h3>08:00 am</h3>
                        <p>09:00 pm</p>
                    </div>
                    <div>
                        <h3 itemprop="name">Event Title</h3>
                        <p itemprop="location">Event location</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="#eventurl" itemprop="url">
                    <time itemprop="startDate" datetime="" content="">
                        Apr<span>21</span>
                    </time>
                     <div>
                        <h3>08:00 am</h3>
                        <p>09:00 pm</p>
                    </div>
                    <div>
                        <h3 itemprop="name">Event Title</h3>
                        <p itemprop="location">Event location</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

News variant

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">News variant</h2>
    </header>
    <div class="b-listing b-listing--news">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">News items that have long titles will be allowed to flow over two lines, and will automatically add an ellipsis beyond that</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">Ravens seeking Recruiting Coordinator ahead of 2018 season</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">Ravens seeking Recruiting Coordinator ahead of 2018 season</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
        </ul>
    </div>
</section>

News variant with image

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">News variant with image</h2>
    </header>
    <div class="b-listing b-listing--news">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <figure>
                        <img src="https://goravens.ca/wp-content/uploads/football-helmet.jpg" alt="" itemprop="image">
                    </figure>
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">News items that have extremely long titles will be allowed to flow over two lines, and will automatically display an ellipsis if it goes beyond that</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <figure>
                        <img src="https://goravens.ca/wp-content/uploads/football-helmet.jpg" alt="" itemprop="image">
                    </figure>
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">Ravens seeking Recruiting Coordinator ahead of 2018 season</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://goo.gl/LnS148" itemprop="url">
                    <figure>
                        <img src="https://goravens.ca/wp-content/uploads/football-helmet.jpg" alt="" itemprop="image">
                    </figure>
                    <header itemscope itemtype="http://schema.org/NewsArticle">
                        <time datetime="2018-03-14" itemprop="datePublished" content="2018-03-14">Wednesday, March 14th</time>
                        <h3 itemprop="headline">Ravens seeking Recruiting Coordinator ahead of 2018 season</h3>
                        <p>Carleton Ravens football is looking to expand its list of coaches by 1 position.  Having started a program from scratch in 2013, the Ravens have continued to develop and improve over the past four years.</p>
                    </header>
                </a>
            </li>
        </ul>
    </div>
</section>

People variant

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">People variant</h2>
    </header>
    <div class="b-listing b-listing--people">
        <ul itemscope itemtype="http://schema.org/Person">
            <li itemprop="item">
                <a href="http://www.imdb.com/name/nm0000195/" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/photos/fill-murray.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Bill Murray</h3>
                        <p itemprop="description">Actor/Writer</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="http://www.imdb.com/name/nm0000195/" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/photos/fill-murray.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Peter Venkman</h3>
                        <p itemprop="description">Ghost buster</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="http://www.imdb.com/name/nm0000195/" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/photos/fill-murray.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Carl Spackler</h3>
                        <p itemprop="description">Caddy for Shack</p>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="http://www.imdb.com/name/nm0000195/" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/photos/fill-murray.jpg" alt="" itemprop="image">
                    </figure>
                    <div>
                        <h3 itemprop="name">Phil Connors</h3>
                        <p itemprop="description">Groundhog for a Day</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Video variant

<section class="u-block u-block--white">
    <header>
      <h2 class="c-heading u-no-border">Video variant</h2>
    </header>
    <div class="b-listing b-listing--video">
        <ul itemscope itemtype="http://schema.org/ItemList">
            <li itemprop="item">
                <a href="https://www.youtube.com/watch?v=Nrmj0fIUJAc" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-1.jpg" alt="" itemprop="image">
                        <svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0-3.205 1.248-6.219 3.515-8.485A11.921 11.921 0 0 1 12 0c3.205 0 6.219 1.248 8.485 3.515A11.92 11.92 0 0 1 24 12a11.92 11.92 0 0 1-3.515 8.485A11.92 11.92 0 0 1 12 24a11.92 11.92 0 0 1-8.485-3.515A11.921 11.921 0 0 1 0 12zM12 1.1C5.99 1.1 1.1 5.99 1.1 12c0 6.01 4.89 10.9 10.9 10.9 6.01 0 10.9-4.89 10.9-10.9 0-6.01-4.89-10.9-10.9-10.9zm-1.98 15.919h.001c-.524.333-1.161.036-1.161-.619v-.53h.006V8.907H8.86V7.61c0-.654.637-.963 1.161-.63l6.653 4.366c.525.333.513.874-.005 1.201l-6.648 4.473z" /></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>White-necked Raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://www.youtube.com/watch?v=KpApJr53Sgo" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-2.jpg" alt="" itemprop="image">
                        <svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0-3.205 1.248-6.219 3.515-8.485A11.921 11.921 0 0 1 12 0c3.205 0 6.219 1.248 8.485 3.515A11.92 11.92 0 0 1 24 12a11.92 11.92 0 0 1-3.515 8.485A11.92 11.92 0 0 1 12 24a11.92 11.92 0 0 1-8.485-3.515A11.921 11.921 0 0 1 0 12zM12 1.1C5.99 1.1 1.1 5.99 1.1 12c0 6.01 4.89 10.9 10.9 10.9 6.01 0 10.9-4.89 10.9-10.9 0-6.01-4.89-10.9-10.9-10.9zm-1.98 15.919h.001c-.524.333-1.161.036-1.161-.619v-.53h.006V8.907H8.86V7.61c0-.654.637-.963 1.161-.63l6.653 4.366c.525.333.513.874-.005 1.201l-6.648 4.473z" /></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Common Raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://www.youtube.com/watch?v=uJST7x-s548" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-3.jpg" alt="" itemprop="image">
                        <svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0-3.205 1.248-6.219 3.515-8.485A11.921 11.921 0 0 1 12 0c3.205 0 6.219 1.248 8.485 3.515A11.92 11.92 0 0 1 24 12a11.92 11.92 0 0 1-3.515 8.485A11.92 11.92 0 0 1 12 24a11.92 11.92 0 0 1-8.485-3.515A11.921 11.921 0 0 1 0 12zM12 1.1C5.99 1.1 1.1 5.99 1.1 12c0 6.01 4.89 10.9 10.9 10.9 6.01 0 10.9-4.89 10.9-10.9 0-6.01-4.89-10.9-10.9-10.9zm-1.98 15.919h.001c-.524.333-1.161.036-1.161-.619v-.53h.006V8.907H8.86V7.61c0-.654.637-.963 1.161-.63l6.653 4.366c.525.333.513.874-.005 1.201l-6.648 4.473z" /></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Thick-billed raven</h3>
                    </div>
                </a>
            </li>
            <li itemprop="item">
                <a href="https://www.youtube.com/watch?v=AXxVw76hgtk" itemprop="url">
                    <figure>
                        <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-4.jpg" alt="" itemprop="image">
                        <svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0-3.205 1.248-6.219 3.515-8.485A11.921 11.921 0 0 1 12 0c3.205 0 6.219 1.248 8.485 3.515A11.92 11.92 0 0 1 24 12a11.92 11.92 0 0 1-3.515 8.485A11.92 11.92 0 0 1 12 24a11.92 11.92 0 0 1-8.485-3.515A11.921 11.921 0 0 1 0 12zM12 1.1C5.99 1.1 1.1 5.99 1.1 12c0 6.01 4.89 10.9 10.9 10.9 6.01 0 10.9-4.89 10.9-10.9 0-6.01-4.89-10.9-10.9-10.9zm-1.98 15.919h.001c-.524.333-1.161.036-1.161-.619v-.53h.006V8.907H8.86V7.61c0-.654.637-.963 1.161-.63l6.653 4.366c.525.333.513.874-.005 1.201l-6.648 4.473z" /></svg>
                    </figure>
                    <div itemprop="name">
                        <h3>Chihuahuan raven</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</section>

Listing blocks in two columns

The Listing block is one of the few blocks that can be positioned side-by-side, on large screens, by wrapping two blocks in a single u-block class and a nested u-grid u-grid--2 class.

Two column Listing blocks

Two column Listing blocks

<div class="u-block u-block--white">
    <div class="u-grid u-grid--2 u-grid--s1">
     <section>
        <h3>Two column Listing blocks</h3>
        <div class="b-listing">
            <ul itemscope itemtype="http://schema.org/ItemList">
                <li itemprop="item">
                    <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                        <header class="listing__body" itemprop="name">
                            <h4 class="listing__title">White-necked Raven</h4>
                        </header>
                    </a>
                </li>
                <li itemprop="item">
                    <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                        <header class="listing__body" itemprop="name">
                            <h4 class="listing__title">Australian raven</h4>
                        </header>
                    </a>
                </li>
            </ul>
        </div>
        </section>
        <section>
            <h3>Two column Listing blocks</h3>
            <div class="b-listing">
                <ul itemscope itemtype="http://schema.org/ItemList">
                    <li itemprop="item">
                        <a href="https://en.wikipedia.org/wiki/White-necked_raven" itemprop="url">
                            <header class="listing__body" itemprop="name">
                                <h4 class="listing__title">White-necked Raven</h4>
                            </header>
                        </a>
                    </li>
                    <li itemprop="item">
                        <a href="https://en.wikipedia.org/wiki/Australian_raven" itemprop="url">
                            <header class="listing__body" itemprop="name">
                                <h4 class="listing__title">Australian raven</h4>
                            </header>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>

Note: any heading following an <h4> needs to be changed to an <h3> as seen in the above example.

Two column implementation notes

Listing blocks should only be used in two columns if:

  • The the titles are short. If they wrap both should wrap.
  • There are no more then 12 items total (six a side) for easy scanning and no need for the user to scroll.
  • is NOT a news variant can not be used in a two column use case.

Block details

Listing block meta values
handle listing
colour options u-block--white,u-block--grey
section use <main>
width type fixed
has heading true
theme(s) CU
variants events, icon, news, people, video
Codepen coming soon

Content guidelines

List Group items should:

  • present objects of the same type.
  • start with a capital letter.
  • not use commas or semicolons at the end of each line.
  • link to a page for the item with more information.
  • have text labels be as short as possible.

When To Avoid

  • Don't use this block to replace default content ordered and unordered lists.
  • Don't us this block if you are listing items that don't link anywhere.

Dates and Times

Date and time format should always be CCYY-MM-DDThh:mm:ss as per W3C

References