Page History

Also known as: aside callout

Description

The aside is a snippet of text that appears in the margins of articles/posts.

Design 

Use When

• Displaying sidenotes or other supplemental content
• Adding a ranking/statistic to an article
• Including the photo/name of someone mentioned in the article

Do not use when:

• There are already 3 asides in the article
• There is another aside within one paragraph
• Displaying a long chunk of text (more than 100 characters)

Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

• 100 characters or less- keep copy as short as possible.
  • This is total - including the heading, subtitle, and copy.

Design Assets Needed

Images

1 photo (optional)

• Dimensions: Any square image, typically 266x266px
• Note that for the Image - Person option, the component will add a circle crop.

Implementation

Anatomy / ACF Fields

When using the Aside, in most cases you don't want to use all the fields at the same time, as the content will get too long. 

Type: Image Icon or Image Person

The only difference between Icon and Person is that the Image - Icon Type adds the yellow bars to the top and bottom. 

Image Added

1. Placement: Left or Right. Choose whether the aside is on the left on right side of the article.
2. Visual (optional) - the photo for the aside. Note that the photo will automatically be cropped to a circle.
3. Headline (optional)
4. Subtitle (optional)
5. Copy (optional)

Type: Ranking

This is a mini version of the Rankings block.

Image Added

1. Placement: Left or Right. Choose whether the aside is on the left on right side of the article.
2. Number Prefix
3. Number
4. Number Suffix
5. Number Color
6. Rankings Style - Standard or Circle. Circle should only be used for percentages
7. Statistic
8. Source

Dev Notes

Please note that in the ACF field under Type, you will see statistic : Image - Icon, as it use to read statistic : Image - Statistic. I'm unable to change the first statistic as it will remove all the fields in the block in the editor. Also, In the SCSS file, Image - Icon field will be called callout-statistic.

These blocks are to be used on articles (like Newsroom) when calling attention to a person or statistic. Examples here: https://business.wisc.edu/news/example/

They can also be used within blog posts and AR publications (Update and RTI).

Tips

• Aside blocks are meant to be used with a very small amount of copy. (~100 characters or fewer)
• Asides should be used sparingly in a single article.
  • Use 3 asides max in one article.
• If using more than one aside, they should be separated by at least one paragraph. 
  • Asides wrap with the article content as the screen size is reduced. This can create disjointed lines of copy and can be confusing and create a lot of clutter on the page.

          Avoid this:

           Image Removed