Back to blue

News Snippet

Extra-Small Snippet without Date

This is an extra small News Snippet without date. It will only contain a title and subtitle. To include this kind of component, you just need to use the following code snippet:

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <meta itemprop="image" content="image url" /> <div class="nw-card__artcl"> <a href="#" class="nw-card__body"> <span itemprop="url" content="The actual url here"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h4">title</h3> <p itemprop="alternativeHeadline" class="nw-card__txt"> alternative_title </p> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <meta itemprop="datePublished" content="date published timestamp" /> <meta itemprop="author" content="author name" /> </a> </div> </article>

Small Snippet with Date

This is an extra small News Snippet with a date. To include this kind of component, you just need to use the following code snippet:

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <meta itemprop="image" content="image url" /> <div class="nw-card__artcl"> <a href="#" class="nw-card__body"> <span itemprop="url" content="The actual url here"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h3">title</h3> <p itemprop="alternativeHeadline" class="nw-card__txt ca-txt-bd2"> alternative_title </p> </a> <div class="nw-card__meta"> <time class="ca-txt-cpt" datetime="YYYY-MM-DD" itemProp="datePublished" content=" YYYY-MM-DD T HH:MM+00:00 "> MM/DD/YYYY </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <a href="#" class="ca-a ca-a--sm nw-card__auth" itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span rel="author" itemprop="name">ConsumerAffairs</span> </a> </div> <div class="nw-card__cta"> <a href="#" class="ca-a ca-a--bld-no-undln ca-a--big-icon nw-card__cta-lnk">Continue reading {% include "base/common/icons/rebrand/arrow-right.html" %} </a> </div> </div> </article>

Link on title only

If you don't want to make all the content clickable and just the title instead, just use a div on the nw-card__body element and add the nw-card__hdl-lnk class to the title link.

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <meta itemprop="image" content="image url" /> <div class="nw-card__artcl"> <div class="nw-card__body"> <span itemprop="url" content="The actual url here"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h3"><a href="#" class="nw-card__hdl-lnk">title</a></h3> <p itemprop="alternativeHeadline" class="nw-card__txt ca-txt-bd2"> alternative_title </p> </duv> <div class="nw-card__meta"> <time class="ca-txt-cpt" datetime="YYYY-MM-DD" itemProp="datePublished" content=" YYYY-MM-DD T HH:MM+00:00 "> MM/DD/YYYY </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <a href="#" class="ca-a ca-a--sm nw-card__auth" itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span rel="author" itemprop="name">ConsumerAffairs</span> </a> </div> <div class="nw-card__cta"> <a href="#" class="ca-a ca-a--bld-no-undln ca-a--big-icon nw-card__cta-lnk">Continue reading {% include "base/common/icons/rebrand/arrow-right.html" %} </a> </div> </div> </article>

Article with an image

The article image is optional. If the article do have an image, you just need to include the figure tag as seen in the following code snippet.

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <!-- if the article doesn't have an image, just remove the following node --> <figure class="nw-card__img-wrp"> <a href="url"> <img itemprop="image" class="nw-card__img" src="img src"> </a> </figure> <div class="nw-card__artcl"> <a href="#" class="nw-card__body"> <span itemprop="url" content="The actual url here"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h3">title</h3> <p itemprop="alternativeHeadline" class="nw-card__txt ca-txt-bd2"> alternative_title </p> </a> <div class="nw-card__meta"> <time class="ca-txt-cpt" datetime="YYYY-MM-DD" itemProp="datePublished" content=" YYYY-MM-DD T HH:MM+00:00 "> MM/DD/YYYY </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <a href="#" class="ca-a ca-a--sm nw-card__auth" itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span rel="author" itemprop="name">ConsumerAffairs</span> </a> </div> <div class="nw-card__cta"> <a href="#" class="ca-a ca-a--bld-no-undln ca-a--big-icon nw-card__cta-lnk">Continue reading {% include "base/common/icons/rebrand/arrow-right.html" %} </a> </div> </div> </article>

Different image sizes

The default image width equals to 2 grid columns, but we can also add modifiers to the nw-card__img-wrp element to make the image bigger:

  • nw-card__img-wrp--3: the image is 270px wide, equal to 3 grid columns.
  • nw-card__img-wrp--6: the image is 470px wide, equal to 6 grid columns.

Demoted snippet with toggle

This is a medium-sized News Snippet and it uses the expander-collapser script to toggle the content after clicking on "read more" so make sure to include the CSS and JS, and to use a unique ID on the hidden content and in the trigger target (check the documentation if you have any doubts).

To include this kind of component, you just need to use the following code snippet

Novitium Pharma recalls Ranitidine Hydrochloride capsules

The medication, used for treatment of gastric disorders, is contaminated with a probable cancer-causer.

It's commonly accepted that the early adopters of new technologies are pornographers and scam artists. In that spirit, the Securities and Exchange Commission has filed its first fraud case involving Bitcoin, the virtual and more content over here to expande the topic.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu odio ac justo vestibulum tempus. Duis malesuada elementum justo, quis tempor mauris pulvinar eget. Mauris eleifend eu magna non blandit. Pellentesque pulvinar nunc a leo dapibus lacinia. Proin porta tellus eget ante sollicitudin, vel consequat leo elementum. Aliquam ac dignissim est. Mauris a sagittis arcu, vitae malesuada neque. Suspendisse potenti.

Fusce arcu justo, posuere eget erat ac, viverra facilisis nisi. Vivamus dignissim nibh sit amet vestibulum commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce finibus quam sit amet odio interdum suscipit. Morbi sed ultrices purus, viverra tempus metus. Praesent lacinia sem ac faucibus vestibulum. Nam tempus urna eget nunc maximus lobortis. Proin congue fringilla ullamcorper. Maecenas erat lectus, lobortis pellentesque lacus fermentum, condimentum elementum neque. Nunc odio justo, semper quis sagittis ac, elementum sed erat. Quisque eu velit magna. Donec nulla urna, ultrices eu nisl ut, rutrum commodo ex.

It's commonly accepted that the early adopters of new technologies are pornographers and scam artists. In that spirit, the Securities and Exchange Commission has filed its first fraud case involving Bitcoin, the virtual...

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <meta itemprop="image" content="image url" /> <div class="nw-card__artcl"> <div class="nw-card__body"> <span itemprop="url" content="The actual url here"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h3">title</h3> <h4 itemprop="alternativeHeadline" class="nw-card__txt ca-txt-bd2">Alternative headline</h4> <div class="js-collapsed" id="Use an unique ID here"> <p class="nw-card__txt">hidden description text</p> </div> <p itemprop="description" class="nw-card__txt">Description text</p> </div> <div class="nw-card__meta"> <time class="ca-txt-cpt" datetime="YYYY-MM-DD" itemProp="datePublished" content=" YYYY-MM-DD T HH:MM+00:00 "> MM/DD/YYYY </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <a href="#" class="ca-a ca-a--sm nw-card__auth" itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span rel="author" itemprop="name">ConsumerAffairs</span> </a> </div> <div class="nw-card__cta"> <button class="ca-btn--link ca-a ca-a--bld-no-undln exp-btn" data-expand-collapse='{"expandText":"Read more", "collapseText": "Read less", "target": ["#Hidden-content-ID"]}'>Read more</button> </div> </div> </article>

Big articles variations

You can create big articles by using the same markup described above.

You can also add a button on top of the title by adding the button inside of an wrapper with the nw-card__hd class. You can also increase the padding and make the subheading font weight normal regardless of the helper class by adding the nw-card__sub-hdl class to it. And finally, you can use the Publico font on the main header regardless of the heading class by adding the nw-card__hdl--ftd modifier class to the heading.

Novitium Pharma recalls Ranitidine Hydrochloride capsules

The medication, used for treatment of gastric disorders, is contaminated with a probable cancer-causer.

It's commonly accepted that the early adopters of new technologies are pornographers and scam artists. In that spirit, the Securities and Exchange Commission has filed its first fraud case involving Bitcoin, the virtual and more content over here to expande the topic.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu odio ac justo vestibulum tempus. Duis malesuada elementum justo, quis tempor mauris pulvinar eget. Mauris eleifend eu magna non blandit. Pellentesque pulvinar nunc a leo dapibus lacinia. Proin porta tellus eget ante sollicitudin, vel consequat leo elementum. Aliquam ac dignissim est. Mauris a sagittis arcu, vitae malesuada neque. Suspendisse potenti.

Fusce arcu justo, posuere eget erat ac, viverra facilisis nisi. Vivamus dignissim nibh sit amet vestibulum commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce finibus quam sit amet odio interdum suscipit. Morbi sed ultrices purus, viverra tempus metus. Praesent lacinia sem ac faucibus vestibulum. Nam tempus urna eget nunc maximus lobortis. Proin congue fringilla ullamcorper. Maecenas erat lectus, lobortis pellentesque lacus fermentum, condimentum elementum neque. Nunc odio justo, semper quis sagittis ac, elementum sed erat. Quisque eu velit magna. Donec nulla urna, ultrices eu nisl ut, rutrum commodo ex.

It's commonly accepted that the early adopters of new technologies are pornographers and scam artists. In that spirit, the Securities and Exchange Commission has filed its first fraud case involving Bitcoin, the virtual...

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <figure class="nw-card__img-wrp nw-card__img-wrp--3"> <a href="url to the article"> <img itemprop="image" class="nw-card__img" src="img source"> </a> </figure> <div class="nw-card__artcl"> <div class="nw-card__hd"> <a href="#" class="ca-btn ca-btn--alert ca-btn--sm">Scam alerts</a> </div> <div class="nw-card__body"> <span itemprop="url" content="url to the article"></span> <h3 itemprop="headline" class="nw-card__hdl ca-h2">Article heading</h3> <h4 itemprop="alternativeHeadline" class="nw-card__sub-hdl ca-h3">Article sub-heading.</h4> <div class="js-collapsed" id="article-1-full-desc"> <p class="nw-card__txt">hidden text</p> </div> <p itemprop="description" class="nw-card__txt">Article description</p> </div> <div class="nw-card__meta"> <time class="ca-txt-cpt" datetime="2018-02-27" itemProp="datePublished" content="2018-02-27T15:35:46+00:00"> 02/27/2018 </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <a href="#" class="ca-a ca-a--sm nw-card__auth" itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span rel="author" itemprop="name">ConsumerAffairs</span> </a> </div> <div class="nw-card__cta"> <button class="ca-btn--link ca-a ca-a--bld-no-undln exp-btn" data-expand-collapse='{"expandText":"Read more", "collapseText": "Read less", "target": ["#article-1-full-desc"]}'>Read more</button> </div> </div> </article> <article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <figure class="nw-card__img-wrp nw-card__img-wrp--fw"> <a href="url to the article"> <img itemprop="image" class="nw-card__img" src="img source"> </a> </figure> <div class="nw-card__artcl"> <div class="nw-card__hd"> <a href="#" class="ca-btn ca-btn--pill ca-btn--sm">Apple news</a> </div> <a href="url to the article" class="nw-card__body"> <span itemprop="url" content="url to the article"></span> <h3 itemprop="headline" class="nw-card__hdl nw-card__hdl--ftd ca-h3 ca-h3--lg">Article heading</h3> <h4 itemprop="alternativeHeadline" class="nw-card__sub-hdl ca-h3">Article subheading.</h4> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <meta itemprop="datePublished" content="date published timestamp" /> <meta itemprop="author" content="author name" /> </a> <div class="nw-card__cta"> <a href="url to the article" class="ca-a ca-a--bld-no-undln ca-a--big-icon nw-card__cta-lnk">Continue reading {% include "base/common/icons/rebrand/arrow-right.html" %} </a> </div> </div> </article>

On grid card

Sometimes the article is included inside a grid (like on the news homepage) and we need to align the CTA with the bottom part of the image. To do so, you have to add a nw-card__artcl--vert modifier class to the nw-card__artcl element.

<article class="nw-card" itemscope="" itemtype="http://schema.org/Article"> <figure class="nw-card__img-wrp nw-card__img-wrp--6"> <a href="url to the article"> <img itemprop="image" class="nw-card__img" src="img source"> </a> </figure> <div class="nw-card__artcl nw-card__artcl--vert"> <div class="nw-card__hd"> <a href="#" class="ca-btn ca-btn--pill ca-btn--sm">Apple news</a> </div> <a href="url to the article" class="nw-card__body"> <span itemprop="url" content="url to the article"></span> <h3 itemprop="headline" class="nw-card__hdl nw-card__hdl--ftd ca-h3">Article heading</h3> <h4 itemprop="alternativeHeadline" class="nw-card__sub-hdl ca-txt-bd-3">Article subheading.</h4> </a> <div class="nw-card__meta"> <time datetime="2018-02-27" itemProp="datePublished" content="2018-02-27T15:35:46+00:00"> 02/27/2018 </time> <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="ConsumerAffairs" /> <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="/static/img/rebrand/ca-logo-amp.jpg"> <meta itemprop="width" content="601" /> <meta itemprop="height" content="59" /> </span> </span> <meta itemprop="author" content="author name" /> </div> <div class="nw-card__cta"> <a href="url to the article" class="ca-a ca-a--bld-no-undln ca-a--big-icon nw-card__cta-lnk">Read more {% include "base/common/icons/rebrand/arrow-right.html" %} </a> </div> </div> </article>