The news component is used on serveral sections of the website thats built using box components.
The most recent news item has a thicker border and slighlty larger font size than older news items.
<div class="container">
<div class="grid">
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime=14.07.2017>14.07.2017</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box">
<h1 class="heading heading--compact">
Listing: New ETF: db x-trackers
</h1>
Trading Model: BXQ1, Segment: Swissfunds First trading day: 19.07.2017
</a>
</div>
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime=07.06.2017>07.06.2017</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box box--minimal">
<h1 class="heading heading--compact heading--small">
Listing: 2 New ETFs: db x-trackers II
</h1>
Trading Model: BXQ1, Segment: Swissfunds First trading day: 12.06.2017
</a>
</div>
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime=05.05.2017>05.05.2017</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box box--minimal">
<h1 class="heading heading--compact heading--small">
Börse BX Swiss startet Segment Swissfunds mit der ETF-Kotierung von 25 db x-trackers
</h1>
Segment Swissfunds
</a>
</div>
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime=30.03.2017>30.03.2017</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box box--minimal">
<h1 class="heading heading--compact heading--small">
Listing: db x-trackers II EUROZONE GOVERNMENT BOND UCITS ETF
</h1>
ISIN: LU0290355717 - Symbol: XGLE
</a>
</div>
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime=02.06.2016>02.06.2016</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box box--minimal">
<h1 class="heading heading--compact heading--small">
New listing
</h1>
New listing - ISIN: DK0060094928 DONG Energy A/S First trading day: 20.06.2016
</a>
</div>
</div>
</div>
<div class="container">
<div class="grid">
{{#each news}}
<div class="cell cell--1 cell--small-1/3">
<div class="box">
<time datetime={{date}}>{{date}}</time>
</div>
</div>
<div class="cell cell--1 cell--small-2/3">
<a href="#" class="box{{#unless @first}} box--minimal{{/unless}}">
{{#if @first}}
{{> @heading label=title modifier="heading--compact"}}
{{else}}
{{> @heading label=title modifier="heading--compact heading--small"}}
{{/if}}
{{excerpt}}
</a>
</div>
{{/each}}
</div>
</div>
{
"news": [
{
"date": "14.07.2017",
"title": "Listing: New ETF: db x-trackers",
"excerpt": "Trading Model: BXQ1, Segment: Swissfunds First trading day: 19.07.2017"
},
{
"date": "07.06.2017",
"title": "Listing: 2 New ETFs: db x-trackers II",
"excerpt": "Trading Model: BXQ1, Segment: Swissfunds First trading day: 12.06.2017"
},
{
"date": "05.05.2017",
"title": "Börse BX Swiss startet Segment Swissfunds mit der ETF-Kotierung von 25 db x-trackers",
"excerpt": "Segment Swissfunds"
},
{
"date": "30.03.2017",
"title": "Listing: db x-trackers II EUROZONE GOVERNMENT BOND UCITS ETF",
"excerpt": "ISIN: LU0290355717 - Symbol: XGLE"
},
{
"date": "02.06.2016",
"title": "New listing ",
"excerpt": "New listing - ISIN: DK0060094928 DONG Energy A/S First trading day: 20.06.2016"
}
]
}