Contact us Create app

Directory

← Back

xgd-home-hero

(no summary available)

Author

Rating

Links

Popularity

<100

Bower version npm version Published on webcomponents.org Build Status

<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

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/lit-element#^0.5.1
  • @polymer/paper-button#^3.0.0-pre.19
  • @polymer/polymer#^3.0.0
Released
2018-05-12
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

xgd-home-hero - Vaadin Add-on Directory

(no summary available) xgd-home-hero - Vaadin Add-on Directory
![Bower version](https://img.shields.io/bower/v/xgd-home-hero.svg) [![npm version](https://badge.fury.io/js/%40vaadin%2Fxgd-home-hero.svg)](https://badge.fury.io/js/xgd-home-hero) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/collection/XGDElements/xgd-home-hero) [![Build Status](https://travis-ci.org/XGDElement/xgd-home-hero.svg?branch=master)](https://travis-ci.org/XGDElement/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: ```html This is a description of what the location is pointing to. This is a description of what the location is pointing to. ``` The component is licensed under the [MIT License](LICENSE.md) ### License Demo and doc are available on https://www.webcomponents.org/element/XGDElements/xgd-browser-tabs
Online