<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../bower_components/polymer/polymer.html”> <link rel=“import” href=“../bower_components/iron-flex-layout/iron-flex-layout.html”>

<dom-module id=“article-headline”>

<template>

  <style>

    :host {
      @apply(--layout-vertical);
      text-decoration: none;
      font-size: 22px;
      line-height: 32px;
    }

    .image {
      @apply(--layout-flex);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    .title {
      height: 56px;
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      padding: 0 8px;
      text-align: center;
      letter-spacing: 0.8px;
      color: #fff;
    }

  </style>

  <div class="image" style$="background-color: {{article.primaryColor}}; background-image: url('{{article.image}}');"></div>
  <div class="title" style$="background-color: {{article.secondaryColor}};">{{article.title}}</div>

</template>

<script>

  Polymer({

    is: 'article-headline',

    extends: 'a',

    properties: {

      article: Object

    }

  });

</script>

</dom-module>