<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/1.0/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="name-card.html">
  </head>
  <body>
    <name-card name="Nam Hoai Vo" description="Front-End Developer"></name-card>
  </body>
</html>
<link rel="import"
      href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">

<dom-module id="name-card">
    <template>
        <div class="name-card">
            <p class="name">{{name}}</p>
            <p class="description">{{description}}</p>
        </div>

        <style>
            .name-card {
                padding: 16px;
                border: 1px solid #616161;
            }

            .name-card > .name {
                font-size: 16px;
                font-weight: 600;
                color: #212121;
            }

            .name-card > .description {
                font-size: 12px;
                font-weight: 400;
                color: #616161;
            }
        </style>
    </template>

    <script>
        Polymer({
            is: "name-card",
            properties: {
                name: {
                    type: String,
                    value: 'Anonymous'
                },
                description: {
                    type: String,
                    value: 'No comment'
                }
            }
        });
    </script>
</dom-module>