A common news component can be used in multiple locations with differnt modifiers but a common set of elements: title, category, date and so on.

The three modifiers that you can use are c-news--excerpt, c-news--listing and c-news--article.

News excerpt

The basic excerpt has a category, title and teaser text. You can optionally have a poster image too, and a publishDate.

Vehicle for success

Our computer scientists are driving the latest advances in car electronics.

Posted on in Technologies for the future

 
<a class="c-news c-news--excerpt" href="#">
  <h4 class="c-news__title">Vehicle for success</h4>
  <div class="c-news__teaser">
    <p>Our computer scientists are driving the latest advances in car electronics.</p>
  </div>
  <p class="c-news__meta">Posted on <time datetime="1 October 2015" class="c-news__date">1 October 2015</time> in <span class="c-news__category">Technologies for the future</span></p>
</a>

And with a poster image:

Vehicle for success

Vehicle for success

Our computer scientists are driving the latest advances in car electronics.

Posted on in Technologies for the future

 
<a class="c-news c-news--excerpt" href="#">
  <figure class="c-news__poster">
    <img src="../media/traffic-banner.jpg" alt="Vehicle for success">
  </figure>
  <h4 class="c-news__title">Vehicle for success</h4>
  <div class="c-news__teaser">
    <p>Our computer scientists are driving the latest advances in car electronics.</p>
  </div>
  <p class="c-news__meta">Posted on <time datetime="1 October 2015" class="c-news__date">1 October 2015</time> in <span class="c-news__category">Technologies for the future</span></p>
</a>

When it's within an alt row the background will be white and the box will be padded. You can see this in action on the research front page

News event with labels and event dates

On the homepage we distinguish between events, comments and regular news with a .c-label based on the type of news item they are. You can also give an eventDate, separate from the publishDate.

Vehicle for success
Event

Vehicle for success

Our computer scientists are driving the latest advances in car electronics.

 
<a class="c-news c-news--excerpt" href="#">
  <figure class="c-news__poster">
    <img src="../media/traffic-banner.jpg" alt="Vehicle for success">
  </figure>
  <div class="c-label"><i class="c-icon c-icon--before c-icon--calendar"></i>Event</div>
  <h4 class="c-news__title">Vehicle for success</h4>
  <p class="c-news__event-date"><time datetime="1 October 2015" class="c-news__date">1 October 2015</time></p>
  <div class="c-news__teaser">
    <p>Our computer scientists are driving the latest advances in car electronics.</p>
  </div>
</a>

News listing

The basic news-listing atom is as follows:

Vehicle for success

Vehicle for success

 
<a class="c-news c-news--listing o-media" href="#">
  <figure class="c-news__thumbnail o-media__picture">
    <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
  </figure>
  <div class="o-media__body">
    <h4 class="c-news__title">Vehicle for success</h4>
  </div>
</a>

And can be joined together in an array to make a whole long list of news listings:

<ul class="c-news-list">
  <li class="c-news-list__item">
    <a class="c-news c-news--listing o-media" href="#">
      <figure class="c-news__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <h4 class="c-news__title">Vehicle for success</h4>
      </div>
    </a>
  </li>
  <li class="c-news-list__item">
    <a class="c-news c-news--listing o-media" href="#">
      <figure class="c-news__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <h4 class="c-news__title">Vehicle for success</h4>
      </div>
    </a>
  </li>
  <li class="c-news-list__item">
    <a class="c-news c-news--listing o-media" href="#">
      <figure class="c-news__thumbnail o-media__picture">
        <img src="../media/traffic-thumbnail.jpg" alt="Vehicle for success">
      </figure>
      <div class="o-media__body">
        <h4 class="c-news__title">Vehicle for success</h4>
      </div>
    </a>
  </li>
</ul>

You can see this in action on the research front page

News article

How research at York fuelled a revolution in automotive electronics

Millions of cars across the world owe the efficiency and reliability of their electronic systems to research carried out by our computer scientists.

How research at York fuelled a revolution in automotive electronics

Dr Mark Jenner, research champion for Culture and communication

Work by experts in our pioneering Real-Time Systems Research Group ensures the smooth running of programmes that control everything from fuel injection to brake lights.

And with new innovations such as driverless cars just around the corner, the demand for their specialist skills is accelerating.

“Car brakes are a simple example of the real time behaviour studied at York,” explains Dr Rob Davis, a Senior Research Fellow who joined the real time systems group as a PhD student shortly after its launch in the early 90s. “If you imagine approaching traffic lights – you put your foot on the brake, the brake lights go on and you slow to a stop. But there’s a lot more going on than that.

Watch the video here

“Pressing the brake pedal closes a switch. This is detected by an Electronic Control Unit, also known as an ECU. The ECU passes a message over the network to another control unit at the back of the car. This message is then decoded, causing the brake lights to go on - this all happens in a fraction of a second.

“Now imagine similar events and responses happening hundreds of times a second throughout your car controlling everything from gear changes to fuel injection – and each action has to be executed within a strict time limit.”

The text of this article is licensed under a Creative Commons Licence. You're free to republish it, as long as you link back to this page and credit us.

<div class="c-news c-news--article">
  <h1 class="c-news__title">How research at York fuelled a revolution in automotive electronics</h1>
  <ul class="c-tag-list c-tag-list--center c-news__category">
    <li class="c-tag-list__item"><a class="c-tag" href="#">Technologies for the future</a></li>
    <li class="c-tag-list__item"><a class="c-tag" href="#">Risk, evidence and decision making</a></li>
  </ul>
  <div class="c-news__lead">
    <p>Millions of cars across the world owe the efficiency and reliability of their electronic systems to research carried out by our computer scientists.</p>
  </div>
  <figure class="c-news__banner c-figure">
    <img src="../media/traffic-banner.jpg" alt="How research at York fuelled a revolution in automotive electronics">
    <div class="c-figure__caption c-figure__caption--below">
      <p>Dr Mark Jenner, research champion for&nbsp;Culture and communication</p>
    </div>
  </figure>
  <div class="c-news__content">
    <p>Work by experts in our pioneering Real-Time Systems Research Group ensures the smooth running of programmes that control everything from fuel injection to brake lights.</p>
    <p>And with new innovations such as driverless cars just around the corner, the demand for their specialist skills is accelerating.</p>
    <p>&ldquo;Car brakes are a simple example of the real time behaviour studied at York,&rdquo; explains Dr Rob Davis, a Senior Research Fellow who joined the real time systems group as a PhD student shortly after its launch in the early 90s. &ldquo;If you imagine approaching traffic lights – you put your foot on the brake, the brake lights go on and you slow to a stop. But there’s a lot more going on than that.</p>
    <p><a class="youtube-video-embed" href="https://www.youtube.com/watch?v=zPBBHo3NiYs">Watch the video here</a></p>
    <p>&ldquo;Pressing the brake pedal closes a switch. This is detected by an Electronic Control Unit, also known as an ECU. The ECU passes a message over the network to another control unit at the back of the car. This message is then decoded, causing the brake lights to go on - this all happens in a fraction of a second.</p>
    <p>&ldquo;Now imagine similar events and responses happening hundreds of times a second throughout your car controlling everything from gear changes to fuel injection – and each action has to be executed within a strict time limit.&rdquo;</p>
  </div>
  <div class="c-news__license">
    <p>The text of this article is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Licence</a>. You're free to republish it, as long as you link back to this page and credit us.</p>
  </div>
  <!-- SHARE BUTTONS -->
</div>

You can see this in action on a research article

Mixed media rows

Video

Catered vs self-catered rooms
Video

What to consider when applying for a room at York
Virtual tour

Virtual tour of Langwith accommodation

Band 4, shared bathroom, self-catered accommodation
Blog post

Accommodation: settling in as an international student

Find out how Emily from Hong Kong settled into her new accommodation at York.

Options

Atoms

  • news
    • title - the title of the news article (required)
    • category - the category the news article sits in, or an array of tags (optional)
    • author - the name (or linked name) of the author (optional)
    • publishDate - the publish date of the article (optional)
    • eventDate - the publish date of the article (optional)
    • teaser - a sentence describing the news article (required for news-excerpt, optional elsewhere)
    • label - an HTML string to go in a .c-label element (usually icon + label)
    • lead - a paragraph of text to introduce the article. Should not be replicated at the beginning of the article. (required for news-article, optional elsewhere)
    • license - the details of the license for use (optional)
    • thumbnail - the URL of the image to use as the thumbnail image (should be 280px x 280px (i.e. 140px for double density screens)) (required for news-listing, optional elsewhere)
    • poster - the URL of the image to use as the poster image (should be 2:1 ratio) (optional)
    • banner - the URL of the image to use as the banner image (should be 2:1 ratio) (optional)
    • content - an HTML string with the content of the news article (required for news-article, optional elsewhere)
    • link - the URL of the main article (required for _news-excerpt and news-listing, optional for news-article)

Molecules

  • news-list
    • atoms - an array of news-listing atoms