README

Components

This site uses the following:

Critical CSS to improve sitespeed and loading any CSS above the fold. This can be found under the Snippet critical-css

BEM (Block Element Modifier) for class names

Nested CSS for certain classes, specifically forms and Nesthub listing widget (work in progress)

Container Queries to adjust to elements depending on the element size (and not viewport width)

Repository & Design Guidelines

For reference designs or to add a specific design to a page section, check out the repository page. The repository is a helpful resource when building or updating pages and you need to follow consistent design guidelines.

Spacing between sections: All major section groups on a page are spaced 250px apart (top and bottom). To achieve this, use the banner-xxl class on your section wrapper for automatic application of the 250px spacing.
Internal section spacing: When a section contains a header, content (with or without a graphic), and buttons, use a 57px gap between these elements. This structure and spacing are already implemented in carousel and table sections on the repository page.

Case Studies Blog Post

The structure of the blog post should be as follow to trigger the correct styling:

			
			
	<h3 class="case-study-details__sub-title">Sub Title header that appears above the Featured Media</h3>
	<h3>Background</h3>

	<p>Content here.</p>
	<hr>

	<h3>The Challenge</h3>
	<p>Content here.</p>

	<hr>

	<h3>The Solution</h3>
	<p>Content here.</p>
	<hr>

	<h3 dir="ltr">The Results</h3>

	<p><span class="text-gradient">Gradient text section</span></p>

	<p class="fs-18 fw-normal mw-1200">Normal text that doesn't need to be enlarged in gradient</p>

	<div class="d-none video-thumbnail">/images/videothumbnailoverride.png</div>

READ ME for PMW website

Components

Repository & Design Guidelines

Case Studies Blog Post