Solicitation 75N97021R00019 Attachment A - Template C Style Guide 2021.pdf

Attachment A: Template C Style Guide 2021

Solicitation for Web Services Exhibition Program National Library of Medicine

Contents Web Style Guide

1.0 Universal Elements

1.1 Overview

1.2 NLM Wrapper

1.3 Universal Directory Structure and File Names

1.4 Code Changes When Starting a New Exhibition Website

2.0 Header-Nav and Footer

2.1 Header-Nav

2.1.1 Exhibition Program Logo

2.1.2 Horizontal Menu Design

2.1.3 Menu Expansion

2.2 Footer

3.0 Home page

3.1 Overview

4.0 Secondary Page Header

5.0 Exhibition Collection

6.0 Digital Gallery

7.0 Education Resources

8.0 Traveling Exhibition

9.0 Credits

10.0 Icon Glossary

Web Style Guide: Template C Template C Template C has been developed to address the need for a responsive online exhibit. This also opened the opportunity to re-examine and re-envision the presentation of the exhibition content and the functionality offered. The original goals of providing a companion to the physical and banner exhibitions and enhancing the user experience remains the same.

Some main differences between Template C and the previous Templates A and B are how the content is organized and delivered. The exhibition is introduced on the home page through a narrative that flows down on the page supported by selected imagery. The exhibition section or "Exhibition Collection" is no longer presented in sections or themes. The "Exhibition Collection" is presented as a group of thumbnails that visitors can explore in a non-linear fashion. The "Digital Gallery" is no longer displayed by themes, dates, author/publisher or titles. The assets are presented in a specific order but in a manner that emphasizes the image of the asset.

1.0 Universal Elements

1.1 Overview

The templates for the Exhibition Program share common elements. Template C has also been developed in a manner that will not affect previous Templates A and B.

1.2 NLM Wrapper

As noted, for Templates A and B, ALL templates exist within the official NLM Wrapper. Therefore, the color choices should consider the context in which they will be displayed.

The code within the HEAD tags for the templates reference files that are controlled by the main National Library of Medicine site.

<link href="https://www.nlm.nih.gov/styles/normalize.css" rel="stylesheet" /> <link href="https://www.nlm.nih.gov/styles/master_rwd.css" rel="stylesheet" media="all" /> <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />

Common files that are shared between all Template C exhibitions live in the folder "wrapper_styles" and "wrapper_images". These files are related to the simplified wrapper and universal footer that includes the orange bar.

<link href="../wrapper_styles/wrapper.css" rel="stylesheet" type="text/css" media="all" />

1.3 Universal Directory Structure and File Names

Each exhibition has it's own folder. Within that folder a common directory structure and file naming convention is retained from exhibition to exhibition.

Folders:

styles

This folder contains css files that control the layout The font folder "img" folder that contains all images related to the template design sass

Contains .scss files which is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser, and for information SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster.

js

Contains files related to client side JavaScript code that runs on the webpage" images

Contains images of assets for both the Exhibition Collection and Digital Gallery. These images are subdivided into folders: small, medium and large

1.4 Code Changes When Starting a New Exhibition Website

1. Open the code files and find the style tag o If the attribute “href” has any exhibition name in it, change it to reflect the new exhibition

2. Open the code files and find the script tag o If the attribute “src” contains any exhibition name in it, update it to reflect the new exhibition

3. Style/CSS changes – you need to decide whether you want go via SCSS files or CSS files

1. SCSS

Minify base.css file and refer it in the exhibition code.

You’ll need to modify _variables.scss to reflect the colors of the new exhibition Compile the scss files into base.css

2. CSS

1. You’ll have to modify the base.css file

2. Modify all the needed color, border, background-color values to match the theme of the new template

3. Minify base.css file and refer it in the exhibition code.

4. Do not modify any script or style tags containing the following file paths:

o <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> o <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> o <script src="https://www.nlm.nih.gov/scripts/parature.js"></script> o <link href="https://www.nlm.nih.gov/styles/normalize.css" rel="stylesheet" /> o <link href="https://www.nlm.nih.gov/styles/master_rwd.css" rel="stylesheet" media="all" /> o <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" /> o <script src="js/jquery.elevateZoom-3.0.8.min.js"></script> o <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

5. Edits related to images, fonts, colors o The elements that make each site unique include the images, fonts and colors. To customize each site, the fonts and images will need to replaced and the CSS edited.

o The images are located in the images folder and the styles/img folder o The fonts are located in the fonts folder o Template C allows for more flexibility than Template A & B therefore, all the possible edits in the CSS is not practical. The best way to find what to replace is to use the Inspect Element feature in Chrome to see the name of the image and CSS file and line that can be edited.

2.0 Header-Nav and Footer

2.1 Header-Nav

The template uses a common header. The common consists of the main navigation bar, dropdown menu and the Exhibition Program identity.

Desktop - Header Nav Mobile - Header Mobile - Nav

2.1.1 Exhibition Program Logo

The Exhibition Program links back to the main Exhibition Program website.

Location Width Height

Desktop The logo appears in the top right corner in a consistent location. The logo overlaps the image below.

Not editable 98px

Not editable 81px

Mobile The logo appears in the top right corner in a consistent location. The logo does not overlap.

Not editable Same image as above but resized based on browser width

Not editable Same image as above but resized based on browser width

2.1.2 Horizontal Menu Design

The horizontal menu represents the main navigation/sections for the website. The section that the user is indicated by the presence of the horizontal color bar above the section name.

Width Height Background Color Active/Hover Bar/Icon Vertical Dividing Lines Font

Desktop

Not editable Optimized for 1600px Not editable Editable Editable: Color

Not editable: Dimensions

Editable: Color Not editable: Dimensions

Color Editable Font-family, size, weight - Not editable KyrialSansProLightRegular, sans-serif font-size: 1.7rem;

Mobile

Not editable Optimized up to 320px Not editable Editable Editable: Color N/A

Color Editable Font-family, size, weight - Not editable KyrialSansProLightRegular, sans-serif font-size: 1.7rem;

2.1.3 Menu Expansion

The navigation expands to reveal subsections. The page that the user overs over is highlighted by a background color change.

Dropdown Background Color Hover Color Font Horizontal Dividing Lines

Desktop

Editable Editable: A deeper color than the default color

Editable: Color Not editable: Font-family, size, weight KyrialSansProLightRegular, sans-serif font-size: 1.7rem;

Editable

Mobile

Editable: But should be consistent with desktop Editable: But should be consistent with desktop

Editable: Color Not editable: Font-family, size, weight KyrialSansProLightRegular, sans-serif font-size: 1.7rem;

Editable: But should be consistent with desktop

2.2 Footer

The template uses a common footer. The footer consists of a divider graphic and links. There are 2 updates below for template C footer, starting with Rise, Serve, Lead! project and moving forward:

1) EXHIBITION HOME with an icon is added; and 2) Credits and About are 2 html options on the footer and the site.

Desktop Mobile

Width Height Line and Arrow Background Color Active/Hover Bar/Icon and Outline Vertical Dividing Line Font

Desktop

Not editable Optimized for 1600px Not editable Editable: Color

Not editable: Dimensions Editable Editable: Color Not editable: Dimensions

Editable: Color Not editable: Dimensions

Color Editable Not editable: Font-family, size, weight KyrialSansProLightRegular, sans-serif font-size: 2.9rem;

Mobile

Not editable Optimized up to 320px Not editable Editable: Color

Not editable: Dimensions Editable Editable: Color Not editable: Dimensions

Editable: Color Not editable: Dimensions

Color Editable Not editable: Font-family, size, weight KyrialSansProLightRegular, sans-serif font-size: 1.6rem;

3.0 Home page

Graphic Medicine - Desktop Mobile Outside Inside - Desktop Mobile Politics of Yellow Fever - Desktop Mobile

Attachm ent A: Tem plate C Style Guide 2021

3.1 O

verview

The hom epage consists of com m on com ponents that are custom izable through C

SS edits to give each exhibition a unique look and feel.

C om m on com ponents R eference 1.

M ain horizontal navigation bar and Exhibition Program logo/ "H am burger" m enu on m obile

Please refer to Section 2: H eader-N av and Footer.

2.

Exhibition logo The logo dim ensions and placem ent rem ains the sam e for all exhibitions.

The hom e page logo is larger on the hom e page than the other pages and includes the subtitle.

Specifications D im ensions: N ot Editable - 413 x174 pixels

3.

M ain top im age

The m ain im age spans the w idth of the page (1600px) but the height can vary.

Ideally, the im age w ould allow for the text below to be visible above the fold (768px).

Specifications D im ensions: N ot Editable - 1600 pixels x Variable height pixels

4.

The first sentence is em phasized by size and w eight. The size of the font should be relatively the sam e from exhibit to exhibit. H ow ever, the font size is not exactly the sam e due to the differences betw een fonts such as the x-height w hich w ill m ake one look larger than another. The font-fam ily can be unique from exhibit to exhibit.

Specifications Font-fam ily: Editable Font-size: Variable should be sim ilar Font color: Editable

5.

R ight and left colum n* content w ith a stylized horizontal line. The style can vary and can be created w ith css and/or background im ages for the ends of the line. The w idth is determ ined in the C SS file and affected by page w idth.

Specifications D im ensions: W idth (determ ined by page w idth) x H eight (variable)

Style: Variable C olor: Variable

6.

The body copy text size is sm aller and there is the option to em phasize text by increasing the size and/or w eight. The body copy font can vary exhibition to exhibition. The size should be relatively the sam e from exhibit to exhibit. The body copy starts in the right colum n and continues in the left colum n.

Specifications Font-fam ily: Editable Font-size: Variable, should be sim ilar Font color: Editable

7.

The upper left colum n can display an optional im age. The im age should be no w ider than 825 pixels and the height can vary.

Specifications D im ensions: W idth (no w ider than 825px determ ined by page w idth) x H eight (variable)

8.

Q uote 1 in the left colum n and Q uote 2 in the right colum n.* The style of the box can vary from exhibit to exhibit. The exam ple from G raphic M edicine uses different background im ages each border. The exam ple from O utside Insides uses just a background color. All the graphics are controlled through the C

SS file. The font choice and color can vary from exhibit to exhibit. The font-size should be relatively the sam

e. A background im age m ay also be the sam

e. Both left and right colum n designs have to be the sam e.

Specifications Font-fam ily: Editable Font-size: Variable, should be sim ilar Font color: Editable Border: Variable Background: Variable Background-im age: O ptional

9.

O ptional background im age. A background im age m ay be used but needs to be light enough that the text that overlays it is still visible. This im age does not display on m obile devices.

Specifications N ot Editable - 1600 x Variable height pixels

10. O ptional bottom im age. This im age stretches across the bottom and the height can vary.

Specifications N ot Editable - 1600 x Variable height pixels

11. Footer links Please refer to Section 2: H eader-N av and Footer .

*N ote: R eferences to right and left colum n are only relevant to desktop layout

4.0 Secondary Page Header

Two Column Format

The treatment of the header comes in two forms based on the format of the layout.

The two column format which is used for the Exhibition Collection landing page, Education Resources pages, and Credits.

The logo remains the same size and in the same position regardless of the secondary page layout.

Specifications Logo Dimensions: Not editable - 240 pixels x Variable height with max height of 99 pixels

One Column Format

The one column format which is used for the Exhibition Collection detail and transcript page and Digital Gallery.

Mobile

The header treatment for mobile devices is the same on all secondary pages.

Specifications Logo Dimensions: Not editable - 168 pixels x Variable height with max height of 69 pixels

Not editable: Section name, all caps, font-family, size, weight, KyrialSansProSemiBoldRegular, sans-serif, 2.0rem

5.0 Exhibition Collection

Exhibition Landing - Desktop Mobile Exhibition Detail - Desktop Mobile Exhibition Transcript Mobile

5.1 Exhibition Collection Landing

The Exhibition Landing starts with an introductory paragraph in the left column. The right column showcases the selected items from the exhibition. The format allows for images with variable heights so that the full image can be represented.

In the mobile version, the background image in the left column is not shown due to the length available to display the image.

Left Column

Width Height Background Color Background Image Heading Body Copy

Desktop

Not editable 390px Variable

Editable

The background image should blend into the background color.

Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family.

Visually the size should be similar from exhibit to exhibit.

Not editable: Text, All caps

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family.

Visually the size should be similar from exhibit to exhibit.

Vertical line along edge of column

Not editable

Vertical line along edge of column

Not editable

N/A

Editable: Color N/A N/A

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

None

Same as desktop

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

Horizontal line bottom

Variable:

Responsive

Horizontal line bottom

N/A Editable: Color N/A N/A

Right Column

Item Image Width Item Image Height Background Color Background Image Border Naming Convention

Desktop

Not editable 203 px Variable Editable None

Editable: Color

Not editable:

Width 1 pixel 5 pixels on hover

ItemID-sm.jpg i.e. OB12481-sm.jpg

Arrow along edge of column Not editable

Arrow along edge of column

Arrow along edge of column Editable

Mobile (bottom portion)

203 px

Variable

The background color is the same as the desktop version right column.

None

Editable: Color

Not editable:

Width 1 pixel 5 pixels on hover same image as desktop

Arrow below horizontal line

5.2 Exhibition Collection Detail

The Exhibition Collection detail page uses a one-column format.

Image Width Image Height Background Color Navigation - Back/Next and Icons Copy Naming Convention

Desktop

Variable 788 px or less

Variable 600 px or less

Editable

The background color can be different from the Exhibition Collection landing page but the colors should be from the same palette.

Back/Next Not editable 51 x 51 px

Icons Not editable 54 x 54 px

Not editable icon - arrow no solid background color. Colors follow link and hover colors chosen for the site.

Not editable Text Font-family - KyrialSansProSemiBoldRegular, sans-serif, all-caps Font-size: 1.6 rem

Editable

Asset ID Font-family, color, size* weight should be consistent with the site.

Credit Font-family, color, size* weight should be consistent with the site.

Optional Caption Font-family, color, size* weight should be consistent with the site.

*size should be visually consistent from site to site

ItemID-md.jpg i.e. OB12481-md.jpg

Magnified Image

1300 px

Variable N/A N/A N/A

ItemID-lg.jpg i.e. OB12481-lg.jpg

Mobile

Responsive Responsive Same as desktop Same as desktop except Back and Next no longer display because users can swipe from image to image

Same as above but size adjusts to be optimal for mobile. In general, fonts on mobile are no smaller than 12 or 14px.

Same image as

5.3 Exhibition Transcript

The Exhibition Transcript page is optional.

Image Width Image Height Background Color Navigation - Back/Next and Icons Copy Naming

Convention

Desktop

Not editable 390px

Same image as the Exhibition Collection landing page

Variable

Editable

Same background as Exhibition Collection detail page

Not editable 51 x 51 px

Not editable icon - arrow no solid background color. Colors follow link and hover colors chosen for the site.

Not editable Text Font-family - KyrialSansProSemiBoldRegular, sans-serif, all-caps Font-size: 1.6 rem

Editable

Font-family, color, size* weight should be consistent with the site.

*size should be visually consistent from site to site

ItemID-sm.jpg i.e. OB12481-sm.jpg

Mobile

Same as desktop Same as desktop Same as desktop Same as desktop Same as desktop Same image as

6.0 Digital Gallery

Digital Gallery Landing Page Mobile Digital Gallery Detail Page Mobile

6.1 Digital Gallery Landing

The Digital Gallery starts with an introductory paragraph above.

Header Area

Width Height Background Color

Header Area - Background Image Heading Body Copy

Desktop

Not editable 1366px (including logo)

Not editable 182 px

Editable: Image Variable: Width (right aligned) Not editable: Height 182 px

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Text, All caps - Not editable

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Mobile

Responsive Responsive Same as desktop None Same as desktop but size is optimized for mobile. Same as desktop but size is optimized for mobile.

6.2 Images

Width Height Pattern Background Color Hover Color Naming

Convention

Desktop

Not editable 380px or 776px

Not editable 375px

Combination of

Row 1: double, single, single Row 2: single, single, double Row 3: single, single, single, single Row 4: double, double

Not editable: Height and bottom location

ItemID-sm.jpg i.e. OB12481-sm.jpg

Mobile

Same as desktop

Same as desktop

Same as desktop but flows in desktop top. Therefore the pattern becomes:

Row 1: double Row 2: single, single etc.

Same as desktop N/A Same as dektop

6.3 Digital Gallery Details

Image and Text

Width Height Position Background Color Heading Copy Naming Convention

Desktop

Not editable 810px

Not editable 610px

Not editable Centered

If the image does not fill the space the background color will be included in the image file.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

ItemID-md.jpg i.e. OB12481-md.jpg

Mobile

Same as desktop

Same as desktop

Same as desktop N/A Same as desktop but size is optimized for mobile.

Same as desktop but size is optimized for mobile.

Same as

Additional Notes

Width Height Font Position Color

Desktop

Close Button Not editable

Arrows Not editable

Icons Not editable: 54 px

Close Button Not editable

Arrows Not editable

Icons Not editable: 54 px

Close Button Not editable: KyrialSansProRegularRegular, sans-serif, 1.4rem

Icons Not editable

Close Button Not editable: Upper-right corner

Arrows Not editable: Left and Right

Close Button Editable

Arrows Editable: Rectangle and arrow (arrow has hover color)

Icons Editable: Follow link and hover color convention of the site

Mobile

Same as desktop but size is optimized for mobile.

Same as desktop but size is optimized for mobile.

Same as desktop

Arrows: N/A

Attachm ent A:Tem plate C Style Guide 2021 of 36

7.0 Education R

esources

Education Landing -D esktop

M obile

Lesson Plan -D esktop

M obile

U niversity M odule D esktop

M obile

U niversity M odule D etails -D esktop M obile

7.1 Education Landing

The Education Landing starts with an introductory paragraph in the left column. The right column showcases the resources.

Left Column

Width Height Background Color Background Image Heading Body Copy

Desktop

Not editable 390px Variable

Editable

The background image should blend into the background color.

Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Not editable: Text, All caps

Choices should be consistent with the Exhibition Collection landing page, left column.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

Item Image Width

Item Image Height Heading above Image Copy Page Background Color

Desktop

Not editable 266 px

Not editable 162 px

Not editable: Text, Font-family, weight, size

Editable: Background color, Lesson Plan and University Module should have different colors.

Heading, Lesson Info, Description

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Not editable: Text, All caps

Choices should be consistent with the body copy of the site

Editable

Mobile (bottom portion)

203 px

Variable

The background color is the same as the desktop version right column.

7.2 Lesson Plan

Left Column

Width Height Background Color Background Image Copy

Desktop

Not editable 390px Variable

Editable

The background image should blend into the background color.

Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

Lesson Plan Name Lesson Info (Grade, Subject, Time)

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

None Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

Right Column

Copy Page Background Color

Desktop

Description, Description Copy, Links, Accordion titles, Copy within accordions.

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Not editable: Text "DESCRIPTION", All caps

Choices should be consistent with the body copy of the site

Editable Same as Education Resources Landing page

Mobile (bottom portion)

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

7.3 University Module Landing Page

Width Height Background Color Background Image Copy

Desktop

Not editable 390px Variable

Editable

The background image should blend into the background color.

Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

University Module Name

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

Copy Page Background Color

Desktop

Description, Description copy, Class No and title, Description

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit. Colors should be chosen from the exhibit palette.

Not editable: Text "DESCRIPTION", All caps

Choices should be consistent with the body copy of the site

Editable Same as Education Resources Landing page

Mobile (bottom portion)

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

7.4 University Module Details

Width Height Background Color Background Image Copy

Desktop

Column Not editable 390px

Class buttons Not editable 44px

About This Module N/A

Column Variable

Class buttons Not editable 44px

About This Module N/A

Column Editable

The background image should blend into the background color.

Class buttons Editable: Follow link and hover color conventions that have been set for the exhibition site.

About This Module N/A

Column Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

Class buttons N/A

About This Module N/A

Column University Module Name

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Class buttons Not editable

About This Module Not editable

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

Copy Page Background Color

Desktop

Class No and Class title, Description, Description copy, Links, Accordion titles, Accordion content

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit. Colors should be chosen from the exhibit palette.

Not editable: Text "DESCRIPTION", All caps

Choices should be consistent with the body copy of the site

Editable Same as Education Resources Landing page

Mobile (bottom portion)

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

8.0 Traveling Exhibition

The link for "Traveling Exhibition" on the main navigation bar and footer takes visitors to the specific booking information for this exhibition on the "Orange" site.

9.0 Credits

Credits - Desktop Mobile

Width Height Background Color Background Image Copy

Desktop

Not editable 390px Variable

Editable

The background image should blend into the background color.

Editable: Height Not editable: Width

The background image can be anchored to the top or the bottom of the page but should blend into the background as the page lengthens depending on the number of assets in the right column.

Editable: Color, font-family, weight and font size

Not editable: Heading "CREDITS"

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit.

Choices should be consistent with the Exhibition Collection landing page, left column.

Mobile (top portion)

Fully width of screen

Responsive

Variable

Editable

The background color is the same as the desktop version left column.

Copy Page Background Color Page Background Image

Desktop

Heading, Name, Title

Editable: Color, font-family, weight and font size

The font-size may vary slightly depending on the font-family. Visually the size should be similar from exhibit to exhibit. Colors should be chosen from the exhibit palette.

Color for heading and names should be consistent with colors on other pages of the site.

Not editable: Heading - All caps

Not editable: Two-column format for name and title

Choices should be consistent with the body copy of the site

Editable Same as Education Resources Landing page

Editable

Mobile (bottom portion)

Same as desktop but size is optimized for mobile.

Size should be visually consistent from site to site.

10.0 Icon Glossary

Icon Text Label Font Width Height Color

Not Editable

BACK

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 51px

Not Editable 51px

Icons used throughout the site have the same link and hover colors throughout the same exhibition site.

Not Editable

NEXT

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 51px

Not Editable 51px

Not Editable Item

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 55px

Not Editable 55px

Not Editable Full Item

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 55px

Not Editable 55px

Not Editable Text

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 55px

Not Editable 55px

Not Editable MedlinePlus

Not Editable KyrialSansProSemiBoldRegular, sans-serif, font-size: 1.4rem

Not Editable 55px

Not

55px