Alert bar with or without a CTA can be fixed or slide in. Link Text

Page Title (only visible above this paragraph in Edit mode) is to populate the page list in WordPress, browser tab and breadcrumb. The H1 is either in the Hero or added as the first Heading (below) on the page. Topic Pages only programmatically use this title as the H1. The breadcrumb is also programmatically populated and added to the page.

Foundation Website Refresh

Templates and components are established so that the internal web team can use them to create pages and populate the new site with new and existing content.

Gutenberg Components for Building Pages

HERO BANNERS: Image or color background. Height of image determines height of component. Overlay dark or white text to pass contrast ratio with background color, tag as the H1 or just as ‘hero text’ if H1 is on-page. May include secondary text and CTA button. The height of a hero banner is set by the height of the image. For consistency, hero banner images should be 1600px x 550px for a main hero, and 1600px x 350px for a short or secondary hero.

Hero banners for Story Wide and Story Narrow pages should use a 1600px x 350px image with the right column Document/Page Attributes/Template set to Narrow or Wide Content to create the Content overlay area.

Lung Health A-Z Topic Pages have a library of 12 hero background images to choose from. Search for lunghealth in the Media Library to select an image.

H1 Hero Message Placeholder

H2 Hero Placeholder Example

Standard hero image 1600 x 550. This is an optional secondary message area. Text and button positions are left or right half of image. Image dimming defaults to 20 opacity to improve contrast for white text—set to zero for none.

Button Label

H3 Hero Short Example

Short hero image size 1600 x 350. Save images as JPG, optimized for web, not progressive, using high, very high or maximum quality, balancing quality with file size to be around 200KB.

In-page H3 Hero Example

A hero can be used inside of a ‘CHEST section’. The background will fill the main content max width of 1140px, height is determined by the image height—this placeholder is 550px tall. This hero text message is Alignment Right, no button.

HEADINGS AND COPY: May be on a color background that passes contrast ratio. Heading tags in correct page structure as H1 through H5. Copy content includes lead-in style, paragraph, highlighted text, spans of bold or italic allowed. Headings and copy can be left, center or right aligned. Max line length for paragraph copy is 9-col desktop (848px)

H1 Title Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing 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 sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam consequat sed doeiusm.


SECTIONS: Color backgrounds that passes contrast ratio with text may be used to visually group content or define page sections. Divider HRs may also be used, full width of browser window or a 50% wide version to create subsections of content within a section.



CONTENT COMPONENTS: Components can be placed on a background color, can include images, video, appropriate level of h-tags, category labels, lead-in, body copy, by-line, CTA button (primary, secondary, or text)

H3 heading placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H3 heading placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

12 MINUTE READ

Optional Caption

H3 placeholder one to two lines

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author Image

30/03/2020

By Kate Pultz

CHEST Info Box
  • Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam consequat sed doeiusm.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

H3 heading placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

FULL WIDTH CONTENT COMPONENTS: These components have built-in background color full width of the viewport/browser window:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3 Support the CHEST Foundation

H3 Simple Banner Heading Placeholder

H4 and/or body copy additional content area. Background color can be changed, Text white or dark.

CONTENT CONTAINERS: Containers for additional text or other content that initially is hidden and can be viewed at users interaction.

  • Accordion Bar Label

    Lorem ipsum dolor sit amet, consectetur adipisicing 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 sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam consequat sed doeiusm.

Popover Top Example
Popover Modal Example
Popover Bottom Example
SIGN UP TO STAY INFORMED »

CALLS TO ACTION AND NAVIGATION: Call to Action buttons should cascade as follows: Solid blue button should be considered the Primary CTA on a page and should only be used on the top one or two CTAs on a page. Outline buttons are Secondary CTAs, and a Text button is most common for multiple instances on a page.

Navigation includes Left Column Page Level Navigation for website sections that have multiple pages, such as a single lung health topic. Pagination and Back to Top elements are available as well.

SPECIAL USE ELEMENTS: Horizontal Button navigation for sepcial circumstances when Left Column Page Level navigation is not appropriate.

A-Z navigation is intended for the Lung Health section of the website only.

In-page search is available on a Search Results page but there may be instances where it might be applied.

  • About
  • Symptoms
  • Diagnosis
  • Treatment
  • Resources
  • Item 1
  • Item 2
  • Item 3
  • Item 4

H5 Popover Top

Posuere consectetur est at lob ortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quamed.

H5 Modal

This is a modal.

H5 Popover Bottom

Posuere consectetur est at lob ortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quamed.

Sign up to stay informed





SPECIAL USE ELEMENTS: Horizontal Button navigation for special circumstances when Left Column Page Level navigation is not appropriate.

A-Z navigation is intended for the Lung Health section of the website only.

In-page search is available for on a Search Results page but there may be instances where it might be applied.

FONTS: Verdana Pro with color, sizes, weights and line spacing as established in style sheets. Alignment may be left, right or centered on each component or section.

H1 – Header

H2 – Header

H3 – Header

H4 – Header

H5 – Header

Lead-in Paragraph

CATEGORY LABEL

Paragraph

Inline or List Link Text

Link Text Focus State

Photo Caption or Small Label


COLOR PALETTE:

Primary background colors: use with text colors shown for contrast ratio/accessibility compliance.

Chest Maroon and Chest Yellow are preferred colors for skinny ribbons/alert bars.

Primary Colors

Secondary background colors: use these colors sparingly if at all, as a single color accent on a page. Use with text colors shown for contrast ratio/accessibility compliance.

Secondary Colors