A special design was created for Emerson.com to allow for more “editorial” style pages to be created. This is one of the few instances on Emerson.com where we have “left rail” content on desktop view. On mobile view, the left rail is moved in-line with the main body content. The case study layout consists of a special hero (H008, H008B) and uses the rich text editor to create a two-column format with call-out information in the narrower left rail with the main long-content body copy in the wider right column. Additionally, there are a couple of components designed specifically to span the full width for images and tables.
To create a case study page, you will build the main body with a C034 or C044 component along with a H008 or H008B hero. While you can build the entire page content in the C034/C044, you can also add traditional components above or below the C034/C044 as you would on any page. See the instructions for creating either a H008 or H008B hero.
To build the case study body content, create a Collection and set the layout variant to C034 or C044. In the teaser text area add a “case study 1x2 grid”. If using the S001 social share (best practice), you can either add it as a component in the main placement above the C034/C044 or you can add it directly in the C034/C044 teaser text area above the case study grid. Do not add it in the case study grid, though.
To align the left rail content with your body copy, you can add multiple case study grids to the C034/C044 teaser text to allow you to specifically place your left rail components next to the appropriate text in the body copy. While you can add more than one component to the left rail of each case study grid, you will generally have only one.
To add a component to the left rail, click in the left half of the case study grid and type a descriptive text. This text is for author reference only and will not show in your authored component. Highlight the descriptive text you just typed and click on the “create or edit a link to a content item” in the tool ribbon of the rich text editor. Then drag and drop the appropriate component from the library or drag the tab if the content item is open in Studio. Before closing the pop-up window, make sure the Link Behavior is set to “Show Embedded”. On the right side of the case study grid, add the corresponding body copy.
Case Study with S001 Social Share Bar
Use a grid containing the embedded S001 social share component and text in the right grid, left side of grid remains empty, to create the continued article below the hero. You can also add the social share above the grid as well or simply add it as a component directly in the Main Placement of the Page above your C034/C044.
Case Study with C037 Case Study Full Width Image with Caption
To properly use the C037 Image with Caption, you need to embed the image with caption component (C037) outside of a grid and directly below, include a grid with no text / components on the left hand side. The image will show full width across the screen while the caption will show in the left rail immediately below the image and adjacent to the start of the text in the right half of the grid.
Case Study with C038/C038B Case Study Sidebar Image with Caption
To properly setup a C038 sidebar image, use a grid with the appropriate component (C038 or C038b) on the left side of the grid and the text on the right. Note that the image will float to the top of the grid when rendered putting it in line with the top of the text on the right. A specific use case for the news is to allow for a hi res version of the image to be available for download. See the author instructions in the link above for information on how to author this.
One caveat to this component, depending on how your image is sized (aspect ratio) there can be additional white space above and below your picture. This causes the picture to appear to be moved slightly down the page and not aligned with the top of the adjacent text on the right. Additionally, white space under the image can cause the caption to appear lower and slightly separated from the picture. A "hack" to correct for this (apart from adjusting the aspect ratio of your picture) is to drop the Picture in the left rail as "Show Embedded" and include a C038 immediately below it that does not contain a picture. This will place your picture a the top of the grid and the caption immediately below it without any white space.
Case Study with Two Left Rail Items (Example Use Case)
To make use of two images appearing in the left side, you will need to use two grids. The text in the right hand side of the second grid is where you want the second image to align. Make sure you have enough text in the first grid. This can apply to many uses of the available components for the left rail.
Case Study C039 Sidebar Pull Quote
The C039 Sidebar Pull Quote works exactly as sidebar images. This can be said for most of the left rail components other than C037.
Case Study Full Width Image (C018) and Table (C027)
The case study C018 full width image and C027 table can simply be added to the document outside of a grid. This allows the components to show the full width they are intended. They generally should not be included inside a grid. To place them in the middle of an article simply create two separate grids and place the C018 or C027 between the two grids.
Adding a Video to your Case Study Article
While not a component, you can add an HTML Fragment to the right body of a case study grid. This allows you to have a video play inline with your body copy. This can be placed anywhere in the right half of the case study grid as a link to a Content Item set to "Show Embedded". The below example shows code you can use for a YouTube video. This will also render well for mobile.
