Template Case Study - Copy Me! //

Component: Case Study Hero (Basic).

A Hero component, either Basic or Full, is required to be the first section after SEO Section in the CMS.

Clutchstudios.com Case Study Guide //

This Component is an "Editorial Section", which requires copy for basic text and provide a Structured content field for simple text formatting

Hi!

Below, you'll find examples of the available components, and the options they present in the CMS.

It does not have every possible permutation of combined options, but should serve as an overview of current functionality.

It's Somewhere Between comprehensive and exhaustive.

Generally, most components have background color options, and some required content.

Many have the option to override the required content with videos or rich text options.

This editorial section for example, is using the Structured Content field for simple formatting.

Example of Structured Content

You should always use the structured content field if it's available in the component. Some CSS Rules on the forntend for fonts require the copy to be here. Just stick some Lorem in the required field, It won't appear on the front end if there is copy in the Structured Content field.

Structured content allows for basic text formatting. Support for this on the front end is somewhat limited, so make sure to preview the post on https://uat.clutchstudios.com/

The rest of this template uses Editorial Sections with Black backgrounds to explain the following component and it's options.

Case Study Video //

This is a sub header

Case Study videos are vimeo links like https://vimeo.com/1062463934

Options:

Background Color

Autoplay: true/false

Note: videos set to autoplay will not contain audio

Case Study Carousel //

Case Study Carousels are a collection of any combination of: CMS images, Amazon hosted videos, or Vimeo hosted videos.

Layout Notes:

Assets should be the same aspect ratio for a clean layout.

All assets will scale to by width to ~80% of the browser width.

All assets will be horizontally centered based on the tallest asset (if one is taller than the others)

Options:

Background Color

Autoplay: true/false

Note: videos set to autoplay will not contain audio

This one for example, is made up of only 16:9 assets //

Any Carousel with a Vimeo video embedded should have 16:9 ratio assets.

And this one is made up of only 1:1 assets //

It's hip to be square

And this one has a whole bunch of stuff //

Which makes it a little tough across browser sizes

Case Study Images //

Examples of different configurations

An image is required, but can be overridden by a video hosted on Amazon.

Videos are muted, and intended for loops.

Images and videos can be various dimensions, but note they will scale to max width in the browser.

All Example images and videos are either 768x768px or 1920x1080px with a green border to show cropping across different viewports.

options:

Background color

Header (optional)

copy (optional)

video (optional)

autoplay: true/false (only matters if there is a video).

Case Study Image Background White //

Case Study Image. Background White. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image Background Light Blue //

Case Study Image. Background Light Blue. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image Background Light Grey //

Case Study Image. Background Light Grey. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image Background Black //

Case Study Image. Background Black. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image Background Red //

Case Study Image. Background Red. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image. Background White. Text Right. //

Case Study Image. Text Right. Background White. Image. 1080p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image. Background White. Video. Text Right. //

Case Study Image. Background White. Video. Text Left. Header Only. //

Case Study Image. Background White. Image. 768px x 768px. Header only. text right. //

Case Study Image. Background White. Video. 768px x 768px. //

Case Study Image. Background White. Video. 768px x 768px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image. Background White. No Header. Video. 768px x 768px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Case Study Image Background White //

Case Study Image. Background White. Text Right. Video. 768px x 768px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.