<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 webcomponents.org - Discuss & share web components