The Link Card only needs a few data points to render a fully functional card.

Optionally, the Link Card can be extended with additional information

A great way to turn the Link Cards into an engaging teaser is to add a video that appears on the hover gesture.

A great way to balance client-side performance and responsive images is by using srcset in conjunction with sizes and loading attributes. Read more about responsive image best practices here: Image

Instead of a tag, Link Cards can display a logo.

Best practices:

To improve the user experience Link Cards can optionally display preview images while waiting for the high-resolution image to be loaded.

Note: The example below demonstrates the rendering of the preview image only. In a production environment, a high-resolution _image_ would be set alongside.

Best Practices :

By default, Link Cards adapt to a light mode environment and appear light themselves. In a dark mode environment, we recommend changing the Link Card appearance to dark.

Link Cards support a compact layout for use cases where it doesn't have enough space available.

When initially mounting and whenever the media container of the Story Card resizes, the card emits a mediaresize event including the media's width and height.

A common use case is to update the image to make it perfectly fit the available space.