Timeline

The Timeline feature enables content owners to create a timeline-like structure that displays a sequence of chronological events in a vertical format.

View working timeline example.

When to Use

• You have events that have a strong chronological message.
• Your events are around the same date/time period length.
• Your events have about the same amount of content.
• You are willing to dedicate an entire page or a significant part of a page to a Timeline.

When to Consider Something Else

• You would like to present a series of non-date/time-based health messages.
• You are looking for an alternative to display different sections of content similar to Tabs/Accordions/Collapsible modules.
• You are trying to provide primary navigation to lower-level pages in your site.
• You are considering this Responsive Design (RD) component only because it is more “interactive” or visually appealing.

Additional Guidance

• Page Type: Timeline is only available on Content Pages without left navigation (“wide” page).
• Number of Events: 5 to 20 events. Consider breaking into multiple pages for more than 20 events.
• Title: Use a date and/or time-based title. The Title should be consistent format across all events.
• Body Text: Be concise and consider content length for smaller Viewports. Basic formatting including bulleted/numbered lists are acceptable.
• Links: Avoid linking to non-CDC Web pages and non-HTML documents. This RD component is intended for promoting content within the same CDC website and the content should exist as Web pages.
• Images: Images should all be the same dimension (aspect ratio) to provide a consistent look across all events. Images should not exceed a maximum width of 532 pixels.
• Videos: Videos using the standard CDC video player may be added to an event.
• Other Gadgets/Modules: Avoid using other complex gadgets or modules within the body of event such as Tabs, Accordion, Collapsible Modules, Feature Players, Carousels, Maps, etc. Avoid using Timelines within other containers such as Tabs, Accordions, and Collapsible Modules.
• Performance: Avoid using multiple Timelines on the same including “Simple Content layouts. These layouts are often better for performance on mobile devices and usability.