[Above] REQ_img_cover_horizontal
Note: Appears at the top of each case study. This is set under cover in the top navigation. 

Hello! This guide demonstrates the many blocks you can use to build your case study. The styles below are divided into four key sections: image styles, text styles, image & text styles, and animation styles (via lottie).

How to Access
Access our custom, pre-designed blocks under blocks>my blocks. Each image below notes the block name for easy reference. Simply drag the block in your editor, and you can edit the text/images from there. 

Note: When adding text, make sure you’re using “typographer quotes” (aka smart quotes), as Semplice tends to use "dumb quotes" (aka straight quotes ) by default. Check out this reference for key commands to make this easier. 

Why should I use these? 
These blocks are set up for easy use — aka, they already work at each breakpoint and include our standard animation styles, saving you so much time/energy! 

Space between blocks
Each block contains its proper spacing needs (i.e., margin) above/below the block itself. In Semplice, this spacing is referred to as the offset (note: the area called “spacing” is actually what we’d normally call padding).

When you place one block below another, you will essentially be adding double space. To fix this, determine which block has a bigger spacing value (by checking out section>offset on each block) and set the offset spacing value back to zero (0) for the block with the smaller space. 

Image Size
All images are built at two sizes across the site (horizontal 1920x1200 or vertical (960x1200) for consistency, but they may be scaled in a multitude of ways for added variety.

How should I export images & any other questions?
Check out the web 2.0 documentation on Notion.

Image Styles

[Below] IMG_1up_horizontal_12col_nogutter

[Below] IMG_1up_horizontal_12col_gutter

[Below] IMG_1up_horizontal_12col_gutter_caption

Caption text style

[Below] IMG_2up_vertical_12col_gutter

[Below] IMG_2up_horizontal_12col_gutter

[Below] IMG_1up_horizontal_6col_inset_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_carousel_horizontal_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_carousel_varied_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_beforeafter_horizontalA_inset_8col_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_beforeafter_horizontalB_inset_8col_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_2up_horizontalA_asymmetry_6col_gutter

[Below] IMG_2up_horizontalB_asymmetry_6col_gutter

[Below] IMG_2up_comboA_asymmetry_varied_gutter

[Below] IMG_2up_comboB_asymmetry_varied_gutter

[Below] IMG_2up_vertical_variedA_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_2up_vertical_variedB_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

[Below] IMG_3up_vertical_3col_nogutter_background

Note: background color may be adjusted to match an individual case study’s color palette for variety. 

Text Styles

Please note that sections with images and sections with text blocks handle spacing differently. To maintain the same optical proportions, the sizes noted for text blocks are slightly smaller than those used for image containers. This is not a mistake :) For more details, check out the notion guide. 

[Below] REQ_intro_text
Note: Primary intro to each case study. In the left column, elements like Awards / Press, Photography, URL, etc, are optional. Client, Year and Services are required. Services should match up with offerings listed on the services page when possible. 

Client, Year

Baltimore Museum of Industry, 
2023

Services

Logo
Exhibition
Interpretive Graphics

Awards / Press

Photography

URL

Project Name

One-liner text here 5-6 words (ideally)

This H3 text style is used in intro paragraphs. Each paragraph should be between 45-55 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor viverra placerat. 

[Below] TXT_6col_right
Note: Used in tandem with big images (ie: IMG_1up with gutter/without gutter or IMG_2up with gutter/without gutter). 

This H3 text style is used for standard paragraphs within the case study. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] TXT_6col_left
Note: Used in tandem with big images (ie: IMG_1up with gutter/without gutter or IMG_2up with gutter/without gutter). 

This H3 text style is used for standard paragraphs within the case study. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

Image & Text Styles

Please note that sections with images and sections with text blocks handle spacing differently. To maintain the same optical proportions, the sizes noted for text blocks are slightly smaller than those used for image containers. This is not a mistake :) For more details, check out the notion guide. 

[Below] IMG_TXT_vertical_5col_text_6col

This H3 text style is used for paragraphs within the case study that appear next to a vertical image. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] IMG_TXT_text_6col_vertical_5col

This H3 text style is used for paragraphs within the case study that appear next to a vertical image. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] IMG_TXT_horizontal_10col_inset_text_5col_inset

This H3 text style is used for paragraphs within the case study that appear next to a vertical image. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] IMG_TXT_2up_varied_inset_nogutter_background
Note: Use to highlight or frame specific content (like history, project detail, etc. 

This H3 text style is used for insets. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] IMG_TXT_2up_variedB_inset_nogutter_background
Note: Use to highlight or frame specific content like history, project detail, etc.

This H3 text style is used for standard paragraphs within the case study. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] IMG_TXT_2up_variedC_inset_nogutter_background
Note: Use to highlight or frame specific content like history, project detail, etc.

This H3 text style is used for standard paragraphs within the case study. Each paragraph should be between 40-50 words. Edit the paragraph by clicking on the yellow edit icon. Then press the yellow checkmark on the top right when you’re done. 

[Below] REQ_Related Projects_Black
Note: No space above or below this section. 

Animation Styles (lottie)

These blocks are designed for use with Semplice’s Lottie module. Lottie is a powerful web tool library that allows animations created in After Effects to be exported to and rendered on the web efficiently. You can now export these animations right from After Effects directly into Semplice.

More info on Lottie here. 

[Below] ANM_lottie_12col_gutter

[Below] ANM_lottie_12col_nogutter

[Below] ANM_lottie_ 6col_inset_nogutter_background