Usage Guidelines
When To Use
Use exclusively on the News & Events landing page or on a page created from a query list featuring related news items.
When To Avoid
As navigation for other parts of the websites besides the News & Events section.
Component Reference ID
C022 News Teaser
The C022 News Teaser appears exclusively on the News & Events landing page and displays an abstract of a press release or other news type about a recent Emerson accomplishment or announcement.
The primary news teaser variation (second example above) includes a smaller 2:1 image, headline, publication date, short description and platform tag to note if the news came from Automation Solutions, Commercial & Residential Solutions or Corporate. Primary news teasers are able to be authored without an image (third example) however, it is best practice and the preferred protocol to include a feature image with every teaser item. The full-width image news teaser variation (first example) is optional and can be used to highlight a news item on the page.
Component Detail
The C022 News Teaser appears on the News & Events landing page. Each teaser is part of a longer vertical list of recent news stories and company announcements. A single teaser represents an abstract of its associated detailed press release. Teaser headlines are succinctly written to summarize the press release’s most important information, while the proceeding body copy introduces the release. Each teaser includes a supporting image. When featuring a news teaser, the image can be switched to full-width size and the text will turn white and overlay the image. Use this option sparingly to highlight an important news item.
**Note: Ensure full-width background images are dark enough (paired with content overlay) to provide sufficient contrast and readability of the white overlay text.
Interactions
The headline and read more links are active on hover and take the user to the press release or news article.
Specifications
Max Characters
Headline: 120
Body Copy: 175
Full-width Asset Dimensions
Asset Size: 1320px x 660px
Aspect Ratio: 2:1
Recommended File Weight: <60kb
Full-width Display Sizes
Width: 880px
Height: 440px
Full-width Aspect Ratios
Desktop: 2:1
Tablet: 2:1
Mobile: 2:1
Inset Image Asset Dimensions
Asset Size: 528px x 264px
Aspect Ratio: 2:1
Recommended File Weight: <20kb
Inset Image Display Sizes
Width: 352px
Height: 176px
Inset Image Aspect Ratios
Desktop: 2:1
Tablet: 2:1
Mobile: 2:1