Resources promo
PATTERN OVERVIEW
Highlight resources or content with a combination of copy and a small image. Several configurations of this pattern are available, see examples below.
Guidelines
- Each piece of content links to a page with more information.
- Configure the column control to use “none” to remove unnecessary spacing that appears between the heading and the news content area.
- Following the character counts is important to balance the height of the text with the height of the photo.
- Apply the delta class to the H3 subheading to apply correct font size.
AEM component: Column control, text3, and adaptive image.
Example of code for example 1 subheading:
<h3><span class="delta">Lorem ipsum dolor sit consectetur.</span></h3>
Specifications
Section heading (H2): Ideally 45 characters, but can include up to 60 characters (including spaces) when necessary.
Subheading (H3+delta): Ideally 45 characters, but can include up to 60 characters (including spaces) when necessary.
Body copy: No more than 140 characters (including spaces). Ideally the copy should be no more than three lines long.
Image: 540 x 400 px
Button: Use the button link
Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For body copy, use sentence case with complete and punctuated sentences.
Type alignment: Left aligned
Examples
Example — All caps heading with two or four resources
Resources (H2)
Example 2 — Heading treatment option and four resources
Lorem ipsum dolor sit amet (H2)
Duis aute irure dolor in reprehender in voluptate velit esse