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

H1 HERO MESSAGE IN-CONTEXT

H2 HERO PLACEHOLDER

H3 HERO SHORT

IN-PAGE H3 HERO

For desktop and laptop view, hero image backgrounds will be full-width, stretching across the entire screen. On mobile devices (and sometimes tablet devices), the image will stack above the content (i.e., text & call to action). Therefore we will need two different graphics to be used for this variation in the following dimensions:

Full-width: 1600px by 550px
Mobile/Table: 768px wide

HERO IMAGE EXAMPLES

Color backgrounds that passes contrast ratio with text may be used to visually group page content or define 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.

COLOR BACKGROUND EXAMPLE

HR DIVIDER EXAMPLE

Content 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)

• Image Left (text at right)
• Image Right (text at left)
• Image Card
• Story Card
• List Item
• Story by-line with headshot, datestamp and author
• Social share icon set
• In-page Boxed Content
• Alert Bar Content Width
• Video Right (text left)
• Single Video Player

IMAGE LEFT (TEXT AT RIGHT)

IMAGE LEFT (TEXT AT RIGHT)

IMAGE RIGHT (TEXT AT LEFT)

IMAGE RIGHT (TEXT AT LEFT)

IMAGE CARD

Images used on cards should be 520px wide

---

IMAGE CARD EXAMPLE

STORY CARD

STORY BY LINE WITH HEADSHOT, DATESTAMP, AND AUTHOR

SOCIAL SHARE ICON SET

IN-PAGE BOX CONENT

ALERT BAR CONTENT WIDTH

VIDEO RIGHT (TEXT LEFT)

VIDEO RIGHT (TEXT LEFT) EXAMPLE

SINGLE VIDEO PLAYER

Full width content components have built-in background color full width of the viewport/browser window:

• Skinny Ribbon/Alert Bar Full Width
• Simple Banner
• In-page Banner

SKINNY RIBBON/ALERT BAR FULL WIDTH

SIMPLE BANNER

IN-PAGE BANNER

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

• Accordion: in-page containers that can be populated with any content component except full browser window width components
• Popover Top and Bottom: with text content
• Modal Window: shown with Boxed Content Component but can contain text, video and images.

ACCORDION

POPOVER TOP AND BOTTOM

MODAL WINDOW

SIGN UP TO STAY INFORMED »

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.

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.

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

Search

Search

When creating a table, consider how it will present on mobile devices. If the table has a lot of text and/or is more than two columns, create separate/broken down tables for mobile use.

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

• Headings are #54585A or white
• Body copy is #262626
• Link text is #0779A6
• Buttons are #55799B background or border and text label color

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.

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.

How to use components

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.

• Use the Document/Page Attributes/Template to use the default template or to set Wide or Narrow Content for a story page
• Parent Page selection will make the page a child of another, and set the breadcrumb to show that structure
• Persistent elements: global sticky plus reduced-on-scroll header, breadcrumb and footer/legal
• Page content is ‘stacked’ in sections
• Individual sections may have a background color or background image (hero image)
• Background colors or images extend to the full browser window width
• Desktop width 1170 pixels — 1140 content area (15px outside gutters) 12 cols with 30px gutters
• Tablet (768) 690 pixel content width and mobile (320) 290 pixels content width
• Layout templates: 12-col, 8-col narrow, 3-col left/9-col or 4-col left/8-col
• Goals for a mobile visitor are most likely A–Z Lung Health topics and event info
• Make primary CTA for each page front and center and secondary tasks below the initial viewport
• CTAs should not launch new windows on mobile unless to external websites
• Search is persistent in header with auto-completing queries
• Form labels are inside input fields and forms validate in real time not on submission