Link previews

Link previews add rich previews to links included in questions and answers on Stack Overflow. They’re also known as oneboxes or link unfurls.

Classes

Class Parent Description
.s-link-preview N/A Base parent container for link previews
.s-link-preview--header .s-link-preview Top section containing the title and details
.s-link-preview--icon .s-link-preview--header Logo of the third party link. Use the @Svg.Helper.
.s-link-preview--title .s-link-preview--header Title of the linked file
.s-link-preview--details .s-link-preview--header Details and meta data of the linked file
.s-link-preview--body .s-link-preview Middle section containing the body of the linked file whose expected content is rich text or markdown
.s-link-preview--code .s-link-preview Middle section containing the body of the linked file whose expected content is code
.s-link-preview--footer .s-link-preview Bottom section containing URL details
.s-link-preview--url .s-link-preview--footer URL of the linked file
.s-link-preview--misc .s-link-preview--footer (optional) A small catch-all for anything you might need. This page contains a few use cases.
.linenums .s-link-preview--code Added to the pre of the preview block to properly display line numbers

Examples

Link previews automatically appear when you pasting a link into a post, providing a glimpse of what’s been linked to. This approach has been popularized by Slack, Twitter, Facebook, etc. Link previews should be tailored to fit the content received from each third party. It might be appropriate to use atomic utility classes for further customization, but Stacks provides a few reusable patterns:

Base style

Use for links whose expected body is rich text or markdown like Jira issues or Slack messages. Wherever possible, it’s best practice to support basic markdown formatting (bold, italics, line breaks, lists, etc.)

<div class="s-link-preview">
<div class="s-link-preview--header">
<div class="s-link-preview--icon">@Svg.Icon</div>
<div>
<a href="#" class="s-link-preview--title"></a>
<div class="s-link-preview--details"></div>
</div>
</div>
<div class="s-link-preview--body"></div>
<div class="s-link-preview--footer">
<a href="#" class="s-link-preview--url"></a>
<a href="#" class="s-link-preview--misc">Privacy notice</a>
</div>
</div>

Code blocks

Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.

Add a prettyprint class to the <pre> tag if you’d like to apply Prettify’s syntax highlighting on Stack Exchange sites with this option enabled.

<div class="s-link-preview">
<div class="s-link-preview--header">
<div class="s-link-preview--icon">@Svg.Icon</div>
<div>
<a href="#" class="s-link-preview--title"></a>
<div class="s-link-preview--details"></div>
</div>
</div>
<div class="s-link-preview--code">
<pre class="prettyprint">
<code></code>
</pre>
</div>
<div class="s-link-preview--footer">
<a href="#" class="s-link-preview--url"></a>
<div class="s-link-preview--misc">(truncated)</div>
</div>
</div>

Code blocks with line numbers

You can further configure Prettify’s syntax highlighting to include line numbers by adding the class linenums to the prettified <pre> tag containing the code.

Class Description
linenums Count starts at line 1
linenums:<n> Count starts at line <n>
<div class="s-link-preview">
<div class="s-link-preview--header">
<div class="s-link-preview--icon">@Svg.Icon</div>
<div>
<a href="#" class="s-link-preview--title"></a>
<div class="s-link-preview--details"></div>
</div>
</div>
<div class="s-link-preview--code">
<pre class="prettyprint linenums">
<code></code>
</pre>
</div>
<div class="s-link-preview--footer">
<a href="#" class="s-link-preview--url"></a>
<div class="s-link-preview--misc">(truncated)</div>
</div>
</div>