Skip to main content

Link previews

Razor

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

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

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:

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>

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 s-code-block class to the <pre> tag if you’d like to apply highlight.js’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="s-code-block">
<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>

You can further configure highlight.js’s syntax highlighting to include line numbers by adding the class linenums to the prettified <pre> tag containing the code. See also Code blocks.

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="s-code-block 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>
Deploys by Netlify