dbarjs/name-roles.html

## name-roles.html
<!DOCTYPE html>
<html lang="">
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script src="dist/js/villa.min.js"></script>
<link rel="stylesheet" href="dist/css/villa.min.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="dist/css/material-colors.css"/>
<link rel="stylesheet" type="text/css" href="dist/css/villa-cross.min.css"/>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/html5shiv-printshiv.js"></script>
<script src="dist/js/classList.min.js"></script>
<![endif]-->

<style>

	/*
	popover.css
	*/

	/* Popover */

	.Popover {
		background-color: red;
		width: 100%;
		height: 16em;
	}

	.Popover--footer {
		background-color: blue;
	}

	/* Popover background */

	.Popover-background {
		background-color: #000000;
	}

	.Popover--red .Popover-background {
		background-color: red;
	}

	/* Popover header */

	.Popover-header {
		height: 1em;
	}

	.Popover--red .Popover-header {
		color: #ffffff;
	}

	.Popover--footer .Popover-header {
		height: 1.5em;
	}

	/* Popover button */

	.Popover-button {
		display: block;
	}

	.Popover.is-disable .Popover-button {
		display: none;
	}

	/*
	popover-title.css
	*/

	/* Popover Title */

	.PopoverTitle {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}

	.PopoverTitle--centered {
		-webkit-justify-content: center;
		justify-content: center;
	}

	/* Popover Title name */

	.PopoverTitle-name {
		text-align: right;
	}

	.PopoverTitle--centered .PopoverTitle-name {
		text-align: center;
	}

	/* Popover Title nick */

	.PopoverTitle-nick {
		font-size: .625em;
	}

	.Popover--footer .PopoverTitle-nick {
		font-size: .5em;
	}

	/* footer.css */

	.Footer-popover {
		align-self: center;
	}

</style>

<body>

<div class="Popover"></div>

<div class="Footer">

	<div class="Footer-popover Popover Popover--footer">

		<div class="Popover-inner">

			<div class="Popover-header">

				<div class="PopoverTitle PopoverTitle--centered">

					<span class="PopoverTitle-name"></span>
					<span class="PopoverTitle-nick"></span>

				</div>

			</div>

			<div class="Popover-button"></div>

		</div>

	</div>

</div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="">
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
	<script src="dist/js/villa.min.js"></script>
	<link rel="stylesheet" href="dist/css/villa.min.css"/>
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="dist/css/material-colors.css"/>
	<link rel="stylesheet" type="text/css" href="dist/css/villa-cross.min.css"/>
	<script src="dist/js/html5shiv.js"></script>
	<script src="dist/js/html5shiv-printshiv.js"></script>
	<script src="dist/js/classList.min.js"></script>
	<![endif]-->

	<style>

	/*
	popover.css
	*/

	/* Popover */

	.Popover {
	background-color: red;
	width: 100%;
	height: 16em;
	}

	.Popover--footer {
	background-color: blue;
	}

	/* Popover background */

	.Popover-background {
	background-color: #000000;
	}

	.Popover--red .Popover-background {
	background-color: red;
	}

	/* Popover header */

	.Popover-header {
	height: 1em;
	}

	.Popover--red .Popover-header {
	color: #ffffff;
	}

	.Popover--footer .Popover-header {
	height: 1.5em;
	}

	/* Popover button */

	.Popover-button {
	display: block;
	}

	.Popover.is-disable .Popover-button {
	display: none;
	}

	/*
	popover-title.css
	*/

	/* Popover Title */

	.PopoverTitle {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	}

	.PopoverTitle--centered {
	-webkit-justify-content: center;
	justify-content: center;
	}

	/* Popover Title name */

	.PopoverTitle-name {
	text-align: right;
	}

	.PopoverTitle--centered .PopoverTitle-name {
	text-align: center;
	}

	/* Popover Title nick */

	.PopoverTitle-nick {
	font-size: .625em;
	}

	.Popover--footer .PopoverTitle-nick {
	font-size: .5em;
	}

	/* footer.css */

	.Footer-popover {
	align-self: center;
	}

	</style>

	<body>

	<div class="Popover"></div>

	<div class="Footer">

	<div class="Footer-popover Popover Popover--footer">

	<div class="Popover-inner">

	<div class="Popover-header">

	<div class="PopoverTitle PopoverTitle--centered">

	<span class="PopoverTitle-name"></span>
	<span class="PopoverTitle-nick"></span>

	</div>

	</div>

	<div class="Popover-button"></div>

	</div>

	</div>

	</div>

	</body>

	</html>