<link rel="import" href="/public/components/polymer/polymer.html">
<link rel="import" href="/public/components/paper-material/paper-material.html">

<dom-module id="my-card">
  <style>
    :host {
      font-family: 'Roboto', sans-serif;
      font-size: 2em;
    }
    .url-card {
      width: 100%;
      min-height: 1.25em;
      margin-bottom: 0.25em;
    }
    ::content .url {
      width: 90%;
      float: left;
      margin: 0.1em 0 0 0.5em;
    }
    ::content .url a {
      text-decoration: none;
    }
    ::content .shares {
      width: 6%;
      float: left;
      margin: 0.1em 0 0 0.5em;
      font-weight: bold;
    }
  </style>
  <template>
    <paper-material class="url-card">
      <content></content>
    </paper-material>  
  </template>

  <script>
    Polymer({
      is: 'my-card'
    });
  </script>
</dom-module>

<link rel="import" href="/public/components/polymer/polymer.html">
<link rel="import" href="/public/components/paper-material/paper-material.html">

<dom-module id="my-card">
  <style>
    :host {
      font-family: 'Roboto', sans-serif;
      font-size: 2em;
    }
    .url-card {
      width: 100%;
      min-height: 1.25em;
      margin-bottom: 0.25em;
    }
    ::content .url {
      width: 90%;
      float: left;
      margin: 0.1em 0 0 0.5em;
    }
    ::content .url a:link,
    ::content .url a:visited,
    ::content .url a:hover,
    ::content .url a:active {
      text-decoration: none;
      color: crimson;
    }
    ::content .shares {
      width: 6%;
      float: left;
      margin: 0.1em 0 0 0.5em;
      font-weight: bold;
    }
  </style>
  <template>
    <paper-material class="url-card">
      <content></content>
    </paper-material>  
  </template>

  <script>
    Polymer({
      is: 'my-card'
    });
  </script>
</dom-module>

Change title color and link states
Change title color and link states
