demo-header.html

<link rel="import" href="../polymer/polymer.html">

<dom-module id="demo-header">
<style>
		header {
			max-width: 790px;
			background-color: #FFF;
			padding: 1em;
			margin: 1em auto;
			box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
		}
		.navbar {
			background-color: #EEE;
			border-radius: 5px
		}
		.menubutton {
			display: inline-block;
			padding: 1em 2em;
			color: #000;
			border-right: 1px solid #AAA;
			text-decoration: none;
		    text-shadow: 1px 1px 0 #FFF;
		}
		.githubbutton {
			border-left: 1px solid #AAA;
		}
</style>
<template>
	<header>
        <h1>&lt;leaflet-map&gt;</h1>
        <p>Leaflet map as web component.</p>

		<div class="navbar">
			<a class="menubutton demobutton" href="https://leaflet-extras.github.io/leaflet-map/demo.html">Demo</a>
			<a class="menubutton apidocbutton" href="https://leaflet-extras.github.io/leaflet-map/doc.html#leaflet-map">API</a>
			<a class="menubutton pluginbutton" href="https://leaflet-extras.github.io/leaflet-map/plugins.html">Plugins</a>
			<a class="menubutton downloadbutton" href="https://github.com/leaflet-extras/leaflet-map/releases/download/v1.2.0/leaflet-map-1.2.0.zip">Download</a>
			<a class="menubutton githubbutton" href="https://github.com/leaflet-extras/leaflet-map/">Github</a>
		</div>
	</header>		
</template>
</dom-module>
<script>
	Polymer({
		is: 'demo-header'
	});
</script>