Skip to Content

Hero Module

H1 Header (Optional)

This Web Module Guide is designed to walk Craft CMS users through the Craft modules available for IND.com and also the web design standards set around the new website design and functionality. For questions on Craft, these modules or web standards, please contact your internal website Admins. 

The H1 Header in this field is optional. In some instances, this will be the page name and the Hero Module (shown above this block) will display the page header. If that is not the case, H1 Header can be used in this field to display the title. 

This section is the standard body field that is used when a left side navigation is present on the page. You can bold, italicize and hyperlink text in this field. 

In general, it is good to keep the following global items in mind when using Craft and these modules: 

  • When hyperlinking text, remember that an internal link should open in the same tab and an external link or asset download should open in a new tab. 
  • When stacking modules on a page, background colors should alternate from white to either color, pattern or image. 

H2 Header 

This is a Content Block Module. Content Block Modules use an H2 Header for title content. You can bold, italicize and hyperlink text in this field. Content Block Modules can use a white, color, pattern or image background. This example uses an image background.  

Buttons are available in this module and are optional. If you choose to use a button, it will look and function as the example below. 

Button Title

H2 Header 

This is a Content Block Module set to left align. This feature of the Content Block Module should be used when there is a lot of text or text includes some kind of bulleted or numbered list of items. 

  • List Item 
  • List Item 
  • List Item 

Button Title

H3 Header 

This is a Column Module. Column Modules use an H3 Header for title content. You can bold, italicize and hyperlink text in this field. 

Buttons are available in this module and are optional. If you choose to use a button, it will look and function as the example below. 

Button Title

H3 Header 

Column Modules with two columns can use a white, color, pattern or image background. This example uses a pattern background with column separator (the vertical gray line between the columns). 

When using the Column Module, it is important to keep content brief. Utilize the CTA button to direct users to additional content. 

Button Title

H3 Header 

This is a Column Module. Column Modules use an H3 Header for title content. You can bold, italicize and hyperlink text in this field. 

Button Title

H3 Header 

Column Modules with three columns can use a white, color, pattern or image background. This example uses a pattern background with column separator (the vertical gray line between the columns). 

Button Title

H3 Header 

When using the Column Module, it is important to keep content brief. Utilize the CTA button to direct users to additional content. 

Button Title

H3 Header 

This is a Column Module. Column Modules use an H3 Header for title content. You can bold, italicize and hyperlink text in this field. 

Button Title

H3 Header 

Column Modules with three columns can use a white, color, pattern or image background. This example uses a color background with no separator. 

Button Title

H3 Header 

When stacking Column Modules on a page, these should be left aligned vs. centered (shown above) and show not include a column separator. 

Button Title

H2 Header 

This is an Accordion Module. Accordion Modules use an H2 Header for title content. You can bold, italicize and hyperlink text in this field.  

Accordion Modules can use a white, color or pattern background. It is highly recommended that images NOT be used as backgrounds in this module. This example uses the pattern background. 

Accordion Title

H3 Header 

This is an accordion within the Accordion Module. The accordions use an H3 Header for title content. You can bold, italicize and hyperlink text in this field.  

Accordion Title

H3 Header 

This is an accordion within the Accordion Module. The accordions use an H3 Header for title content. You can bold, italicize and hyperlink text in this field.  

H2 Header 

This is a Slider Module. The Slider Module uses an H2 Header for title content. You can bold, italicize and hyperlink text in this field. 

The Slider Module is designed for multiple slides. It is recommended that no more than 3-4 slides are included in each Slider Module. 

Button Title

H2 Header

This is a Slider Module. The Slider Module uses an H2 Header for title content. You can bolditalicize and hyperlink text in this field. 

The Slider Module is designed for multiple slides. It is recommended that no more than 3-4 slides are included in each Slider Module. 

Button Title

H2 Header 

This is a Table Module. Table Modules use an H2 Header for title content. You can bolditalicize and hyperlink text in this field. 

Table Modules can use a white, color or pattern background. It is highly recommend that this module NOT use an image background. This example uses a white background.

Header 1Header 2Header 3
FieldFieldField
FieldFieldField

The Table Module includes an outro text field and content for this field goes here. You can bolditalicize and hyperlink text in this field. 

Video Module Headline

Video Module Subheading

H4 Header

This is a Video Module. The Video Module Headline field is automatically set to use an H2 Header and the Video Subheading field is set to use an H3 Header. Headers included in this content field should begin with an H4 Header. You can bolditalicize and hyperlink text in this field. 

Video Modules can use a white, color or pattern background. It is highly recommend that this module NOT use an image background. This example uses a color background. 

Video CTA Title

H2 Header 

This is an Image CTA Module. Image CTA Modules use an H2 Header for title content. You can bolditalicize and hyperlink text in this field. 

Image CTA Modules can use a white, color or pattern background. It is highly recommend that this module NOT use an image background. This example uses a white background. 

These Image CTAs can include an internal or external link, which is noted by the tiles below that include a dark blue bar at the bottom and a solid dark blue hover state. Images as backgrounds are optional. If one Image CTA below uses an image, the CMS will default all of the titles to use the same image if one is not uploaded for each. All tiles in the module once added must either have background images or the solid blue background. It is highly recommend that they all function in the same manner. They should all link to something or they should all not link to something.