Timeline

Overview

With a timeline, content owners can display a sequence of chronological events in a vertical timeline-like structure. Each event can be represented with text only (title and description) or text plus an image or video. The WCMS timeline is a reusable content type and can be inserted into Visual Composer or a WYSIWYG editor.

When to Use

• You have events that have a strong chronological message.
• Your events are around the same date or time period.
• 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 Another Option

• 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.
• You are trying to provide primary navigation to lower-level pages in your site.
• You are considering this responsive-design component only because it is more “interactive” or visually appealing.

Additional Tips and Guidelines

• Page Template: Timeline is designed to work only on pages without left navigation (“wide” page).
• Number of Events: Five 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 is acceptable.
• Links: Avoid linking to non-CDC Web pages and non-HTML documents. This 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 can be added to an event. (You can use YouTube videos managed in the WCMS or insert a referenced video based on the YouTube video ID.)
• Other Modules: Avoid using other complex modules within the body of event such as tabs, carousels, maps, etc.  Avoid using timelines within other containers such as tabs or accordions.
• Performance: Do not use multiple timelines on the same page.