Smart card - Card

Overview

Examples

Reference

Smart Links enhance URLs into interactive previews, offering a contextualized experience within Atlassian products. They come in inline, block (card), and embed formats, respecting content permissions and compliance settings.

You must be logged in to staging environment, (opens new window) to load the examples.

https://www.youtube.com/watch?v=9tpySewzRG0

Prerequisites

The following packages are @atlaskit/smart-card's peer dependencies and required for Smart Links to function properly. Please check our package.json, (opens new window) for versioning.

react
react-dom
react-intl-next
@atlaskit/link-provider

Installation

yarn add @atlaskit/smart-card

Usage

The following code example will render the inline Smart Link with basic configuration.

import { CardClient, SmartCardProvider } from '@atlaskit/link-provider';
import { Card } from '@atlaskit/smart-card';

// To use staging environment, you must be logged in at https://pug.jira-dev.com
<SmartCardProvider client={new CardClient('staging')}>
  <Card appearance="inline" url="https://www.atlassian.com/" />
</SmartCardProvider>

Integrating with the Fabric Renderer/Editor

Please see Card in Editor.

Support for server-side rendering (SSR)

Please see CardSSR.