tripod-hero-marquee is an element for displaying a hero image/video/graphic/color overlaid with text.
It leaves the styling of the element and any contents to external styles, and provides a collection of classes to position the content you pass in using flexbox (with support also included for CSS Grid Positioning as it gains more browser support!).
The component uses Shadow DOM v0 content elements as a sort of placeholder for you
to add your own markup to be rendered within the element.
All other content is distributed in a .hero-content container in the Shadow DOM.
With this approach, tripod-hero-marquee does the work of placing your content in the element,
while external or custom styles can be used to match style with the rest of your site.
Example: Use the tripod-hero-marquee
<tripod-hero-marquee>
<div class="hero-background" id="background"></div>
<h2 class="hero-header">Headers, button, and background all slotted in from light DOM.</h2>
<h3 class="hero-subheader">You can slot in all kinds of elements. They inherit their styles from the outside.</h3>
<a href="http://engineering.photoshelter.com/tripod-hero-marquee" target="_blank" class="hero-cta">More info in the docs</a>
</tripod-hero-marquee>| Custom property | Description | Default |
|---|---|---|
--tripod-hero-content-padding |
Padding around the slotted in content | 50x |
--hero-content-grid-rows |
Defines the CSS Grid rows for use with grid layout | 1fr 1fr 1fr |
--hero-content-grid-columns |
Defines the CSS Grid columns for use with grid layout | 1fr 1fr 1fr |
--hero-header-styles |
Style mixin for the header in mobile view | none |
--hero-header-desktop-styles |
Style mixin for the header in desktop view | none |
--hero-subheader-styles |
Style mixin for the subheader in mobile view | none |
--hero-subheader-desktop-styles |
Style mixin for the subheader in desktop view | none |
--hero-cta-styles |
Style mixin for the cta button | none |
This is an element generated by Generator Polymer Init Element Scaffold