<umd-hero> element

Installation

$ yarn add @universityofmaryland/hero

Basic Usage

Import the hero in your js if you bundle using a transpile with babel or typescript.

import '@universityofmaryland/hero';

HTML usage

<umd-hero source="/video.mp4" image="/placeholder.png" media-title="hero video">
  <div slot="text">
    <h1>Headline Example</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <a href="#" class="call-to-action">Learn More</a>
  </div>
</umd-hero>

Attribute options

1. image (REQUIRED) - Background image of placeholder image for the video - can be relative or absoulte path
2. media-title (REQUIRED) - accessibility text - string to communicate to users with assist technologies the message of the asset
3. source - video reference - can be relative or absoulte path
4. slide-in-time - animation time in milliseconds (defaults to 3000)
5. direction - placement of the text (defaults to right)
6. layout - [options: overlay & split] (defaults to overlay)

Advanced Usage

Split Layout - with video to the left

<umd-hero
  source="/video.mp4"
  image="/placeholder.png"
  media-title="hero video"
  layout="split"
  direction="left"
>
</umd-hero>

Styling

You can (and should) overwrite basic styling to fit your needs

umd-hero::part(section) {
  padding: 40px;
}

@media (min-width: 1024px) {
  umd-hero::part(section) {
    width: 40%;
    padding: 80px;
  }
}

[slot='text'] h1 {
  margin-bottom: 20px;
}

[slot='text'] p {
  margin-bottom: 20px;
}

[slot='text'] .call-to-action {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 20px;
  color: #fff;
  background-color: #e21833;
  transition: background 0.5s;
  text-decoration: none;
}

License

Distributed under the MIT license. See LICENSE for details.