Skip to content
Skip to content
Open navigation

Demo Phase3

CDC Announcement Banner

 

Component Name:  CDC Announcement Banner

Fields:  CDC Global Announcement Banner Text

Options:  Able to add links via the rich text field "CDC Global Announcement Banner Text"

Details:  The CDC Announcement Banner is managed as a text property field, labeled "CDC Global Announcement Banner Text" under the CDC section of the CDC Home Page (Project Firstline).

When the "CDC Global Announcement Banner Text" field is set, the CDC Announcement Banner will automatically be displayed on all CDC pages through their layouts. 

The CDC Announcement Banner is also displayed based upon the user's browser session. When the banner is closed by clicking the "x" at the far right of the banner, Javascript is ran which updates the browser's session data to remember that the banner was close and should be hidden on subsequent page loads. This functionality is subject to the end-user's browser settings and data clearing.

CDC Landing Hero

 

Component Name:  CDC Landing Hero

Fields:  CDC Desktop Landing Hero Image, CDC Mobile Landing Hero Image

Details:  Contained full-width Hero component to display an image. In example content, all text and logos are a part of the image. Two image fields are included to select an image for mobile devices and desktop devices.

Mobile image

Recommended width: 750px (height is to client's discretion)

Desktop image

Recommended width: 1440px (height is to client's discretion)

CDC Intro Block

 

Component Name:  CDC Intro Block

Fields:  Heading, Content, Image, Background Color

Options:  Background Color [ Light-Blue | Purple ], Enable Top Margin

Details:  Background Color is displayed for Heading text, where the font is white and the background color is the selected color, either Light-Blue or Purple.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images: 

Recommented size: 700px x 462px;

Aspect Ratio: 3:2

 

On-the-Go Resources

Maecenas id lacus in purus facilisis consequat. Vivamus at arcu ultrices augue suscipit auctor consectetur quis magna. Nunc tristique pharetra arcu, et pellentesque nulla efficitur vel. Morbi eu placerat erat.

Phasellus tempus lacinia felis, sit amet varius enim aliquet eu. Vivamus cursus neque nisi, quis ultrices ligula maximus nec. Nunc venenatis urna non porta volutpat. Vestibulum et auctor lectus. Maecenas vitae pellentesque lectus. Integer accumsan faucibus purus, a lacinia metus placerat vitae. Cras eleifend tristique malesuada.

On-the-Go Resources

Maecenas id lacus in purus facilisis consequat. Vivamus at arcu ultrices augue suscipit auctor consectetur quis magna. Nunc tristique pharetra arcu, et pellentesque nulla efficitur vel. Morbi eu placerat erat.

Phasellus tempus lacinia felis, sit amet varius enim aliquet eu. Vivamus cursus neque nisi, quis ultrices ligula maximus nec. Nunc venenatis urna non porta volutpat. Vestibulum et auctor lectus. Maecenas vitae pellentesque lectus. Integer accumsan faucibus purus, a lacinia metus placerat vitae. Cras eleifend tristique malesuada.

sample image

CDC FAQ Accordion

 

Component Name:  CDC FAQ Accordion

Fields:  Heading, Text Blocks

Options: Enable Top Margin

Details:  The expanding and collapsing accordion component accepts CDC Text Blocks and CDC Plain Text Blocks for the "Text Blocks" field. New "CDC Plain Text Block" is introduced to provide a simple content block that contains the Heading text and Content text necessary to render the CDC FAQ Accordion sections.

Clicking the Heading text for an accordion section will expand the section to reveal the Content text. Re-clicking the Heading will collapse the Content section. Only one section is open at a time. Opening a second section, when another is already open, will collapse the open section and expand the newly clicked section.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Demo - CDC FAQ Accordion

  • CDC Plain Text Block Test 1 Here

    Testing new text here.

  • CDC Plain Text Block 2

    Changed Content - 5/24/2022 Eget est lorem ipsum dolor. Adipiscing vitae proin sagittis nisl rhoncus mattis. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Elit ullamcorper dignissim cras tincidunt. At erat pellentesque adipiscing commodo elit at imperdiet dui. Ornare suspendisse sed nisi lacus. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Blandit libero volutpat sed cras ornare arcu dui. Purus ut faucibus pulvinar elementum integer enim. Ipsum dolor sit amet consectetur adipiscing. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Et odio pellentesque diam volutpat commodo. Erat nam at lectus urna. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Et netus et malesuada fames ac turpis egestas. Phasellus egestas tellus rutrum tellus pellentesque eu.

  • CDC Text Block 1

    Scelerisque purus semper eget duis at tellus at urna condimentum. Cras sed felis eget velit aliquet. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Quis lectus nulla at volutpat diam. Elementum nibh tellus molestie nunc non. Semper eget duis at tellus at urna. Integer eget aliquet nibh praesent tristique magna sit amet purus. Orci dapibus ultrices in iaculis nunc sed augue lacus viverra. Risus at ultrices mi tempus. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Tempus iaculis urna id volutpat. Scelerisque felis imperdiet proin fermentum leo. Vitae tortor condimentum lacinia quis vel. Posuere ac ut consequat semper viverra nam.

  • CDC Text Block 2

    Molestie at elementum eu facilisis. Id aliquet risus feugiat in ante metus dictum. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Diam phasellus vestibulum lorem sed risus ultricies tristique. Felis eget velit aliquet sagittis. Senectus et netus et malesuada fames ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Dictum fusce ut placerat orci nulla. Quisque sagittis purus sit amet volutpat consequat mauris nunc. Elit ut aliquam purus sit. Convallis convallis tellus id interdum velit. Laoreet sit amet cursus sit amet dictum.

    Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Viverra nam libero justo laoreet sit. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Amet massa vitae tortor condimentum lacinia quis. Dui nunc mattis enim ut tellus elementum sagittis vitae. Tincidunt nunc pulvinar sapien et. Fermentum posuere urna nec tincidunt praesent semper. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Urna molestie at elementum eu facilisis sed odio morbi. Mauris augue neque gravida in. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Morbi non arcu risus quis varius quam quisque id. In eu mi bibendum neque. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. At consectetur lorem donec massa sapien faucibus et. Quis auctor elit sed vulputate. Lectus quam id leo in.

CDC News Block

 

Component Name: CDC News Block

Fields: Override Latest News, Background Color, Enable Top Margin

Options: Background Color [ Orange | Purple | Blue | Teal ], Enable Top Margin [ Yes | No ]

Details:  "Override Latest News" field can optionally be left empty. If Override Latest News field is left empty, by default the component will render the newest CDC News Page found under the "Latest News Root for CDC" page which is a field on the CDC Home Page (Project Firstline) in the CDC tab of the content properties. The latest news page is determined based upon the "Date" field of CDC News Pages.

The "Latest News Root for CDC" field is a page reference in which any page type can be selected. If no news pages exists under the root, the component is not rendered.

The "Override Latest News" field accepts only CDC News Pages. If a news page is selected, it will be rendered in the component.

The Enable Top Margin checkbox can be selected to add additional margin to the top of tcomponent.

Images:

Recommended size;  500px x 400px

Aspect Ratio: 5:4

CDC Three Across News Articles

 

Component Name:  CDC Three Across News Articles

Fields:  Articles, Background Color, Enable Top Margin

Options:  Background Color [ Light Blue | Teal ], Enable Top Margin [ Yes | No ]

Details:  The "Articles" field accepts CDC News Pages. Additionally, the "Articles" field can accept "CDC Resource" pages in order to support Embedded Youtube Video content, Download content, and External Link content. Items selected in the "Articles" field will render in the order they appear.

Optionally, if the "Articles" field is left empty, the latest CDC News Pages will be automatically selected in order of newest to oldest from the "Latest News Root for CDC" field of the CDC Home Page (Project Firstline) in the "CDC" tab of the content properties. If no Articles are selected and the Latest News Root for CDC field is empty for the CDC homepage, then the compoent is not rendered.

Selected Articles will be displayed in the order they appear in the CMS editor.  When the Articles field is left empty and news pages are selected automatically, they will appear in order of newst to oldest based upon the "Date" field of the pages. Additionally, when news is automatically retrieved, the "Max Cards to Display for Auto-Retrieved CDC News" field is used to limit the number of news cards to display. The limit can be set from 3 to 999.

For CDC News Pages, clicking the image or the card's heading text will link the CDC News Page.

Optionally, for CDC Resources, clicking the image or the card's heaing text will have a result based upon the resource type. Embedded You Video's will reveal a video modal, while Download and External link resources will link to the content.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images: 

500px x 350px

Aspect Ratio: 10:7

CDC Intro Text

 

Component Name:  CDC Intro Text

Fields:  Heading, Content, Button

Options:  Enable Top Margin

Details:  This text component will display the Heading text, Content text, and the selected Button. The Button is optional. If the button is not present, the text will span the full width of the container. If the button is present, the button will display to the right of the text for desktop devices and below the text for mobile devices.

The Button field accepts "Button Block" and "CDC Register Button Block" content.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Interim Guidance for Managing Healthcare Personnel with SARS-CoV-2 Infection

A symptom-based strategy for determining when HCP with SARS-CoV-2 infection could return to work is preferred in most clinical situations. A symptom-based strategy for determining when HCP with SARS-CoV-2 infection could return to work is preferred in most clinical situations.

Intro Text Block - Without Button

A symptom-based strategy for determining when HCP with SARS-CoV-2 infection could return to work is preferred in most clinical situations. A symptom-based strategy for determining when HCP with SARS-CoV-2 infection could return to work is preferred in most clinical situations.

CDC Alternating Image Text Block

 

Component Name: CDC Alternating Image Text Block

Fields: Image, Title, Text, Link, Link Label, Link Target, Flip Horizontally, Color Theme

Options:  Flip Horizontally [ Yes | No ], Color Theme [ Blue | Gold ], Enable Top Margin [ Yes | No ]

Details:  This component allows the rendering of Text, Image, and Link content to be displayed in an alternating fashion, by using the "Flip Horizontally" checkbox and displaying multiple Alternating Image Text Blocks in series. Additionally, the component can be displayed with either a Blue Background or a Gold Background.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images: 

Recommended size: 500 x 400

Aspect Ratio: 5:4

Three nurses smiling

Alternating Image Text Block Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

meeting room full of people

Alternating Image Text Block Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Testing - Alternating Image Text Block Style 3

Test test mic check - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Nurse looking at resource books in a library

Alternating Image Text Block Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

CDC Featured Resources

 

Component Name:  CDC Featured Resources

Fields:  Heading, Resources, Background Color

Options:  Background Color [ Blue | Gold ], Enable Top Margin

Details:  This component displays CDC Resource pages in a 3 column card layout with a solid color background of either Blue or Gold. For each card, the image, icon and text are clickable. The click behavior for each card depends on the content of the particular CDC Resource. Embedded Youtube Video resource content will reveal a video modal when clicked. Resources with Download content and with External Link content will link the content accordingly.

Each card will render any "Source" and/or "Topics" CDC Taxonomy tags that set for their respective CDC Resource page. The Source tags will be rendered first, followed by any Topics tags. 

If a CDC Resource does not have any Embedded Youtube Video content, External Link content, or Download content, the card will link the the CDC Resource page directly when clicked.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images:

Recommended size: 500px x 330px

Aspect Ratio: 3:2

CDC Featured Resources (Blue Background)
CDC Featured Resources (Gold Background)

CDC Four Across Insights

 

Component Name:  CDC Four Across Insights Block

Fields:  Resources

Options:  Enable Top Margin [ Yes | No ]

Details:  This component displays CDC Resource pages in a 4 column card layout. For each card, the image, icon and text are clickable. The click behavior for each card depends on the content of the particular CDC Resource. Embedded Youtube Video resource content will reveal a video modal when clicked. Resources with Download content and with External Link content will link the content accordingly.

If a CDC Resource does not have any Embedded Youtube Video content, External Link content, or Download content, the card will link the the CDC Resource page directly when clicked.

At the lower right-hand corner of each card, an Add This social media share button is available to share the CDC Resource content. The social media share button will reveal the Add This modal to share the content. For Download and External Link resource content, the respective url link will be shared. For Embedded Youtube Video resource content, the Url from the "Embeded Content URL" field is shared. If embedded content, download content, and external content is not set for the CDC Resource, a link to the resource item directly is linked.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images:

Recommended size: 500px x 550px

Aspect Ratio: 1 : 1.1

CDC Four Across News Cards

 

Component Name: CDC Four Across News Cards

Fields: Heading, News Cards

Options:  Enable Top Margin

Details:  This component displays CDC News Pages in a 4 column card layout. Each card has a semi-transparent purple overaly that covers the bottom half of the card. The overlay contains the Heading text and summary text from the news page. When hovering over a card, the semi-transparent overlay expands to cover the entire card. Clicking either the heading or summary text will link to the CDC News Page. 

The summary text for each card is derived from the "Intro Text" field of the corresponding CDC News Page. If the "Intro Text" field is empty for a news page, the "Content" field is used to generate the summary text. If the "Content" field is empty, then the "Description" field is used to generate the summary text.

The summary text is truncated to a maximum 225 characters in length for when the overlay is at half-height of the card (no-hover). When the overlay is at full height of the card (hover), the summary text is truncated to a maximum 600 characters.

When the summary text is trucated, the text is appended with ellipse (...).

At the lower right-hand corner of each card, an Add This social media share button is available to share the CDC News Page. The social media share button will reveal the Add This modal to share the CDC News Page.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images:

Recommended size: 280px x 400px

Aspect Ratio: 10:7

CDC Four Across News Cards

RenderNewsCard((CDCNewsPageViewModel)article)
RenderNewsCard((CDCNewsPageViewModel)article)
RenderNewsCard((CDCNewsPageViewModel)article)

CDC Resource Carousel

 

Component Name:  CDC Resource Carousel

Fields:  Heading, Resources

Options:  Enable Top Margin [ Yes | No ]

Details:  The CDC Resource Carousel displays CDC Resource pages in a 4 column card layout with carousel slide and pagination functionality. Immediately to the left and right of the carousel slide are previous slide and next slide buttons (< and > symbols) respectively. Below the carousel slide are pagination buttons indicated by circles. The orange circle is the current slide, and the hollow blue cirecles are the other slide pagination buttons.

For each card, the image, icon and text are clickable. The click behavior for each card depends on the content of the particular CDC Resource. Embedded Youtube Video resource content will reveal a video modal when clicked. Resources with Download content and with External Link content will link the content accordingly.

If a CDC Resource does not have any Embedded Youtube Video content, External Link content, or Download content, the card will link the the CDC Resource page directly when clicked.

At the lower right-hand corner of each card, an Add This social media share button is available to share the CDC Resource content. The social media share button will reveal the Add This modal to share the content. For Download and External Link resource content, the respective url link will be shared. For Embedded Youtube Video resource content, the Url from the "Embeded Content URL" field is shared. If embedded content, download content, and external content is not set for the CDC Resource, a link to the resource item directly is linked.

Each card will display any "Source" and/or "Topics" CDC Taxonomy tags that set for their respective CDC Resource page. The Source tags will be displayed first, followed by any Topics tags. 

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Images: 

Recommended size: 500 x 350

Aspect Ratio: 10:7

CDC Testimonial Block

 

Component Name:  CDC Testimonial Block

Fields:  Heading, Sub-Heading, Cards

Options:  2, 3, or 4 Cards

Details:  The CDC Testimonial Block components displays CDC Testimonial Cards. Between 2 and 4 cards are displayed in a side-by-side layout. Each CDC Testimonial Card will render all available content for each card.

CDC Testimonial Cards contain the following content: Photo, Text, Author, Organization, and Enable Top Margin. The Enable Top Margin field has no effect on how the cards are displayed within the CDC Testimonial Block and only has an effect, when CDC Testimonial Cards are displayed individually on a page at a block directly.

Images: 

Recommended size: 150px x 150px

Aspect Ratio: 1:1

CDC Testimonial Block

Aliquam sed dui a velit malesuada condimentum. Etiam ac feugiat tortor, ac tempus mi. Maecenas convallis erat quis massa consectetur, vel fringilla nibh pulvinar. Proin auctor non tellus sed rhoncus. Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia. Donec quis enim felis. Integer a nulla sagittis, porta felis ac, sagittis nisl.
image of quotation marks

Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia. Donec quis enim felis. Integer a nulla sagittis, porta felis ac, sagittis nisl.

- Author
Organization
image of quotation marks

Aliquam sed dui a velit malesuada condimentum. Etiam ac feugiat tortor, ac tempus mi. Maecenas convallis erat quis massa consectetur, vel fringilla nibh pulvinar. Proin auctor non tellus sed rhoncus. Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non.

Maecenas convallis erat quis massa consectetur, vel fringilla nibh pulvinar. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia.

image of quotation marks

Vel fringilla nibh pulvinar. Proin auctor non tellus sed rhoncus. Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia. Donec quis enim felis. Integer a nulla sagittis, porta felis ac, sagittis nisl.

- Joyce Batcheller

CDC Testimonial Card

 

Component Name: CDC Testimonial Card

Fields: Photo, Text, Author, Organization

Details:  The CDC Testimonial Card block can be displayed directly onto a CDC Page as a Block component. 

When one CDC Testimonial Card is displayed directly as a block component, the card will be the full width of its container.

When two CDC Testimonial Card blocks are displayed in series directly, the cards will be displayed side-by-side, roughly half the width of their container.

A third CDC Testimonial Card block will have the full width of its container when displayed.

image of quotation marks

Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia. Donec quis enim felis. Integer a nulla sagittis, porta felis ac, sagittis nisl.

- Author
Organization
image of quotation marks

Vel fringilla nibh pulvinar. Proin auctor non tellus sed rhoncus. Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia. Donec quis enim felis. Integer a nulla sagittis, porta felis ac, sagittis nisl.

- Joyce Batcheller
image of quotation marks

Aliquam sed dui a velit malesuada condimentum. Etiam ac feugiat tortor, ac tempus mi. Maecenas convallis erat quis massa consectetur, vel fringilla nibh pulvinar. Proin auctor non tellus sed rhoncus. Proin mattis id enim non pretium. Aliquam volutpat elit enim, ac varius urna tempor non.

Maecenas convallis erat quis massa consectetur, vel fringilla nibh pulvinar. Aliquam volutpat elit enim, ac varius urna tempor non. Praesent finibus a orci et lacinia.

CDC Quote with Author Block


Component Name:
  CDC Quote with Author Block

Fields:  Text, Author

Options:  Enable Top Margin

Details:  CDC Quote with Author Block is a stand-alone quote block that displays quote text followed by an optional Author line. The quote text will start with quotation marks displayed underneath the first word of the text.

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

This is a [CDC QUOTE WITH AUTHOR BLOCK] which does not have an Image and will not have an image. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta, diam in sollicitudin pretium, neque urna fermentum diam, vitae convallis ante augue eu sapien.

- Curabitur Magna, RN BSN
image of quotation marks

CDC Green CTA Banner

 

Component Name: CDC Green CTA Banner

Fields: CTA Background Image, CTA Logo Image, Text, Buttons, Enable Top Margin

Details: CTA Logo Image and Buttons are optional fields. The Green CTA Banner can functionally be displayed with just the CTA Background Image and Text. 

The Buttons field accepts one "Button Block" content item. 

The Enable Top Margin checkbox can be selected to add additional margin to the top of the component.

Right Image: 

Recommended size: 600 x 338

Aspect Ratio: 16:9

 

Left Logo:  

It is static and will not change sizes between different screens.  The current size on the demo page is 422px x 80px

Learn how Project ECHO is helping health care professionals provide exceptional care to patients and their communities. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item(s) added to cart

Go to cart Continue Shopping