HB01 Hero Board

This piece is both an in-page navigation widget and a container for other hb01 components. Used on the top of the page as the first item in a full width Content Wrapper.

This variation contains a list of anchor links that reference hb01v1, hb01v2 or hb01v3 compoments that are hidden on the page . The links may not link off the page too another page.

The anchor links correspond to unique ID's that are given to the nested hb01v1, hb01v2 or hb01v3 compoments, so a link will look like...
<li><a href="#foo">Foo Stuff</a></li>

and the hb01v1, hb01v2 or hb01v3 will have a matching ID, without the "#", like...
<div class="hb1 hb1v1 hb1panel" id="foo">

hb01v1, hb01v2 or hb01v3 components MUST be inserted where the CONTENT PLACEHOLDER comment is shown. They should be insterted one after another in the order in which they are listed in the list above.

This example adds the "nobg" class to the outside DIV so that the hb01v4 can be used and users will see a white backgroung when the panels fade from one to another.

This is a standard variation of the hero panel. It consist of a large background image, a video thumbnail with links and call to action button and a list of links.

In this component both the video block (div class="hb1w3") and list of links block (div class="hb1w4") must be positioned on the page manually by the publisher. This is accomplished with an inline style that defines the top and left coordinates each object, i.e. style="top:170px;left:28px". Due to the fixed width of these two object the left value should not exceed 440px. The top value should take into consideration the height of the image and the height of the content within since these blocks will not push content following this component down the page only the large image can do that.

In this variation the video thumbnail should be a png image that is 112px wide. The height may vary, but the width may not. If a narrower image is needed use a transparent left margin in the image file itself to keep the image at 112px wide.

The call to action button in the video block has an arrow icon by default but can also use a download icon by adding the class downbttn to the strong tag.

The optional list of links should be short and uncluttered.

At times a second block of text can be added to video block, this example illustrates that along with the optoinal list of removed for simplicity.

Note that this component also illustrates the downbttn class in use on the call to action button.

When the large background image is too dark for black text the "alttxt" class can be aded to the div class="hb1w3" object to change the text to a lighter color.

This is a alternate variation of the hero panel. It consist of a large background image and a thumbnail image with text running horizontally.

In this component the video block (div class="hb1w3") must be positioned on the page manually by the publisher. This is accomplished with an inline style that defines the top and left coordinates each object, i.e. style="top:170px;left:28px". Due to the fixed width of this object the left value should not exceed 300px. The top value should take into consideration the height of the image and the height of the content within since these blocks will not push content following this component down the page only the large image can do that.

In this variation the video thumbnail should be a png image that is 80px wide. The height may vary, but the width may not. If a narrower image is needed use a transparent left margin in the image file itself to keep the image at 80px wide.

The call to action button in the video block has an arrow icon by default but can also use a download icon by adding the class downbttn to the strong tag.

When the large background image is too dark for black text the "alttxt" class can be aded to the div class="hb1w3" object to change the text to a lighter color.

Use inside a hb01v0 to display a panel of content, or after d07v0 or d07v1 to create a unique tabbed background for hero content.

Use inside a hb01v0 (example x1) to display a panel of content, or after d07v0 or d07v1 to create a unique tabbed background for hero content.