text: export class HeaderComponent extends HTMLElement {
  
  	constructor () {
  		super();
  		this.root = this.attachShadow({ mode: 'open' });
  	}
  
  	render() {
  		this.root.innerHTML = this.getStyle() + this.getTemplate();
  	}
  
  	connectedCallback() {
  		this.render();
  	}
  
  	getTemplate() {
  
  		const AppRedirect = 'https://michaellalavedramunayco.github.io/flexbox-grid-system/';
  		const gitHubRedirect = 'https://github.com/MichaellAlavedraMunayco/flexbox-grid-system';
  
  		return `<header class="header">
  
  			<div class="header-logo">
  				<ui-logo redirect="${AppRedirect}" source="app-white" width="117"
  				height="36"></ui-logo>
  			</div>
  
  			<div class="header-actions">
  				<ui-logo redirect="${gitHubRedirect}" source="github" title="GitHub" width="25" height="25"> GitHub </ui-logo>
  			</div>
  
  		</header>`;
  	}
  
  	getStyle() {
  
  		return `<style>
  			header.header {
  				margin: 0;
  				border: 0;
  				font: inherit;
  				vertical-align: baseline;
  				align-items: center;
  				background-color: var(--teal-500);
  				color: var(--base-white);
  				display: flex;
  				gap: 10px;
  				flex-wrap: wrap;
  				font-size: 14px;
  				justify-content: space-between;
  				line-height: 1.5;
  				padding: 16px;
  				z-index: 32;
  				min-height: 40px;
  			}
  
  			div.header-logo,
  			div.header-actions {
  				display: flex;
  				justify-content: flex-start;
  				align-items: center;
  				position: relative;
  			}
  
  			div.header-actions {
  				justify-content: flex-end;
  			}
  		</style>`;
  	}
  }
  
  window.customElements.define('ui-header', HeaderComponent);