Content Hero Block | Content Blocks

Examples

Standard Hero Block

Showing a hero block with text and CTA.

Source

HTML

<content-hero-block>
  <content-image slot="media" src="https://www.aveda.com/media/export/cms/offer_landing_page/FY21/03_19_auto_litres20_Desktop.jpg"></content-image>
  <content-text-block slot="content" style-class="black|white" vertical-alignment="center">
    <content-spacing-wrapper max-width="100|55|55|45" horizontal-alignment="left|right" text-align="left|center">
      <content-line style-class="text--large" max-width="100|50">Last day! Enjoy</content-line>
      <content-line style-class="text--medium|text--large" max-width="100|50">50% off Your Order!</content-line>
      <content-spacing-wrapper top-offset="3">
        <content-button style-class="button button--dark|button button--transparent" href="#">SHOP NOW</content-button>
      </content-spacing-wrapper>
    </content-spacing-wrapper>
  </content-text-block>
</content-hero-block>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

content-video {
  max-width: 700px;
  margin: auto;
}

.button {
  padding: 10px 20px;
}

.button--dark {
  background: black;
  color: white;
}

.button--transparent {
  background: transparent;
  color: white;
  border: 1px solid white;
}

.text--large {
  font-size: 2rem;
}
.text--medium {
  font-size: 1.5rem;
}

Background Video

Showing a hero block that uses a video as the media asset.

Source

HTML

<content-hero-block>
  <content-image slot="media" src="https://www.clinique.com/media/export/cms/2102_assets/S21_CCR_ServiceModule_dt@1.5x_reduced.mp4"></content-image>
  <content-text-block slot="content" style-class="black|white" vertical-alignment="top">
    <content-spacing-wrapper left-offset="4" top-offset="4" bottom-offset="4" max-width="100|70" horizontal-alignment="left|center" text-align="left">
      <content-line style-class="text--large" max-width="100">Enjoy the Video</content-line>
    </content-spacing-wrapper>
  </content-text-block>
</content-hero-block>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.text--large {
  font-size: 6rem;
  color: black;
}

Clickable Block

This example demonstrates the clickableBlock property. This is useful when you want to make an entire block of content clickable.

Source

HTML

<content-hero-block>
  <content-overlay target="#" id="contentVideoOverlayPromo" full-screen="false">
    <script slot="content" type="text/template">
      <content-video fit-container="true" width="640" height="190" src="https://www.youtube.com/embed/XwwNwyQT8Dc"></content-video>
    </script>
  </content-overlay>
  <content-image slot="media" src="https://www.aveda.com/media/export/cms/offer_landing_page/FY21/03_19_auto_litres20_Desktop.jpg"></content-image>
  <content-text-block slot="content" style-class="black|white" vertical-alignment="center">
    <content-spacing-wrapper horizontal-alignment="left|right" max-width="100|50" text-align="left|center">
      <content-line style-class="text--large" >About</content-line>
      <content-line style-class="text--medium|text--large">Watch our promotional video</content-line>
      <content-spacing-wrapper top-offset="3">
        <content-button style-class="button button--dark|button button--transparent" href="#contentVideoOverlayPromo">WATCH NOW</content-button>
      </content-spacing-wrapper>
    </content-spacing-wrapper>
  </content-text-block>
</content-hero-block>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.button {
  padding: 10px 20px;
}

.button--dark {
  background: black;
  color: white;
}

.button--transparent {
  background: transparent;
  color: white;
  border: 1px solid white;
}

.text--large {
  font-size: 2rem;
}
.text--medium {
  font-size: 1.5rem;
}