<!-- Stacked news snippet --><articleclass="article card hover-bg hover-grow"typeof="NewsArticle"><figureclass="card-image entry-image"><imgproperty="image"src="image.png"height="400"width="600"loading="lazy"alt="Alt text for image"></figure><divclass="card-body hover-more"><h2class="article-title card-title"property="headline"><aclass="card-link"href="#">News Article Title</a></h2><divclass="meta"><!-- Structured data for search engines --><linkproperty="publisher"resource="#siteorg"><linkproperty="description"content="Summary of news item"href="#"><divproperty="author"typeof="Person"><metaproperty="name"content="Author's Name"></div><pclass="meta-item publish-info"><timeproperty="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.
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 --><articleclass="article"typeof="NewsArticle"><headerclass="article-header"><h1property="headline"class="page-title entry-title">News Title</h1><divclass="meta-share-group"><divclass="meta"><pclass="publish-info"><timeproperty="datePublished"class="published"datetime="2019-01-14T08:05:00-05:00"><spanclass="icon"data-icon="calendar">Published:</span> January 14, 2019</time></p><pclass="author"property="author"typeof="Person"><spanclass="icon"data-icon="user">Author:</span><spanproperty="name"><ahref="#">Author Name</a></span></p><metaproperty="image"content="image.png"><metaproperty="dateModified"content="2019-01-22 13:06:00 -0500"><!-- `publisher` property references footer information --><linkproperty="publisher"resource="#siteorg"></div><!-- Social sharing buttons --><divclass="social-share"></div></div></header><divclass="article-content entry-content"property="mainEntityOfPage"><!-- Article content ... --></div><footer><divclass="meta-share-group"><divclass="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.
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;
<articleclass="article"typeof="Event"><headerclass="article-header"><h1class="page-title entry-title"property="name">Event Title</h1><divclass="meta"><linkproperty="organizer"resource="#siteorg"><pclass="meta-item"title="Sat Nov 2, 2019 7:30 pm - 11:30 pm"><timeproperty="startDate"datetime="2019-11-02T19:30-05:00"><spanclass="icon"data-icon="clock-o">Time:</span><spanclass="date-string">Sat Nov 2, 2019, </span> 7:30 pm</time> -
<timeproperty="endDate"datetime="2019-11-02T23:30-05:00">11:30 pm</time></p><pclass="meta-item"property="location"typeof="Place"><spanclass="icon"data-icon="map-pin">Location:</span><spanproperty="name address">Event Location</span></p></div></header><divclass="article-content"property="description"><!-- Event Details ... --></div><footer><divclass="meta-tags"><pclass="meta-label">Posted In:</p><ulclass="meta-list"><li><aclass="tag"href="#">Tag Name</a></li></ul></div><divclass="article-actions"><aclass="btn"href="#"target="_blank"><spanclass="icon"data-icon="download"></span> Download Event</a><aclass="btn"href="#"target="_blank"rel="nofollow"><spanclass="icon"data-icon="calendar-add"></span> Add to Google Calendar</a><divclass="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 --><divclass="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>varNDT3SharingServices=[{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.