1. Home
2. Examples
3. News List

News Lists

A news list contains a repeating group of news items. To begin, wrap this module in a <section class="news-list">. Then use <article class="news-item"> to group each intividual article.

A .news-item has the following primary child elements.

• .thumbnail - Contains an image that is at least 150px wide
• .headline - A short article title that is linkable to article detail
• .description - A short summary or teaser for the article
• .published - Date the article was published

Schema Options (microdata)

This module is also available as a schema.org formatted module. Many applications, especially search engines, can benefit greatly from this structured data. Pages marked up using microdata enable search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web.

Using microdata is optional, but highly encouraged. In the source code section, samples for plain html and the microdata version are both included.

News Blocks

• By: Alex
• In: DMV

Incredible standard post

Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.

---

• Email
• Share

• By: Kathy
• In: CDT

Demperdiet molesti volutpa

Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.

---

• Email
• Share

• By: John
• In: CDTFA

Nullam non metus inmi

Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.

---

• Email
• Share

Show Source Code

×

HTML Markup

Source Code: <div class="group"> <div class="third m-b-md"> <!-- Article --> <article class="shadow"> <figure class="pos-rel m-b-0"> <img class="img-fluid w-100" src="images/500x450.jpg" alt="Image Description"> <figcaption class="pos-abs top-sm left-sm"> <a class="btn btn-sm btn-standout rounded-0" href="#">July 18, 2017</a> </figcaption> </figure> <div class="p-a"> <ul class="list-inline font-size-sm m-y-0"> <li class="list-inline-item"> <span class="color-gray">By:</span> <a class="color-gray-dark color-primary--hover" href="#">Alex</a> </li> <li class="list-inline-item"> <span class="color-gray">In:</span> <a class="color-gray-dark color-primary--hover" href="#">DMV</a> </li> </ul> <h4 class="m-t-0 m-b-sm"> <a class="u-link-v5 color-gray-dark color-primary--hover" href="#">Incredible standard post</a> </h4> <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p> <hr class="hr-light m-y"> <ul class="list-inline m-y-0"> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-email"></i><span class="sr-only">Email</span> </a> </li> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-share"></i><span class="sr-only">Share</span> </a> </li> </ul> </div> </article> <!-- End Article --> </div> <div class="third m-b-md"> <!-- Article --> <article class="shadow"> <figure class="pos-rel m-b-0"> <img class="img-fluid w-100" src="images/500x450.jpg" alt="Image Description"> <figcaption class="pos-abs top-sm left-sm"> <a class="btn btn-sm btn-standout rounded-0" href="#">July 12, 2017</a> </figcaption> </figure> <div class="p-a"> <ul class="list-inline font-size-sm m-y-0"> <li class="list-inline-item"> <span class="color-gray">By:</span> <a class="color-gray-dark color-primary--hover" href="#">Kathy</a> </li> <li class="list-inline-item"> <span class="color-gray">In:</span> <a class="color-gray-dark color-primary--hover" href="#">CDT</a> </li> </ul> <h4 class="m-t-0 m-b-sm"> <a class="u-link-v5 color-gray-dark color-primary--hover" href="#">Demperdiet molesti volutpa</a> </h4> <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p> <hr class="hr-light m-y"> <ul class="list-inline m-y-0"> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-email"></i><span class="sr-only">Email</span> </a> </li> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-share"></i><span class="sr-only">Share</span> </a> </li> </ul> </div> </article> <!-- End Article --> </div> <div class="third m-b-md"> <!-- Article --> <article class="shadow"> <figure class="pos-rel m-b-0"> <img class="img-fluid w-100" src="images/500x450.jpg" alt="Image Description"> <figcaption class="pos-abs top-sm left-sm"> <a class="btn btn-sm btn-standout rounded-0" href="#">July 07, 2017</a> </figcaption> </figure> <div class="p-a"> <ul class="list-inline font-size-sm m-y-0"> <li class="list-inline-item"> <span class="color-gray">By:</span> <a class="color-gray-dark color-primary--hover" href="#">John</a> </li> <li class="list-inline-item"> <span class="color-gray">In:</span> <a class="color-gray-dark color-primary--hover" href="#">CDTFA</a> </li> </ul> <h4 class="m-t-0 m-b-sm"> <a class="u-link-v5 color-gray-dark color-primary--hover" href="#">Nullam non metus inmi</a> </h4> <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p> <hr class="hr-light m-y"> <ul class="list-inline m-y-0"> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-email"></i><span class="sr-only">Email</span> </a> </li> <li class="list-inline-item m-r m-y-0"> <a class="news-icon bg-gray-light bg-primary--hover color-gray-dark rounded-50x" href="#"> <i class="ca-gov-icon-share"></i><span class="sr-only">Share</span> </a> </li> </ul> </div> </article> <!-- End Article --> </div> </div> <!-- End News Block -->

Close

Image News Blocks

DMV

Incredible Image post

July 04, 2016

Read More

CDT

Demperdiet molesti volutpa

July 04, 2016

Read More

CDTFA

Nullam non metus inmi

July 04, 2016

Read More

Show Source Code

×

HTML Markup

Source Code: <div class="group"> <div class="third m-b-md"> <!-- Article --> <article class="block-hover"> <figure class="bg-overlay"> <img class="img-fluid w-100 block-hover_zoom" src="images/500x450.jpg" alt="Image Description"> </figure> <header class="w-100 text-center absolute-centered p-x"> <span class="btn btn-xs btn-primary rounded-0" href="#">DMV</span> <h4 class="m-y-sm"> Incredible Image post </h4> <small class="color-white"> <i class="ca-gov-icon-time pos-rel"></i> July 04, 2016 </small> </header> <a class="news-link" href="#">Read More</a> </article> <!-- End Article --> </div> <div class="third m-b-md"> <!-- Article --> <article class="block-hover"> <figure class="bg-overlay"> <img class="img-fluid w-100 block-hover_zoom" src="images/500x450.jpg" alt="Image Description"> </figure> <header class="w-100 text-center absolute-centered p-x"> <span class="btn btn-xs btn-primary rounded-0" href="#">CDT</span> <h4 class="m-y-sm"> Demperdiet molesti volutpa </h4> <small class="color-white"> <i class="ca-gov-icon-time pos-rel"></i> July 04, 2016 </small> </header> <a class="news-link" href="#">Read More</a> </article> <!-- End Article --> </div> <div class="third m-b-md"> <!-- Article --> <article class="block-hover"> <figure class="bg-overlay"> <img class="img-fluid w-100 block-hover_zoom" src="images/500x450.jpg" alt="Image Description"> </figure> <header class="w-100 text-center absolute-centered p-x"> <span class="btn btn-xs btn-primary rounded-0" href="#">CDTFA</span> <h4 class="m-y-sm"> Nullam non metus inmi </h4> <small class="color-white"> <i class="ca-gov-icon-time pos-rel"></i> July 04, 2016 </small> </header> <a class="news-link" href="#">Read More</a> </article> <!-- End Article --> </div> </div> <!-- End Image Block -->

Close

News List

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.

Published: Oct 20, 2014

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.

Published: Oct 20, 2014

Show Source Code

×

Source Code

• HTML Markup
• Microdata

<section class="news-list"> <!-- Begin repeatable news item --> <article class="news-item"> <div class="thumbnail"><img src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline"><a href="">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="description"><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</p></div> <div class="published">Published: <time datetime="2014-10-20">Oct 20, 2014</time></div> </div> </article> <!-- End news item --> <!-- Begin repeatable news item --> <article class="news-item"> <div class="thumbnail"><img src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline"><a href="">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="description"><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</p></div> <div class="published">Published: <time datetime="2014-10-20">Oct 20, 2014</time></div> </div> </article> <!-- End news item --> </section>

NOTE: This module makes use of a datetime property set in the ISO 8601 format. Be sure to set the time correctly for each news-item.

<section class="news-list"> <!-- Begin repeatable news item --> <article class="news-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="thumbnail"><img itemprop="thumbnailUrl" src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline" itemprop="headline"><a href="" itemprop="url">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="description" itemprop="articleBody"><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</p></div> <div class="published">Published: <time class="date" itemprop="datePublished" datetime="2014-10-20T00:00:00-08:00">Oct 20, 2014</time></div> </div> </article> <!-- End news item --> </section>

Close

---

Sidebar Example:

Using the .news-item module in the sidebar makes use of the same markup however it omits the .description node for sake of saving space.

Latest News Headlines

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Published: Oct 20, 2014

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Published: Oct 20, 2014

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Published: Oct 20, 2014

---

Show Source Code

×

HTML Markup

Source Code: <section class="news-list"> <article class="news-item"> <div class="thumbnail"><img src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline"><a href="">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="published">Published: <time datetime="2014-10-20">Oct 20, 2014</time></div> </div> </article> <article class="news-item"> <div class="thumbnail"><img src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline"><a href="">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="published">Published: <time datetime="2014-10-20">Oct 20, 2014</time></div> </div> </article> <article class="news-item"> <div class="thumbnail"><img src="images/150x100.gif" alt="sample image"></div> <div class="info"> <div class="headline"><a href="">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</a></div> <div class="published">Published: <time datetime="2014-10-20">Oct 20, 2014</time></div> </div> </article> </section>

Close