Web Component Guide

Your Guide To Using Our Web Components

Use this guide to help you determine which web components are best for your content and how to stylize certain aspects. These are not hard and fast rules, but instead a guide to best practices.

Hero and header blocks

These blocks are exclusively for banners/headers to pages and NOT meant for content further down the page.

For top-level pages (Company, Markets Overview, Our Locations, etc.) and some second-level pages (individual market pages and regional pages) use one of the large hero options. Other pages should use small banner image.

  • Large Hero Image Block: Photo & Videos cropped to 12:5 aspect ratio
  • Small Hero Image Block: Photos cropped to 4:1 aspect ratio

For all image-based hero and header blocks, enable “parallax” function.

Large Hero Image Block

Use H2 for this subhead

This component can utilize a photo or a single looping video. Size should be 12:5 aspect ratio for both.

Large Hero Random Video

Use for multiple video loops

This is essentially the same as Large Hero Image Block, but should be used when you want to have multiple videos. The video will be served randomly each time someone visits the page.

 

Small Hero Image Block

Simple content – WYSIWYG  block

This is a plain text content block that is perfect for copy-only blocks.

Use these for intro sections to other content blocks that don’t include built-in headers, simple paragraphs and copy-heavy sections.

Consider breaking up long copy with subheads.

Tabbed/Menu blocks

Vertical tabs block

This is good block for featuring priority sectors, more in-depth project features, storytelling, etc.

There are two options. One (labeled “Wysiwyg”) is a simple option for text and possible image. The second (labeled “Enhanced”) option is designed to feature a sector, a featured image, and a point of contact.

Use a H6 style header for tabbed content

Body is paragraph style.

Include a photo by clicking “Add media.”

 

Use a H6 style header for tabbed content

Body is paragraph style.

Use a H6 style header for tabbed content

Body is paragraph style.

Autoformatted Eyebrow

Autoformatted Header

Use H6 as content header

Body is paragraph style.

For photo to the left: you can have it be clickable (say, to a project profile) by adding the URL in the “URL” box.

Add a CTA/Contact button by selecting “Add CTA.”

Mary LeFevre

Regional Vice President – Business Development

Autoformatted Eyebrow

Autoformatted Header

Use H6 as content header

Body is paragraph style.

For photo to the left: you can have it be clickable (say, to a project profile) by adding the URL in the “URL” box.

Add a CTA/Contact button by selecting “Add CTA.”

Holly Wasielewski

Talent Acquisition Manager

Banner blocks

These blocks are a great way to feature a singular topic. It could be a story. It could be a link to the portfolio. It could be to promote the careers page/recruitment. They are also great in breaking up a page visually, separating similar-looking content blocks. They can be used freely with multiple options for color, imagery and buttons.

For all image-based banners, enable “parallax” function.

Large full-width CTA (Background Option): Use H3 style for header

You have options for color and style in this block. It can have a background image, as seen here, or you can split it 50/50 with a graphic on one side and copy on the other (see below).

Image should be grayscale and at a 2:1 aspect ratio

Buttons can be added for CTA.

Large full-width CTA (Columns option): Use H3 style for header

Image should be at a 2:1 aspect ratio

Buttons can be added for CTA.

Small full-width CTA: Use H2 for header

This is a smaller version of the above, with only an image background option. There are multiple colors to choose from for both the banner and CTA buttons.

Icon banner block: Use H2 for header

This block is a good option for highlighting stats, numbers, awards, etc. and pairing them with an icon. It only comes in the blue background option.

Cool stat #1 could go here

Another cool stat goes here

A third cool stat goes here

Up to 4 cool stats can fit

Tile & grid blocks

Content tiles block

This can be a 1×3 or 1×4 block. It is great for featuring quick hit information, services, features or other similar content and DOES NOT need to link out to another page. If you are linking to another page on our site, see Page Tiles Block or Spotlight Cards Block below.

All images should be cropped 1:1 square aspect ratio

Use H4 style for header

Paragraph style for the copy underneath.

Use H4 style for header

Paragraph style for the copy underneath.

Use H4 style for header

Paragraph style for the copy underneath.

Use H4 style for header

Paragraph style for the copy underneath.

Page tiles block

This can be a 1×3 or 1×4 block. It is great for linking to other pages within the Christman website or to self-perform sites.

Because these link out, always enable “Zoom Images on hover.”

If linking within the Christman site, DO NOT enable “Open link in new tab” when adding the link. Only open in new tab if linking outside the TCC site (such as self-perform).

All images should be cropped 1:1 square aspect ratio.

Spotlight cards block

This can be a 1×2, 1×3 or 1×4 block.  It is great for featuring quick hit information, services, features or other similar content.

It can either include a CTA button or not.

It can link to another page or not. If you link to another page within Christman website, DO NOT enable “Open in New Window” options. If it links outside of the Christman site, ENABLE “Open in New Window.”

All images should be cropped 1:1 square aspect ratio.

Use H4 for header

Paragraph style for body copy. Can create any CTA button below, linking to another page, a form, a social channel or an affiliate site. Can also no include CTA button.

Use H4 for header

Paragraph style for body copy. Can create any CTA button below, linking to another page, a form, a social channel or an affiliate site. Can also no include CTA button.

Use H4 for header

Paragraph style for body copy. Can create any CTA button below, linking to another page, a form, a social channel or an affiliate site. Can also no include CTA button.

Use H4 for header

Paragraph style for body copy. Can create any CTA button below, linking to another page, a form, a social channel or an affiliate site. Can also no include CTA button.

Market tiles block

This link is nearly identical to the Page Tiles Block, but is specifically designed for the market sector pages.

It is 3-coumns wide and will stack in a grid as you add more.

This block will automatically pull in the featured image (icon) and also the description when you select which market to feature.

Healthcare

Explore our portfolio showcasing $2 billion in healthcare projects.

Science and Technology

Complex lab construction and renovation with facilities expertise.

Parking

Unlock expertise in renovation and construction for your parking project.

Text icon card block

This is another great way to showcase content that falls under a similar topic/theme. You can use the “Eyebrow” to summarize the topic (i.e. Markets, News, Video, Benefits).

The header should read like a headline to the supported body copy content below.

ONLY use the 3 column-option. If more than 3 cards are added, it will function as a scroller.

Eyebrow

Use H3 as header

Paragraph style as the body copy. You can add button link below by selecting “Select Link” under “CTA.” Use images or icons as image, cropped to a square 1:1 aspect ratio. Button can be either copper or green.

Eyebrow

Use H3 as header

Paragraph style as the body copy. You can add button link below by selecting “Select Link” under “CTA.” Use images or icons as image, cropped to a square 1:1 aspect ratio. Button can be either copper or green.

Eyebrow

Use H3 as header

 

Paragraph style as the body copy. You can add button link below by selecting “Select Link” under “CTA.” Use images or icons as image, cropped to a square 1:1 aspect ratio. Button can be either copper or green.

Leadership blocks

Use one of these to feature your regional/sector/service leadership.

 

Leadership grid block

This is reserved for those identified as company leadership (present on the leadership page) and includes the copper background.

Once you add the block, select “Add leader” and select the name from the dropdown. Any leaders featured on the Company Leadership Page are selectable for this component.

Content tiles block

This is for if you want to feature ELPs on your page but are not classified as company leadership and not present on the leadership page.

Use the content tiles block and add their web-formatted headshot as the image and style their name and title as noted below.

First Last – H4 header style

Position title in paragraph style

 

First Last – H4 header style

Position title in paragraph style

First Last – H4 header style

Position title in paragraph style

First Last – H4 header style

Position title in paragraph style

News and blog blocks

News post grid block – H2 style as header

This is to feature news articles on the page and have them automatically pull from our news section. This is great for use on regional pages, market sector pages, and recruitment pages.

There are 1×2 and 1×3 column options. If you add more, the block will automatically convert to a scrolling carousel.

You can manually select which articles to feature using “Curated” setting OR have it automatically pull in stories based on certain taxonomies (location or news category) by using the “Automatic” setting and selecting any and all taxonomies you want to pull into the block.

Always select “Zoom Images on Hover.” If the block is a scrolling carousel, it will automatically disable the zoom feature, which is intentionally designed as not to be an overwhelming amount of movement.

Photos will be autogenerated based on what was set as the “Featured Image” on the news post. Featured images should be cropped to a square 1:1 aspect ratio.

News

Christman announces self-perform leadership transition

Christman Constructors announces a planned self-perform leadership succession, naming new leaders while honoring retiring industry veterans.

News

The Christman Company announces new leaders in Detroit and Grand Rapids to drive growth and innovation 

The Christman Company announces new regional leaders across Michigan to strengthen operations, growth and innovation.

News

November 2025 Michigan Bond Election Analysis

Although November 2025 bond elections passed at a rate below the historical average, results improved compared to May and August.

News

Breaking Ground in McKinney: A New Chapter for Binnerri Presbyterian Church

The Christman Company joined Binnerri Presbyterian Church, Omniplan Architects, and the City of McKinney to break ground on a vibrant new campus that will serve one of Texas’s largest Korean American congregations, marking a milestone of community, culture, and shared vision.

News

Topping Out at Collin County: A Milestone in Public Health Progress

The Collin County Public Health Buildings project in McKinney has reached a major milestone with its topping out event, celebrating the progress and collaboration driving this transformative public health initiative forward.

News

Christman named one of Crain’s Detroit Business 2025 Top Workplaces

The Christman Company is proud to announce its recognition as one of the 2025 Best Places to Work by Crain’s Detroit Business.

News

August 2025 Michigan Bond Election Analysis

Michigan’s August 2025 bond election saw modest gains, with 58% of proposals approved despite uncertainty.

News

NC State’s College of Veterinary Medicine proudly unveils a new translational research facility

NC State University has taken a significant step forward in veterinary medicine with the completion of a new translational research facility

News

The Christman Company named one of the nation’s top healthcare construction managers 

Christman ranks #15 on Modern Healthcare’s 2025 Top CM Firms list for healthcare construction.

News

The Christman Company places 75 in national ENR contractor ranking

Christman rises to No. 75 on ENR’s Top 400 list and debuts at No. 46 in Top 50 for building revenue.

News

May 2025 Michigan Bond Election Analysis

Michigan May 2025 bond election results show lower passage rates, highlighting rising challenges for K-12 bond approvals.

News

Christman and Brinker Receive Two Governor’s Awards For Historic Preservation

The Christman Company and L.S. Brinker, a Brinker company, have been recognized by Gov. Gretchen Whitmer for their participation in the rehabilitation of two iconic buildings.

News

The Christman Company adds Doug Lawyer as Business Development Manager

Doug Lawyer has joined The Christman Company as manager of business development in the construction management and real estate development firm’s office in Knoxville, Tennessee.

News

Christman Detroit Office Moves to Bedrock’s Iconic Book Tower in Downtown

New office showcases construction management firm’s expertise in historic preservation and build-out

News

Christman releases first Community Impact Report highlighting 2024 achievements 

The Christman Company released its 2024 Community Impact Report, a look at the company’s commitment to building stronger communities.

Blog post grid block – H2 style as header

This is nearly identical to the News Post Grid Block, but pulls from our blog section of the site. This is great for use on regional pages, market sector pages, and recruitment pages.

There are 1×2 and 1×3 column options. If you add more, the block will automatically convert to a scrolling carousel.

You can manually select which articles to feature using “Curated” setting OR have it automatically pull in stories based on certain taxonomies (location or blog category) by using the “Automatic” setting and selecting any and all taxonomies you want to pull into the block.

Always select “Zoom Images on Hover.” If the block is a scrolling carousel, it will automatically disable the zoom feature, which is intentionally designed as not to be an overwhelming amount of movement.

Photos will be autogenerated based on what was set as the “Featured Image” on the news post. Featured images should be cropped to a square 1:1 aspect ratio.

MEP coordination isn’t just BIM: how CM/GC leadership turns models into reality

MEP coordination goes beyond BIM. Learn how CM/GC leadership turns models into buildable plans that reduce risk and rework.

Navigating unforeseen conditions in Historic Preservation projects 

Historic preservation projects face hidden risks. Christman plans, adapts, and communicates to keep projects on track.

Robotic dogs: Man(hour)’s best friend on the jobsite

Robotic dogs boost construction safety, efficiency, and accuracy, capturing site data after hours without disrupting progress.

From stigma to support: Mental health matters in our industry

Understand the importance of mental health in our industry and discover ways to foster a supportive environment.

Christman’s Historic Preservation Group: An Intentional Approach to Preservation 

Expert guidance for preserving historic buildings through reuse, tax credits and long-term planning.

The rise of timber tech: How innovation in lumber research may challenge structural steel and concrete framing

From carbon savings to modular potential, this blog explores how timber tech is gaining traction in commercial construction.

The spectrum of preservation: Adapting your mindset to the priorities of the project 

Expert guidance for preserving historic buildings through reuse, tax credits and long-term planning.

The benefits of prefabrication in construction: Building smarter from the start

Discover how modern prefabrication boosts safety, quality, speed and savings in construction.

The Future of Air Travel: What’s Driving the Surge in Airport Improvement Projects? 

Airports are investing billions in upgrades to enhance passenger experience, integrate tech, and boost efficiency.

Construction internships are pathway to career 

Construction internships are a great path to a career. 85% of employers offer jobs to interns who are successful.  

Five jobs you wouldn’t think of in construction

The construction industry employs nearly 8 million people each year. Here are 5 construction jobs you might not think of.

Safety: A blueprint for construction success

Christman’s health and safety commitment is deeply integrated into our construction practices, ensuring secure and healthy jobsites.

Behavioral health: new frontrunner in specialized healthcare

Dive into the forefront of specialized healthcare with Behavioral Health facilities. Craft spaces that prioritize safety, functionality and aesthetics.

Economic benefits of historic preservation 

Discover the economic benefits of historic preservation. Learn how reuse and rehabilitation drive sustainability and cost savings.

ABCs of prefabrication in healthcare construction

Building prefabrication is where standardized components of a building are produced offsite.

Alternating content

Alternating content block

This block comes in multiple size variations as well as content type. It can be both single image or image carousel (see below).

See “Video Blocks” section for video options for alternating content.

Alternating content block: 6-column – Use H2 as header

This is a great visual block to have copy supported directly by an image.

 

Alternating content block: 4-column

You can have image on right or left of any size alternating content block.

Alternating content block: 3-column

You can have image on right or left of any size alternating content block.

Try to match length of copy with image as not to leave a ton of white space.

Alternating content block: 8-column

You can have image on right or left of any size alternating content block.

Try to match length of copy with image as not to leave a ton of white space.

Alternating content block: 9-column

You can have image on right or left of any size alternating content block.

Try to match length of copy with image as not to leave a ton of white space.

ISSUU embed block

This is to be used to embed a digital publication published on ISSUU. Copy the URL from the ISSUU publication and past it under “ISSUU publication” in web component.

Video components

There are a few different options for posting videos on your web page. For all of them, you will need to first upload your video to YouTube (corporate marketing can help with this). You will use the YouTube link to embed videos in each of the blocks below.

Video card rotator block

This is great for featuring multiple videos in one component, whether they be a related topic or a “featured video” section. Post the YouTube link where it says “URL” and copy the video title and description from YouTube into the same fields in WordPress.

It is a 1×2 grid. If more than 2 videos are added, it becomes a carousel.

Video

Prefabrication in construction

By shifting key construction activities offsite, prefabrication provides a smarter, more controlled way to build, delivering measurable advantages in speed, safety, quality and cost. It doesn’t change what gets built, but how we build it.

Video

Installing a 1,700-Pound Beam at Mount Vernon | Behind the Build

Take a closer look at the fabrication and installation process of a unique beam, an essential part of the exoskeleton for George Washington’s Mount Vernon project. Measuring 18 feet in length and weighing 1,700 pounds, this impressive piece is assembled with 100 countersunk bolts and 7 full penetration welds, plus a custom-fit top plate to ensure precision.

Video

Women In Construction – Letters to Our Former Selves

We asked our female colleagues to write their former selves a letter about their experience as a woman in construction.

Alternating content with video block

This functions in the exact same way as the alternating content block with photos. It comes in 3-, 4- and 6-column options (see below).

6-column option – Use H2 for header

This is the 6-column option.

4-column option – Use H2 for header

This is the 4-column option.

3-column option – Use H2 for header

This is the 3-column option.