Photo of desk with computer monitor displaying Montclair State University website.

Homepage Band

Homepage Bands are the basic building blocks of homepage/full-width layouts, labeled as the Advanced template in the page editor. Every piece of content must be placed inside a band. Homepage bands have four optional attributes that can be used to format them as page content.

Attributes

Name Possible Values Required Notes
align left or right No Sets the position of the text.
class lt-gray, red, skewed-edge No lt-gray and red set the background color – both can be used in combination with skewed-edge
image URL to an image (starting with /) No If specified an image will be displayed to the left or the right of the text dependent on the align attribute.
scalable true or false No If set to true, the text and image will scale in proportion to one another. This produces smaller text on tablets but might be necessary to keep items aligned properly.

Layout Examples

Left aligned, skewed edge

example of homepage band with left aligned text, light grey background, and skewed edge image.

[[homepageband scalable="true" image="image link" class="lt-gray skewed-edge"]
text content[buttonrow][button]<a href="button link">Button Text Here</a>[/button][/buttonrow][/homepageband]]

Right aligned

example of homepage band with image to the left and text content to the right

[[homepageband class="lt-gray" align="right" scalable="true" image="image link here"]
Text content here

[button]<a rel="noopener noreferrer" href="button link here" target="_blank">Button Text Here</a>[/button]

[/homepageband]]

Code Sample (no image)

[[homepageband align="left" scalable="true"]

Place content inside here.

[/homepageband]]