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.
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.
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
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.
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.
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 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
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
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.
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.
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.
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.
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.
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.
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.
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
As a nurse, having trustworthy, accurate information is vital during healthcare crises like COVID-19. These official CDC training materials are created by IPC experts for healthcare professionals. Learn PPE safety tips, infectious disease guidelines, how to speak to coworkers and patients about infection prevention, and more. Sign up today to learn how you can stop the spread.