Smart card - Flexible card
Flexible Smart Links, also known as FlexibleCard, Flexible UI, and Flex UI, is a composable system made up of data elements inside UI blocks, built by Bandicoots to aid Atlassian product teams in creating their own contextually appropriate Smart Link views. This system does not affect inline, block or embed appearance of links.
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.
reactreact-domreact-intl-next@atlaskit/link-provider
Installation
yarn add @atlaskit/smart-cardUsage
The following code example will render the Flexible Smart Link with basic configuration.
import { CardClient, SmartCardProvider } from '@atlaskit/link-provider';
import { Card, TitleBlock } from '@atlaskit/smart-card';
// To use staging environment, you must be logged in at https://pug.jira-dev.com
<SmartCardProvider client={new CardClient('stg')}>
<Card appearance="block" url="https://www.atlassian.com/">
<TitleBlock />
</Card>
</SmartCardProvider>Building the UI
The Flexible Smart Links are organised into two separate concepts:
Blocks (composed rows of metadata e.g. TitleBlock)
Elements (single pieces of metadata e.g. CreatedBy)
When creating a UI, it is best to first determine which blocks to use as this will determine the overall layout of the Smart Link. We have some pre-made blocks that are ready for grab.
Check out the links on the top of this document to discover what this awesome feature has to offer.
Tools
A few useful tools to help visualise your linking vision.
- Flexible Smart Links Builder (go/flexible-smart-links-builder, (opens new window))
- JSON-LD Editor (go/smart-links-jsonld-editor, (opens new window))
Here are some ideas to get you started!
UI props (FlexibleUiOptions) can be combined to provide a wide range of bespoke-looking integrations. For example, we can hide the background, elevation and padding, creating the “list” appearance common in Atlassian sidebars.
Use TitleBlock together with PreviewBlock, MetadataBlock, SnippetBlock, and FooterBlock can create a comprehensive content for the link resource.
There is no limit on how many blocks you can put inside Flexible Smart Links. Repeat the MetadataBlock to enrich the linking experience.