News & Events

News

News Item Snippet

News item snippets are typically in the form of a card. A horizontal layout is the default, but the card may be stacked instead depending on context.

Horizontal

<!-- Horizontal news snippet -->
<article class="article card hover-bg hover-grow horizontal" typeof="NewsArticle">
  <div class="card-image entry-image">
      <img property="image" src="image.png" height="400" width="600" loading="lazy" alt="Alt text for image">
  </div>
  <div class="card-body hover-more">
    <h2 class="article-title card-title" property="headline"><a class="card-link" href="#">News Article Title</a></h2>
    <div class="meta">
      <!-- Structured data for search engines -->
      <link property="publisher" resource="#siteorg">
      <link property="description" content="Summary of news item" href="#">
      <div property="author" typeof="Person">
        <meta property="name" content="Author's Name">
      </div>
      <p class="meta-item publish-info">
        <time property="datePublished" datetime="2019-01-01-T06:00:00-05:00">January 1, 2019</time>
      </p>
    </div>
  </div>
</article>

Stacked

Stacked layout should be reserved for instances where multiple article’s will be displayed together.

<!-- Stacked news snippet -->
<article class="article card hover-bg hover-grow" typeof="NewsArticle">
  <figure class="card-image entry-image">
    <img property="image" src="image.png" height="400" width="600" loading="lazy" alt="Alt text for image">
  </figure>
  <div class="card-body hover-more">
    <h2 class="article-title card-title" property="headline"><a class="card-link" href="#">News Article Title</a></h2>
    <div class="meta">
      <!-- Structured data for search engines -->
      <link property="publisher" resource="#siteorg">
      <link property="description" content="Summary of news item" href="#">
      <div property="author" typeof="Person">
        <meta property="name" content="Author's Name">
      </div>
      <p class="meta-item publish-info">
        <time property="datePublished" datetime="2019-01-01-T06:00:00-05:00">January 1, 2019</time>
      </p>
    </div>
  </div>
</article>

Full Article

A news article uses additional Structured Data in designating publication information. A .social-share element is also used to hold social sharing buttons.

News Title

Author: Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Rationis enim perfectio est virtus; Ut non sine causa ex iis memoriae ducta sit disciplina. Quasi ego id curem, quid ille aiat aut neget. Omnis enim est natura diligens sui. Satis est ad hoc responsum. Duo Reges: constructio interrete. Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros.

Nescio quo modo praetervolavit oratio. Erit enim mecum, si tecum erit. Ut in geometria, prima si dederis, danda sunt omnia. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Occultum facinus esse potuerit, gaudebit; Estne, quaeso, inquam, sitienti in bibendo voluptas?

Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Ut id aliis narrare gestiant? Quamquam te quidem video minime esse deterritum. Verum esto: verbum ipsum voluptatis non habet dignitatem, nec nos fortasse intellegimus. Quid est, quod ab ea absolvi et perfici debeat? Quod iam a me expectare noli. Restincta enim sitis stabilitatem voluptatis habet, inquit, illa autem voluptas ipsius restinctionis in motu est. Profectus in exilium Tubulus statim nec respondere ausus; Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Sine ea igitur iucunde negat posse se vivere?

<!-- Page Content -->
<article class="article" typeof="NewsArticle">
  <header class="article-header">
    <h1 property="headline" class="page-title entry-title">News Title</h1>
    <div class="meta-share-group">
      <div class="meta">
        <p class="publish-info">
          <time property="datePublished" class="published" datetime="2019-01-14T08:05:00-05:00">
            <span class="icon" data-icon="calendar">Published:</span> January 14, 2019</time>
        </p>
        <p class="author" property="author" typeof="Person">
          <span class="icon" data-icon="user">Author:</span> <span property="name"><a href="#">Author Name</a></span>
        </p>
        <meta property="image" content="image.png">
        <meta property="dateModified" content="2019-01-22 13:06:00 -0500">
        <!-- `publisher` property references footer information -->
        <link property="publisher" resource="#siteorg">
      </div>
      <!-- Social sharing buttons -->
      <div class="social-share"></div>
    </div>
  </header>
  <div class="article-content entry-content" property="mainEntityOfPage">
    <!-- Article content ... -->
  </div>
  <footer>
    <div class="meta-share-group">
      <div class="social-share"></div>
    </div>
  </footer>
</article>
CSS Class Description
.article-heading Used to style news article headings.
.meta-item Used for individual meta items.
.meta-share-group Used for wrapping meta information and share buttons.
.social-share JavaScript is used to populate this element with buttons for sharing content.

Events

Event Item Snippet

Event snippets are typically in the form of a card, along with a stylized date to the side.

Event Title

<article class="article snippet event" typeof="Event">
  <div aria-hidden="true" class="meta-item event-date"><span class="event-month">Nov</span> <span class="event-day">14</span></div>
  <div class="card hover-grow hover-bg hover-more">
    <div class="card-body">
      <h2 class="article-title event-title" property="name"><a href="#" class="card-link">Event Title</a></h2>
      <div class="article-meta event-meta">
        <p class="meta-item event-time" title="Thu Nov 14, 2019  1:00 pm - 2:00 pm">
          <time property="startDate" datetime="2019-11-14T13:00-05:00"><span class="icon" data-icon="clock-o">Time:</span> <span class="date-string">Thu, Nov 14</span> at 1:00 pm</time> -
          <time property="endDate" datetime="2019-11-14T14:00-05:00"> 2:00 pm</time>
        </p>
        <p class="meta-item event-location" property="location" typeof="Place"><span class="icon" data-icon="map-pin">Location:</span> <span property="name address">Location Name</span></p>
        <link property="image" href="//placehold.it/600x400/?text=FPO">
        <link property="organizer" resource="#siteorg">
      </div>
    <meta property="description" content="Event description...">
    </div>
  </div>
</article>

Full Event Details

An event page uses additional Structured Data in designating publication information. A .social-share element is also used to hold social sharing buttons.

Event Title

-

Location: Event Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Magna laus. Iam contemni non poteris. Obsecro, inquit, Torquate, haec dicit Epicurus? Duo Reges: constructio interrete. Sic enim censent, oportunitatis esse beate vivere. Minime vero istorum quidem, inquit. Ubi ut eam caperet aut quando?

Quid ergo attinet gloriose loqui, nisi constanter loquare? At enim, qua in vita est aliquid mali, ea beata esse non potest. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Sed residamus, inquit, si placet. Sedulo, inquam, faciam. Apparet statim, quae sint officia, quae actiones. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi;

  <article class="article" typeof="Event">
    <header class="article-header">
      <h1 class="page-title entry-title" property="name">Event Title</h1>
      <div class="meta">
        <link property="organizer" resource="#siteorg">
        <p class="meta-item" title="Sat Nov  2, 2019  7:30 pm - 11:30 pm">
          <time property="startDate" datetime="2019-11-02T19:30-05:00"><span class="icon" data-icon="clock-o">Time:</span> <span class="date-string">Sat Nov 2, 2019, </span> 7:30 pm</time> -
          <time property="endDate" datetime="2019-11-02T23:30-05:00">11:30 pm</time>
        </p>
        <p class="meta-item" property="location" typeof="Place"><span class="icon" data-icon="map-pin">Location:</span> <span property="name address">Event Location</span></p>
      </div>
    </header>
    <div class="article-content" property="description">
      <!-- Event Details ...  -->
    </div>
    <footer>
      <div class="meta-tags">
        <p class="meta-label">Posted In:</p>
        <ul class="meta-list">
          <li><a class="tag" href="#">Tag Name</a></li>
        </ul>
      </div>
      <div class="article-actions">
        <a class="btn" href="#" target="_blank"><span class="icon" data-icon="download"></span> Download Event</a>
        <a class="btn" href="#" target="_blank" rel="nofollow"><span class="icon" data-icon="calendar-add"></span> Add to Google Calendar</a>
        <div class="social-share"></div>
      </div>
    </footer>
  </article>
CSS Class Description
.event.snippet Used to designate layout with date to left.
.event-date Used to wrap month and day, and place them in the proper position in the layout.
.event-month Used for styling the month.
.event-day Used for styling the day.
.meta-item Used for individual meta items.
.meta-label Used to label and list of tags.
.meta-list Used for inline list of tags.
.article-actions Used for article actions and and sharing buttons.

Social Sharing

Social sharing links are included on both News and Events items. These are injected by the global Web Theme JavaScript.

<!-- Social sharing buttons -->
<div class="social-share"></div>

Custom Sharing Services

By default, social sharing include links for Facebook, Twitter, and email. These default services can be overwritten using the variable NDT3SharingServices. This variable must be defined prior to the global ndt.js file being loaded.

<!-- Overwrite default options, using only Facebook and Twitter -->
<script>
var NDT3SharingServices = [
  {
    name: 'Facebook',
    html: '<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg>',
    url: 'SHARING LINK FOR FACEBOOK'
  }, {
    name: 'Instagram',
    html: '<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram"></use></svg>',
    url: 'SHARING LINK FOR INSTAGRAM'
  }
];
</script>

Non-default sharing options will not have any colors assigned to them. This will need to be done in the site’s CSS. Some services may have their logo already in the NDT icon set.

Key Description
name Name used for service. This gets used in generating the CSS class name for the sharing item.
html Code used for the icon used, usually an SVG.
url URL used for sharing the page. This will vary from service to service.

Pagination

For times when there are too many items to list on single page, pagination should be used.

See the Pagination section on the Navigation page for more information.