<!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>