Content Button | Content Blocks

A basic element that can handle switching between anchor and button tags, linking to trigger actions on the page, and making entire blocks clickable.

Examples

Anchor Link and Button Tag

An example demonstrating a basic "content-button". When an href is not provided, the rendered element is a button.

Source

HTML

<content-button style-class="button" href="#">Standard Link</content-button>
<content-button style-class="button">No Href</content-button>

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

CSS

.button {
  padding: 5px 10px;
  border: 1px solid blue;
  color: black;
}

Custom Event Listener

Attach your own event listener to perform custom actions, i.e. launch a quickshop.

Source

HTML

<content-button style-class="button" id="clickButton">Click Me!</content-button>
<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>
<script>
  let button = document.getElementById('clickButton');
  button.addEventListener('click', event => {
    alert('Clicked!');
  });
</script>

CSS

.button {
  padding: 5px 10px;
  border: 1px solid blue;
  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-button href="#" clickable-block="true">
  <content-hero-block>
    <content-image slot="media" src="https://www.aveda.com/media/export/cms/bambuser/Renee-hp.jpg"></content-image>
    <content-text-block slot="content" vertical-alignment="center">
      <content-spacing-wrapper left-offset="4" right-offset="4" top-offset="4" bottom-offset="4" max-width="100|50" horizontal-alignment="left" text-align="center">
        <content-spacing-wrapper top-offset="2">
          <content-line>This is an anchor link.</content-line>
        </content-spacing-wrapper>
      </content-spacing-wrapper>
    </content-text-block>
  </content-hero-block>
</content-button>

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

CSS

content-image {
  max-height: 250px;
}

Interact With Other Content Elements

In this example, the first link activates a content overlay that takes over the full screen. The second button activates a content overlay which reveals itself in place.

Source

HTML

<content-button style-class="button" href="#heroVideoFullscreen">Full Screen Video</content-button>
<content-button style-class="button" href="#heroVideoFullscreenMini">Reveal Video</content-button>
 
<content-overlay id="heroVideoFullscreen" full-screen="true">
  <script slot="content" type="text/template">
    <content-video autoplay="true" fit-container="true" width="640" height="190" src="https://www.youtube.com/embed/XwwNwyQT8Dc"></content-video>
  </script>
</content-overlay>

<content-overlay id="heroVideoFullscreenMini" full-screen="false">
  <script slot="content" type="text/template">
    <content-video width="640" height="190" src="https://www.youtube.com/embed/XwwNwyQT8Dc"></content-video>
  </script>
</content-overlay>

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

CSS

.button {
  padding: 5px 10px;
  border: 1px solid blue;
  color: black;
}
html, body {
  height: 100%;
}