News

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"
    }
  ]
}