xgd-home-hero | Vaadin

(no summary available)

Bower version npm version Published on webcomponents.org Build Status


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


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


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

<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.

  window.addEventListener('xgd-request-state-change', function(event) {

The component is licensed under the MIT License


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


Link to this version
ImportedReleased 12 May 2018MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install xgd-home-hero"@1.0.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.1


  • @polymer/lit-element#^0.5.1
  • @polymer/paper-button#^3.0.0-pre.19
  • @polymer/polymer#^3.0.0