Page Modules and Custom Components

The purpose of this page is to demonstrate the options available for web content. The options may vary depending on the page template you are working with.

Jump to section:

• Alerts
• Button
• Call To Action (CTA)
• Callouts
• Heroes
• Modal
• Promo Box Grid
• Videos

Alerts

Alerts generally appear at the top of a page to draw attention to a temporary message.

Notes for Web Team

• There is a checkbox option to include the alert on all child pages
• There four color options for the alert box:
  1. Alert (Gold) - this is the light-orange box used in most places
  2. Neutral (Blue)
  3. Default (Red)
  4. Warning (Orange)

Button

Standard Button

External Link Button

Notes for Web Team

The class for primary button: class="btn btn-primary"

The external button link icon is added via CSS.

a.btn[target="_blank"]::after {
    font-family: "Font Awesome 6 Pro";
    font-size: 10px;
    padding-left: 5px;
    font-weight: 600;
    content: "\f35d";
}

Callouts

Callouts are stylized boxes that fall in-line with text to highlight features. The boxes can fall on the left or right side of text.

The callout has a standard width. The height will fit to the text inside it.

Callout Option 1

Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Donec a turpis quis velit pretium volutpat. Aenean quis ligula tempus, mattis quam ac, luctus lorem. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis. 

Callout Option 2

Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Donec a turpis quis velit pretium volutpat. Aenean quis ligula tempus, mattis quam ac, luctus lorem. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis.

div.callout {
     background-color: #457aa5;
     color: #ffffff;
     border: none;
     font-style: normal;
}

Callout Option 3

Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Donec a turpis quis velit pretium volutpat. Aenean quis ligula tempus, mattis quam ac, luctus lorem. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis.

div.callout {
     background: url(/-/media/Project/Nyserda/Images/#);
     background-size: cover;
     box-shadow: inset 0px 0px 0px 3000px rgb(255 255 255 / 85%);
}

Callout Option 4 - Embed Video

Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Donec a turpis quis velit pretium volutpat. Aenean quis ligula tempus, mattis quam ac, luctus lorem. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis. Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Donec a turpis quis velit pretium volutpat. Aenean quis ligula tempus, mattis quam ac, luctus lorem. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis.

Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis. Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque. Fusce commodo placerat risus quis condimentum. Aliquam luctus tortor neque, malesuada ullamcorper velit ultrices quis. Sed maximus tempor mauris, in tempus urna condimentum non. Donec elit nunc, dignissim at diam vel, dictum luctus neque.

Notes for Web Team

Callout div tag should be placed immediately before the text you want it next to.

• Use div.callout in CSS to target callout styles.
• Change class callout-right to callout-left to make it appear on the left side of text.
• Remove class shadow-lg if using a background image

CSS Edits

The theme style sets a font size on .rich-text p. If you use the <p> tag in your callout, you can fix the font size with:

.callout p { font-size: 1.9rem; margin-bottom: 0px;}

.callout a.btn { margin-top: 1rem;}

Use the class .mb-0 on the last p tag in the callout as an alternative to setting the margin-bottom property.

Heroes

Heroes are like billboards - large banner images at the top of a page and often included a headline and sub-heading text. The background image should be selected with care to the text style you want to incorporate from the options below.

The subtitle and description fields are optional. 

Major Differences

There are a number of hero modules. The two shown here are the most commonly used.

• Hero 2024 NYSERDA: This should be used on most sub-pages within the NYSERDA site. The image size is 1000x400px.
• Hero Microsite: Has two text fields, title & subtitle. Includes link. Height will expand to fit all text.
  
  • Image size: 1000x243px(minimum height) recommend height 345-500px.
  • Height is determined by inner copy. Image will stretch to fit.
• Hero Enhanced (Home Page Hero): Used only on the NYSERDA Home page
  •  Image size: Desktop 1002x536px, Mobile 704x1232px (allows for responsive resizing)

Modal

A pop-up box with a dimmed the screen behind it.

Sample: Click this link to launch a modal.

Notes for Web Team

A modal consists of two parts:

1. Modal module added to the page.
2. A link or button used to launch the modal. The ID should match the ID of the modal you create for the page. Snippet below.

<a role="button" href="#ModalID" data-toggle="modal">Modal link text</a>

If the modal contains an image, use class="img-fluid" for responsive image.

Promo Box

This grid can be 2 or 3 columns.

The box can have a title as shown below but is not required. No other text can be placed between the title and the articles/tiles in this box. The 2-column layout below shows the promo box without a background color.

Thumbnail Image Size:

• 520x232px

This size allows for responsive sizing and use with 2- or 3-column layout.

Notes for Web Team

• The standard background color is RetrofitNY-LightBlue. This is available in the Promo Box Grid Module content settings.
• Articles are created in NYSERDA>Site Content>Common>Microsite>Promo Box Articles
  • Duplicate an existing article and update the information.
  • Article naming convention: start with the page it is going on.

Videos

Embed YouTube Videos

Copy embed code from YouTube "Share" options. It will look something like this:

Enable Tracking

When embedding a YouTube video, include the tracking script in one of two ways:

1. Add ?enablejsapi=1 in the url
2. OR add enablejsapi="true" as an attribute in the iframe

Allow Fullscreen

The embed code from YouTube includes the attribute allowfullscreen. This does not have a set value so it will be removed by Sitecore upon saving. You can add it one of two ways:

1. Set allowfullscreen="true"
2. OR add fullscreen to the allow attribute list, like allow="accelerometer; autoplay;....; fullscreen"

Responsive with Bootstrap

Avoid setting width and height manually for the iframe. Instead, put the iframe inside a <div> and apply Bootstrap classes for responsive sizing.

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="#"></iframe>

</div>

End Result

<div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/54BoH1ZZmnA?si=1bFdxeKfziDaoIuG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" enablejsapi="true"></iframe>
</div>

Call To Action (CTA)

The CTA can be used anywhere in a page but is typically at the bottom before the site footer. Depending on the page template this is used on, it may or may not have borders. Shown below with a white background and blue background.

The font sizes in the CTA cannot be adjusted.

Notes for Web Team

Blue background color option is RetrofitNY-LightBlue

The CTA will have borders on microsite pages. To add borders on non-microsite page:

.row.retrofitny.callToAction {
    border: 1px solid #e1ebe9;
}