Our brand

The goal of brand standards is to protect the strength of our brand so that it continues to create value for our company. Recent studies show that there’s nothing more important than branding —it’s the major touchpoint that the public has when it comes to how they perceive our business. Take for instance the following statistics:

• 64% of consumers say that shared values are the main reason that they have a trusted relationship with a brand. Our brand message and image convey not just our products or services, but the values of our organization.
• Consistent presentation of a brand increases revenue by 23% on average. Repetition and consistency are two cornerstones of any successful branding efforts.
• 65% of people that feel an emotional connection to a brand, say it’s because “they care about people like me.” Forming a long-term bond between our brand and our customers is critical to our success.

Who we are

The following statements capture the essence of our organization’s beliefs and values and define its place in the world.

• Vision ─ We see patients and physicians collaborating to revolutionize lung care.
• Mission – We want to champion lung health by supporting clinical research grants, community service and patient education.
• Essence ─ Beating lung disease is our business. Helping people do it is our passion.
• Values ─ Education, Patient Welfare, Knowledge, Generosity, Transparency
• Personality ─ Helpful, Optimistic, Honest, Respectful, Empathetic, Trustworthy, Collaborative

Our differentiator

“The Foundation’s level of expertise enables us to publish comprehensive and proprietary content. Rather than using repurposed, generic articles that are found across the web, we provide exclusive information that you can’t find anywhere else. Currently, we are not the first site a user will come to, but after experiencing what the Foundation has to offer, we will certainly be the last.”

Our promise

• Empower – We will help patients better understand their diagnosis so that they can confidently seek out the appropriate medical care. We will help caregivers get access to the resources they need.
• Educate – Not only will we give people the information they are searching for, we will give them additional resources that they may not know they needed.
• Connect – We will help people feel less alone by building a community where everyone has a voice and everyone feels welcomed.

Messaging

foundation.chestnet.org needs a unique value proposition that is consistent across the site. New visitors should immediately understand what we do and how it can benefit them. Messaging points should: 

• Show that we are humble but take pride in what we do.
• Emphasize that we are your go-to resource when it comes to lung health.
• Speak to users as our friends and focus on how we can work together.
• Use authoritative yet helpful language when it comes to disease states.
• Show users that we publish the most up-to-date and accurate information they can find.

Message points do not:

• Over-complicate information
• Focus on donations
• Only speak to doctors and clinicians
• Present information in a pretentious, clinical way
• Speak in an arrogant, conceited or egotistical way

To ensure that brand messaging stays consistent throughout the site, a member of the marketing team should serve as the content gate keeper to ensure that:

• “raw” copy is never published on the site
• style guidelines are followed
• content is tonally correct
• messaging aligns with our brand

Voice and tone

Although the Foundation is a separate entity from The American College of Chest Physicians, both organizations come from a singular place. Therefore, both brands should follow the same guidelines.

• We are conversational in tone
• We follow the AMA style guidelines and use active voice
• We use indicative (ordinary) statements
• We rarely use imperative (commanding) statements

Foundation specific tone:

• We speak in a friendly, compassionate way
• We favor short, succinct sentences
• We use “breath” related puns
• We strive to simplify complex topics
• We are upbeat and positive
• We are supportive, helpful and empathetic

We are:

• Humble experts
• Helpful advisors
• Educators
• Consumer advocates
• Service providers
• Friends and storytellers

Grammar

Maintaining professionalism in our writing and style consistency throughout the CHEST brand is imperative. Adhering to certain rules of grammar helps us keep our writing clear and consistent.

Many of the style elements are derived from the American Medical Association’s (AMA) 10th edition of the AMA Manual of Style. When working with some public-facing projects, Associated Press (AP) style is sparingly used.

Please refer to Style Elements for Staff or check with the Editorial Resources Department for answers to your CHEST style questions.

Important – all copy needs to reviewed by the Editorial Resources Department before it can be published!

AMA/AP style

• Use AP style only for social and press releases
• Use AMA style for all other content

AP style and AMA/CHEST style basics 

• Both AP and AMA use “health care” as two words. AMA hyphenates “health care” as an adjective, however.   
• Both AP and CHEST style of writing typically spell out numbers one through nine. CHEST style, however, uses numerals for units of time (eg, 2 weeks).  
• Both styles now punctuate “email” as one word and “internet” as lowercase. 
• For CHEST leadership positions, we will capitalize the title as a proper noun, regardless if the title precedes the name (eg, Dr. Martha Z. Pascale, the President of the American College of Chest Physicians)  

AP style cheat sheet

Documents that use AP: press releases, CHEST Today and NewsBrief, HEADLINES, most social media—please note for stories on social media, we do consider edits for brevity even if it does not conform to AP style (for example, no periods for medical degrees).

• Uses periods w/abbreviations (Consistently remove periods if extensively used on social media/per your discretion): 
  • a.m., p.m.
  • U.S., U.K.
  • M.D., Ph.D.
  • e.g., i.e.
  • versus (in ordinary speech or writing) or vs.
  • When these months are used with specific date: Jan., Feb., Aug., Sept., Oct., Nov, Dec
• Abbreviate titles when used before a full name: Dr., Gov., Rep., Sen.
• Use the % sign when paired with a numeral, with no space, in most cases (a change in 2019):
  • 2.5%
  • In casual uses, use words rather than figures and numbers: She said he has a zero percent chance of winning.
  • 60 degrees
• Uses X-ray for both the photographic process and the radiation process themselves.
• AP does not italicize words in news stories.
• In headings, AP style capitalizes the first letter in a headline and the first letter in proper nouns.
  • Martha Zaborowski baked a cake—what will she do next?
• AP does not use the serial comma.
  • Red, white and blue

AMA style cheat sheet

Documents that use AMA: CHEST Thought Leaders’ blog, Twitter chat blogs, NewsBrief and CHEST Today (the CONTENT, NOT THE HEADLINES, which are AP), member emails, CHEST Foundation material, and journal-related content.

• Doesn’t use periods w/abbreviations:
  • AM, PM
  • US, UK
  • MD, PhD
  • eg, ie
  • vs
  • January, February, August, September, October, November, December
• Abbreviate just military titles like Gen, Col, Capt.
• Uses the percentage, degree symbol.
  • 2.5%
  • 60°
• A radiograph is a picture taken with x-rays; x-rays are particles of radiation. Use radiograph rather than x-ray.
• AMA italicizes new terms, book titles, etc.
• In headings, AMA capitalizes nouns, adjectives, verbs with two or more letters, and prepositions with four or more letters.
  • Martha Zaborowski Baked a Cake—What Will She Do Next?
• AMA uses the serial comma.
  • Red, white, and blue

House style

House style guidelines outline how an organization’s internal and external documents should be written. House style guidelines cover writing and formatting such as word choice, tone, copy length, and colors and fonts. For additional house style elements, see “Developer Resources” at the end of this guide.

Active voice

Use active voice. Avoid passive voice.

In active voice, the subject of the sentence does the action. In passive voice, the subject of the sentence has the action done to it.

• Yes: Marti logged into the account.
• No: The account was logged into by Marti.

Words like “was” and “by” may indicate that you’re writing in passive voice. Scan for these words and rework sentences where they appear.

One exception is when you want to specifically emphasize the action over the subject. In some cases, this is fine.

Verb usage

Verbs are important. They incite a user to take action. They grab attention. Titles, headings, text links and buttons should use verbs as much as possible.

Character counts

Hero image messaging

The title of a hero image message should be one or two short sentences that include periods. Subtitles are optional and should not exceed 120 characters with spaces.

Examples:

Title: Take a breath. Help is here.

Subtitle: We’re dedicated to helping you better understand your condition and the treatment options available.

Title: The time to act is now. We start by listening.

Title: Improving your life starts today.

Stacked/side-by-side components

Description copy in these sections should not exceed 350 characters. The text link below the description should include a verb at the beginning. Example: EXPLORE OUR RESOURCES
 

 Copy that is next to a picture should be the same height as the picture. Copy that is under a picture should be the same width as the picture.  

 
See the “Copy Structure” section for more information about consistency on these types of sections.

News & Events page

The copy in the 3-across “News & Events” cards should be in the range of 330-350 characters. When adding a new story, make sure the text aligns with the other stories. If your copy drops to an additional line (misaligning the text links) shorten the copy.

Web elements

Every piece of content we publish is supported by a number of smaller pieces. This section lays out our style in regards to these web elements, and explains our approach to SEO, which involves collaborating with CHEST’s SEO experts.

Headings

H1 tags are important. They tell search engine’s and users what our page is about. For website visitors, think of them as “this is where you are” billboards – a way to tell users that they came to the right page. With that in mind, copy on the page should always support the H1.

H1s should also be persistent and not changed out regularly. This will improve indexing ( the process that search engines use to store information about web pages, enabling them to quickly return relevant, high quality results.)

H1 and heroes – first letter of every word capitalized (not title case; articles are cap too)

Subheadings

H2, H3, etc. tags – sentence case (only capitalize the first word and proper nouns)

Page structure

Page structure serves as a visual hierarchy for the users as well as a semantic HTML markup.

• H1 is the topic for the whole page (should be similar to the page title)
• H2s are for each major section heading
• H3s subdivide any of those sections in to subsections
• H4s subdivide any H3 subsection further
• Then on to the next H2 for the next major section heading…

Links

• Link text as list item/nav label: Title Case
• Link text in-line (in paragraph copy): lower case (unless start of sentence)
• Link text that is sentence format should be sentence structure
• If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark
• Link text that is near a button can be all caps as a ‘borderless button’ to balance

All links to PDFs or to outside websites should open in a new tab (if the navigation at the top of
the page is no longer the ‘Foundation navigation header’, then it should be a new window.) Only links to other Foundation pages should open in the same tab.

For both the user and good SEO, a link should tell something about the page or asset you’re about to visit. Write quick two or three word summary that best describes the content the link is going to. Link labels should also make sense out of context, so use common and clear labels.

• Do not use “click” – use words like “select”, “download”, “view”, “explore”, “read”…
• Be clear about what the user will see or get: [topic], PDF, infographic, etc.
• Don’t use positions like “here,” “below” or “at right.”

Examples

Do not use: Click here to read the latest news about lung health.

Do use: Read about the latest lung health news from our experts.

Buttons

Buttons are programmatically all caps. Buttons should always contain actions. The language should be clear and concise.

• DONATE
• VIEW ALL TOPICS
• LEARN MORE ABOUT ASTHMA

Forms

• Form titles should clearly and quickly explain the purpose of the form.
• Use title case for form titles and sentence case for form fields.
• Keep forms as short as possible.
• Only request information that we need and intend to use.

Lists

Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction. Number lists only when the order is important, like when you’re describing steps of a process.

Page Titles

The ‘Page Title’ is visible in the URL string, browser window ‘tab’ and is the label that becomes a ‘bookmark’ if someone were to bookmark the page. It is used for indexing the page, tells search engines what a page is about, and shows up in search results. Therefore, use keywords when writing titles.

Alt text

Alt text is a way to label images, and it’s especially important for people who can’t see the images on our website. Alt text should describe the image in a brief sentence or two.

SEO

We write for humans, not machines. We don’t use gross SEO techniques like keyword stuffing to bump search results. But we also want to make it easy for people and search engines to find and share our content. Here are some ways to do this:

• Organize your page around one topic. Use clear, descriptive terms in titles and headings that relate to the topic at hand.
• Use descriptive headings to structure your page and highlight important information.
• Give every image descriptive alt text.

It is important to confer with CHEST’s SEO expert when creating a new page. Ask for a list of keywords that the page should focus on. You can also work with this person to track the page analytics, such as page views and bounce rates. This will help inform if the page is performing in the way you’re expecting it to and it it’s resonating with users.

PDF naming

• PDFs should be named starting with the [topic]-subject.pdf, use hyphens (no spaces,
  no underscores) and be clear and clean (PDF files names will be visible to the public).
• File name should always include -CHEST-Foundation at the end.
• PDF’s can have author, topic, keywords and meta description added when saving the file, which makes for good indexing.
• Remove any cryptic internal labels, version numbers or ‘FINAL’.
• Make sure your file name is unique and upload PDFs to Media folder.
• Thumbnails images of PDFs and the link text should both link to the actual PDF in a new tab.

Graphics naming

File names in the Media folder need to be unique and clear by usage, specific page or component. Name all lower case, with no spaces, use hyphens : [whatitis]-[topic]-[dimensions-color-characteristic].jpg or .png.

Example: hero-homepage.png, icon-lunghealthaz-a2aaad.png, promo-ild-350×120.jpg

Copy structure

CHEST sections are used by developers to build the framework of each webpage. These sections allow for like content to be grouped together, either by stacking or using columns.

Copy that is grouped into like sections should follow a structured pattern. Patterns consist of images, character counts (or line counts), verbiage, text links and buttons.

Following patterns is especially important on pages that use 3-across rows where inconsistency is more obvious. Here is an example of an inconsistent pattern:

Notice how the 3^rd news story does not use a verb in the headline or in the text link. However, the character counts across the 3 stories do match. If they didn’t, the text links wouldn’t align properly.

All content falls into one of the following categories. Once you identify the category, look for the pattern you need to follow.

• Inspirational Storytelling
• Compelling Multimedia
• Educational Resources
• Supporter Recognition
• Community Impact
• Actionable Deliverables

“Lung Health A-Z” topic pages

Content on these pages is divided into easy-to-navigate sections with a (mostly) standardized left column navigation structure, including the Clinician Resources section. This consistent structure makes it easy for a user to know what to expect when looking at a couple of topic pages, becoming a more valuable reference resource (users like to know what to expect when seeking out information).

Best practices

A simple Google search will yield hundreds of results when looking for digital content best practices. To keep things simple, these are the best practices that are most important for foundation.chestnet.org, not only as a subset of the CHEST brand, but as a philanthropic site.

Important – to implement these best practices, you’ll need to collaborate with other departments, specifically marketing, communications, and the web team.

Use visuals rather than text

Users are often overwhelmed with the amount of information or data they can find on the internet, especially on a medically focused site. The easiest and most effective way to combat this, and keep users engaged with our content, is to use visuals to disperse information. Implement as many visuals as you can on the site, but make sure they are meaningful and complement other visuals on the same page.

• Be sure visuals are aligned with our brand
• To be conscious of legibility, do not overlay text on a graphic
• Avoid embedding text in a graphic
• When overlaying text on a graphic be conscious of legibility
• ALWAYS review content and visuals on a mobile device

Tell our story

Leverage stories, case studies, quotes and video clips of others talking about the impact of our mission and programs to show authenticity. This third-party validation offers content filled with emotion rather than just the facts. In addition, donors are motivated by the idea of helping one person versus the masses, so focus on quality rather than quantity.

Leverage content across mediums

We want to get as much traction as we can out of every piece of content that is created. When releasing a new piece, confer with the Marketing Team on the best way to leverage it across the site. Focus on placement (i.e. the Homepage, News & Events page and Donor page), distribution channels (i.e. emails, newsletters, Donor Spotlight, ect.) and social media.

For vendors/designers

Creating assets for web

The foundation website is a public facing website intended to provide lung condition to the general public.  To leverage this opportunity, think about how to best display content.   Any time you are designing something, consider how this will be shown on the public.  With %% people using mobile devices to browse the internet, always consider how the information/graphics will be displayed to these users. 

Text over images & contrast

When choosing to place text over an image, consider both the text color and the main color of the image. Images with mostly light-colored backgrounds—or images edited to appear faded—are not well suited to white text because the colors are too similar. In these situations, the background will need to be darkened in order to provide enough contrast.  Utilize a tool such as the Color Contrast Analyzer Chrome browser extension to help determine if the background provides adequate contrast for the overlaying text.

CHEST color palette

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

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.

Image File Format & File Size

The three primary image file formats used for web are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization. To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only. PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger. JPEG is a compressed file format that slightly reduces image quality in order to provide a significantly smaller file size. Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

We recommend that you use JPEG images when at all possible to keep image file sizes to a minimum. Do not exceed the following file sizes for graphics:

• Full-width (1170px) – 250 kb
• Half-width – 125 kb
• Quarter-width – 63 kb

Ensure text legibility across all device types

Reduced screen size means less space for both the image and the text. If the text is contained within the image, the negative impact of embedding text within images is magnified on a small screen: the text shrinks as the image shrinks. On mobile devices, any text must appear to be 14px or larger.

Design your graphics for a specific layout

Please confirm with CHEST which layout your graphic will be placed as that will determine the required dimensions for the graphic. Also, note that you don’t need to use the entire width of the page but should design to keep text legible and appropriate across all device types. Ensure that text is not too big for desktop users nor too small for mobile users. 

PDF Thumbnails

PDF Thumbnails can be used to link to media items such as patient guides, infographics, and flyers. The width of these items should be no wider than 250px and height no taller than 325px.

Icons

Icons designed for the Foundation website should be 120px by 120px, colored grey (#A1AAAD), and saved as a PNG file with a transparent background.

Topic Pages (i.e., Lung Health A-Z)

Content on these pages is divided into easy-to-navigate sections with a (mostly) standardized left column navigation structure, including the Clinician Resources section. This consistent structure makes it easy for a user to know what to expect when looking at a couple of topic pages, becoming a more valuable reference resource (users like to know what to expect when seeking out information).

When designing items such as patient education guides, consider which assets from the guides (images/content) may be included on the website.  Be mindful about how these graphics will appear on different screen sizes (i.e., 320px wide mobile vs 1070px desktop).  Look for opportunities for things to be interactive (roll overs, states). 

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

Chest Brand / Designing for Print

The CHEST Graphic Identity Guide contains the approved graphic elements of the organization’s visual identity system. Please note that the elements contained herein are copyrighted and are for official CHEST use only. The sole source for all CHEST signature and stationery files is the Branding team. For more information, contact Claudia Egresits at cegresits@chestnet.org.

Click the link below to access our Graphic Identity Guide which focuses on print.

For developers

Please reference the “All Components” page when building pages on the website. It includes templates and components that the internal web team should reference when creating pages. Detailed instructions are included on how to build and properly use every element on the site. This will ensure that foundation.chestnet.org remains a cohesive site that follows our brand and style guidelines. Most importantly, it will create a consistent user experience.

Elements on the “All Components” page include:

• Default and layout templates
• Parent Page selection and breadcrumb information
• Persistent elements such as global sticky and footer/legal
• Background color and image guidelines
• CTA and button guidelines

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

Colors

#f5f4f0	Stone
#f9faf7	Light Stone
#55799b	CHEST bluegray (buttons—background, border, text buttons, banners)
#446688	Dark CHEST bluegray (banners bumped up against footer)
#f5dd71	Yellow (use minimally, for alert bars, banners bumped up against footer)
#f7f7f7	Gray (icons)
#a2aaad	Dark Gray (icons)
#0779a6	Link text blue in body copy or lists

Erin Popovich Endowment / ILD

#b9cbce	green gray
#e2dfd8	light neutral
#573878	dark purple
#935c8e	mauve
#606060	dark gray

HTML

These are common punctuation elements needed to follow our house style. Note that you’ll need to edit these in HTML and then switch back to edit visually.

’	apostrophe
›	right single angle
‑	non-breaking hyphen
 	non-breaking space (use in proper names, link text or phrases)
— or —	em-dash (an em-dash is used to set apart ideas—in one sentence)
– or –	en-dash (an en-dash shows a range. Like A–Z, or 1 pm–2 pm)

Images

RGB, 72 DPI. Final format will be PNG (for transparency) or JPG

Hero: Lung Health A–Z card background image	1600 x 550
Hero: Banners (Main pages – with/without text overlay)	1600 x 350 standard height, up to 550px tall
Hero: Story Narrow/Wide background image	1600 x 350
Icons (transparent PNGs)	144 x 144 (scale in editor to 100–120px)
Video Title Cards	640 x 360
Image Grid (Left or Right)	768 x 550
Story Card Top (full image area or icon)	520 x 200–290 (3 across need to be same height)
PDF thumbnail: flat, one sheet	Use master file for border, shadow. Scale in page to 231px x 300px
PDF thumbnail: 3d ‘booklet’	Use master file for perspective, shadow. Scale in page to 231px x 300px
Headshots	Square, larger than needed. Scale to 295px square in page
Logos	Transparent PNG file, larger than needed and scale in page

Lung Health A-Z pages

Topic pages use the “Topics Sections” in WordPress. The first is marked as the primary, with the remaining sections secondary. This generates the landing page that has the feature hero image behind the title card and secondary pages with the reduced title card.

Title Card is generated from the Page title, and authors listed at the bottom of the editor.
Section ‘Titles’ generate the left column navigation.

To make pages have the “Lung Health A-Z” breadcrumb and appear on the A-Z List page:

1. Set the A-Z List page as the parent page.
2. On the A-Z List Page, shortcode add the page IDs to include to the extra_pages. Current shortcode on A-Z List page includes ILD main page so is [ azlist extra_pages=“2324” ]. Add future pages that aren’t topic pages by just comma separating the page ID numbers.
3. Go to Settings: Permalinks and hit the save button for URLs to update.

English to Español links

Spanish pages should be a child of the english page to show relationship/indented in A-Z list. Use: /lung-health-a-z/english-name/espanol

WordPress editor input

At the bottom of the editor window, you’ll need to input:

• Keywords/meta descriptions
• Document Title (what shows in the browser tab or when bookmarked) should be reverse breadcrumb: [Page Name] – [Parent Page] – CHEST Foundation
• Checkboxes

Main pages

Use CHEST sections to build the initial framework of the page and group like content or create topic sections of the page. Think about the content and sections you need and build the ‘framework first: plan your page stacking, using CHEST sections. Populate with components needed, possibly in columns.

CHEST sections can be set to ‘animate’—visually ease in on page load—add background colors and control width of content.

Line length

Max line length for copy content (on the 12-column grid) is 975px or 780px.

Our website defaults to a content width of 1170, which works well for side by side content, such as text to the right of an image, or 3-across image cards.

For standalone paragraphs, copy line length should be controlled by the CHEST section panel controls (in right column of editor) for best on-screen readability. Change from default to 975 px (115 characters per line/10-cols) or 780 px (95 cpl/8-cols).

Popovers and modal boxes

• Make sure to copy all code onto notepad to strip out formatting, curly quotes and other Word formatting (this will cause an issue).
• ID numbers must only be used once per page with trigger matching target (1/1, 2/2 etc. actual sequence doesn’t matter, just don’t have two triggers, or two targets, on a page with the same ID).
• Variations are popover top or bottom (most often for a definition or small description) and a modal box which can contain copy, images, a form or video.
• Attributes allow the trigger link to have a ‘button style’ and can control the width or height of the target item.

Example code for ‘Highlighted text’ (intended for definitions in paragraphs of body copy)

In paragraph: Popover Top Example
[ popover style=”top” id=”1″] Popover Top Example [/popover]
 
or: Popover Bottom Example
[ popover style=”bottom” id=”2″] Popover Bottom Example [/popover]

At bottom of editor, add a paragraph or shortcode (not in a CHEST section):
[ popover_content title=”H5 Popover Top” style=”top” id=”1″]Posuere consectetur est at lob ortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quamed.[/popover_content]
or
[ popover_content title=”H5 Popover Bottom” style=”bottom” id=”2″]Posuere consectetur est at lob ortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quamed.[/popover_content]

Example code for ‘Highlighted text’ opening a modal box
Popover Modal Example
[ popover style=”modal” id=”3″]Popover Modal Example[/popover]

[ popover_content title=”H5 Modal Box” style=”modal” id=”3″]Posuere consectetur est at lob ortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quamed.[/popover_content]

Additional attributes can be defined to have a ‘button’ open a modal:

• On popover: style can be set to linkstyle=“button” or linkstyle=“textbutton”
• On popover_content: add height and/or width using height=“000px” and width=“000px”

Example button linking to modal box for a form with width set on modal:

[ popover linkstyle=”button” style=”modal” id=”4″]SIGN UP TO STAY INFORMED[/popover]

Inline Font Awesome icons

Shortcode: Use to add font awesome icons with your inline text.
Example: shortcode inside of square brackets [ ] that reads: fa set=”far” icon=”newspaper” color=”#262626″ will result in:
 
12 MINUTE READ