HTML Templates for Design Modules

Layout Modules

Below are all of the layout modules, each with a brief description, a visual example, and a code snippet with a button to copy that snippet to your clipboard for easy pasting into another custom page or page element.

Each layout module also has a blue border for the outer container and green borders for any inner structure. These will not display on other pages, and only display here, along with some extra whitespace, to make it easier to observe and understand the structure of each module.

Lastly, each module has placeholder content (in parenthesis). This is to both show were content can go and also give you something to click or otherwise select in both code and design views of this page in Hub.

Full-width Block

To create a container that is the full width of the page, you can use either a DIV or SECTION HTML element without any class added at the root level of the page your working on.

Example

(Full width section)

<section class="layout-module">(Full width section)</section>

<div class="layout-module">(Full width section)</div>

Max-width Block

This container will be as wide as the header and be centered in the browser viewport. On tablet and mobile-sized screens, it will be full-width with some whitespace on either side.

Example

(Max width section)

<section class="maxwidth layout-module">(Max width section)</section>

Alternatively, if you already have a block on your page but want to make it max/fixed width instead of full width, you can just add the following class:

class="maxwidth"

Half & Half Block

This layout module will give you equal side-by-side blocks (which collapse to stack vertically on mobile and smaller screens). This module can be nested inside of others, and will fill the full width of it's container or parent element.

Example

(section 1)

(section 2)

<section class="halfsies layout-module">
    <div class="half-1">(section 1)</div>
    <div class="half-2">(section 2)</div>
</section>

Asymmetric Third Block

The "thirds" layout module gives you 2 asymmetric content blocks side-by-side, the first one being 1/3 the total width; the second 2/3. This module can be nested inside of others, and will fill the full width of it's container or parent element. On mobile, the 2 blocks will become full-width and stack on top of each other.

Example

(section 1)

(section 2)

<section class="third layout-module">
  <div class="third-1">(section 1)</div>
  <div class="third-2">(section 2)</div>
</section>

Asymmetric Third Block - Reversed

This module is almost exactly the same as the previous module, however the order of the blocks is reversed - with #2 displaying first, and #1 displaying 2nd.

Example

(section 1)

(section 2)

<section class="third reverse layout-module">
  <div class="third-1">(section 1)</div>
  <div class="third-2">(section 2)</div>
</section>

The remaining layout modules below, show as equal blocks in a single row on desktop and larger screens, but reflow on mobile and smaller screens to show fewer blocks per row over multiple rows.

Row of 4 Blocks

Four equally sized blocks in a single row on larger screens and desktop; two rows of two blocks each on smaller screens and mobile.

Example

(block 1)

(block 2)

(block 3)

(block 4)

<section class="row-of-4-blocks layout-module">
  <div>(block 1)</div>
  <div>(block 2)</div>
  <div>(block 3)</div>
  <div>(block 4)</div>
</section>

Row of 5 Blocks

Five equally sized blocks in a single row on larger screens and desktop; three rows of 2, 2, and 1 blocks on smaller screens and mobile.

Example

(block 1)

(block 2)

(block 3)

(block 4)

(block 5)

<section class="row-of-5-blocks layout-module">
  <div>(block 1)</div>
  <div>(block 2)</div>
  <div>(block 3)</div>
  <div>(block 4)</div>
  <div>(block 5)</div>
</section>

Row of 6 Blocks

Six equally sized blocks in a single row on larger screens and desktop; two rows of three blocks each on smaller screens and mobile.

Example

(block 1)

(block 2)

(block 3)

(block 4)

(block 5)

(block 6)

<section class="row-of-6-blocks layout-module">
  <div>(block 1)</div>
  <div>(block 2)</div>
  <div>(block 3)</div>
  <div>(block 4)</div>
  <div>(block 5)</div>
  <div>(block 6)</div>
</section>

Row of 7 Blocks

Seven equally sized blocks in a single row on larger screens and desktop; three rows of 3, 3, and 1 blocks on smaller screens and mobile.

Example

(block 1)

(block 2)

(block 3)

(block 4)

(block 5)

(block 6)

(block 7)

<section class="row-of-7-blocks layout-module">
  <div>(block 1)</div>
  <div>(block 2)</div>
  <div>(block 3)</div>
  <div>(block 4)</div>
  <div>(block 5)</div>
  <div>(block 6)</div>
  <div>(block 7)</div>
</section>

Row of 8 Blocks

Eight equally sized blocks in a single row on larger screens and desktop; three rows of 3, 3, and 2 blocks on smaller screens and mobile.

Example

(block 1)

(block 2)

(block 3)

(block 4)

(block 5)

(block 6)

(block 7)

(block 8)

<section class="row-of-8-blocks layout-module">
  <div>(block 1)</div>
  <div>(block 2)</div>
  <div>(block 3)</div>
  <div>(block 4)</div>
  <div>(block 5)</div>
  <div>(block 6)</div>
  <div>(block 7)</div>
  <div>(block 8)</div>
</section>

Content Modules

In addition to the layout modules above, we also have several content modules. Much like the layout modules, these all have default or placeholder content that can be selected and edited either via design or code modes in Hub.

These modules will always fill the space of whatever container or parent HTML element they are placed in.

Hero Banner

This hero banner features both an image and text that sits atop the image. Both are in the HTML for this module for easier editing via the Design View of Hub.

Example

Test text

<div class="banner-title-container content-module">
    <h1 class="banner-title">Page Title</h1>
  </div>

Hero Banner - Background image

This modules also consists of an image and text, however the image would be added via CSS as a background. This allows for more seemless/smooth responsive displays that react to the size of the screen but does require working on the code view.

Example

<div class="banner-title-container content-module">
    <h1 class="banner-title">Page Title</h1>
  </div>

Link Button

A link that looks like a button.

Example

Some link text

<div class="link-button content-module"><a href="#">Some link text</a></div>

Inline Icon & Text

This module is for displaying small graphics or icons with descriptive text/links to the right of those icons.

Example

Title text

Link text

<div class="inline-icon-and-text content-module">
      <div class="inline-icon"><img class="responsive" src="https://placehold.co/75x50/555/888/?text=FPO"></div>
      <div class="inline-text">
        <h4>Title text</h4>
        <p>Link text</p>
      </div>
    </div>

Linked Inline Icon & Text

Example

Title text

Link text

<a class="block-link" href="">
      <div class="inline-icon-and-text content-module">
        <div class="inline-icon"><img class="responsive" src="https://placehold.co/75x50/555/888/?text=FPO"></div>
        <div class="inline-text">
          <h4>Title text</h4>
          <p>Link text</p>
        </div>
      </div>
    </a>

Icon and Text

Example

Text

<div class="icon-and-title-block content-module">
    <img class="responsive" src="https://placehold.co/150/555/888/?text=FPO">
    <p>Text</p>
  </div>

Image & Text Block

Example

Text

<div class="image-and-title-block content-module">
      <img class="responsive" src="https://placehold.co/300/555/888/?text=FPO">
      <p>Text</p>
    </div>

Linked Image & Text Block

Example

Text

<a class="block-link" href="">
    <div class="image-and-title-block content-module"><img class="responsive" src="https://placehold.co/300/555/888/?text=FPO">
      <p>Text</p>
    </div>
  </a>

Image, Title, and Badge Block

Example

Text

New Arrival

<div class="image-title-badge-block content-module"><img class="responsive" src="https://placehold.co/300/555/888/?text=FPO">
      <p>Text</p>
      <p class="badge">New Arrival</p>
  </div>

Linked image, title, and badge

Example

Text

New Arrival

<a class="block-link" href="">
      <div class="image-title-badge-block content-module"><img class="responsive" src="https://placehold.co/300/555/888/?text=FPO">
        <p>Text</p>
        <p class="badge">New Arrival</p>
      </div>
    </a>

Image, Title, and Button

Example

Text

Some link text

<div class="image-title-button-block content-module"><img class="responsive" src="https://placehold.co/300/555/888/?text=FPO">
      <p>Text</p>
      <div class="link-button"><a href="#">Some link text</a></div>
    </div>

Title, Image, and Blurb

Example

(block title)

(block or image text block)

<div class="title-image-text-container content-module">
      <h4>(block title)</h4>
      <img src="https://placehold.co/600x400/333/fff/png">
      <p>(block or image text block)</p>
    </div>

Responsive video iframe

This module was initially created specifically for embedding YouTube videos in custom pages and page elements while still allowing for responsive changes based on the overall screensize. It should work with videos from other sources, by swapping out the video URL between the quotations marks after the SRC attribute on the IFRAME element.

Example

<div class="custom-video-container">
        <iframe 
                src="https://www.youtube.com/embed/CFGLoQIhmow?si=APFDRRI8Cwv_88-j" 
                width="560" 
                height="315" 
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                referrerpolicy="strict-origin-when-cross-origin" 
                allowfullscreen="">
        </iframe>
      </div>

The above code will allow a video to fill the width of whatever container it is inside of - so if it is inside of a full-width container it would take up the whole width of the page. If you'd like to add a little space to the left and right of the video, you can add the class "container-margin" after "custom-video-container", with a space between like so:

<div class="custom-video-container container-margin">
        <iframe 
                src="https://www.youtube.com/embed/CFGLoQIhmow?si=APFDRRI8Cwv_88-j" 
                width="560" 
                height="315" 
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                referrerpolicy="strict-origin-when-cross-origin" 
                allowfullscreen="">
        </iframe>
      </div>