...
In addition to that, we’re establishing new rules for images within link previews. See below for more details.
...
UI Updates to Link Previews
Link previews will now display within the same card style as permalink previews. The left bar UI element is also removed.
Link previews will now follow the same standard width as permalink previews: 700px
Site title is limited to 2 lines of text - truncate the remainder with
...Site description is limited to 2 lines of text - truncate the remainder with
...
...
States
Default
The default state has uses Elevation 1 with a 1px border with center-channel-color at 16%
...
Hover
The default state has uses Elevation 2 with a 1px border with center-channel-color at 24%
...
Active
The active state uses Elevation 1 with a 1px border with button-bg at 32%
...
Link Preview Image
...
Rules
Small Image Prevew
Use the small image preview layout if:
The provided image has an aspect ratio of 1:1 or less;
The provided image is has a resolution below
layout switches to the small image preview on the right side rather than below. Small image previews are always cropped, scaled and centered within an 80px by 80px square.
...
Large Image Preview
If the provided image has an aspect ratio > 1:1, the layout of the link preview displays the image below in a larger preview. The image should scale down and maintain its aspect ratio based on the max-width and height below.
Max-width: 392px
Max-height: 240px
...
Collapsing and expanding large image previews
Large image previews can be expanded or collapsed using the arrow that displays at the end of the site description.
...
| Info |
|---|
NOTE: the expanded state should honor the user’s preference for “Default Appearance of Image Previews”. |
No image
When a web link does not have an image available, the link preview is displayed as below.
...
Removing a link preview from a message
When hovering over the link preview area, an x icon button appears to the left of the link preview. Clicking this will remove the link preview entirely from the message.
...