xgd-home-hero

<xgd-home-hero>

Provides a hero Polymer 3 / lit-element display for a homepage that is clickable.

Styling

The following custom properties and mixins are available for styling.

Custom property	Description	Default
'--accent-color'	background color of the box	#999999
'--hero-text-color'	color of all text	#ffffff
'--app-primary-color'	color of the button	#002299
'--hero-font-size'	font size of banner title	1.2em
'--hero-message-font-size'	font size of the slot message	1.0em

Example:

<style is="custom-style">
  xgd-home-hero {
    width: 300px;
    height: 300px;
  }
</style>

<xgd-home-hero image="https://placeimg.com/300/300/animals?t=1526148877145"
                  banner="This is the Title" button-title="XGDFalcon" action="https://xgdfalcon.com">
                  This is a description of what the location is pointing to.
                  This is a description of what the location is pointing to.
</xgd-home-hero>

<script>
  window.addEventListener('xgd-request-state-change', function(event) {
    alert(event.detail.url);
  });
</script>

The component is licensed under the MIT License

License

Demo and doc are available on https://www.webcomponents.org/element/XGDElements/xgd-browser-tabs