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.


Example:

Source Code:

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.

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.


More News Samples