Spotlight card

A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.

Deprecated

This package is deprecated. Use @atlaskit/spotlight.

Default

A spotlight card shows onboarding messages without requiring a dialog and target element the way spotlight does. Spotlight cards are generally more flexible, so you can design more bespoke experiences as seen in the other examples below.

Select the project name and icon to quickly switch between your most recent projects.

import React from 'react';

import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardDefaultExample = (): React.JSX.Element => {
	return (
		<SpotlightCard>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardDefaultExample;

Rich text

To display rich text messages, wrap the content with a block level element, such as a div.

All your projects and tasks, including the ones you've just created can be found in the sidebar.

import React from 'react';

import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardRichTextExample = (): React.JSX.Element => {
	return (
		<SpotlightCard>
			<div>
				All your <strong>projects</strong> and <strong>tasks</strong>, including the ones you've
				just created can be found in the sidebar.
			</div>
		</SpotlightCard>
	);
};

export default SpotlightCardRichTextExample;

Flat

To remove the elevation styles from the spotlight card, set the isFlat prop to true. This is useful for situations where you want to place the card as part of a focused onboarding or discovery layout, rather than it being positioned in a dialog above a core UI experience.

Welcome to Jira

Tell us about your team so we can personalise your project for you.

Why are you trying Jira Software?

import { type ReactNode } from 'react';

import Button from '@atlaskit/button/default/button';
import { css, cssMap, jsx } from '@atlaskit/css';
import { SpotlightCard } from '@atlaskit/onboarding';
import { Box } from '@atlaskit/primitives/compiled';
import { ProgressIndicator } from '@atlaskit/progress-indicator';
import { token } from '@atlaskit/tokens';

const wrapperStyles = css({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	flexDirection: 'column',
});

const headingStyles = css({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
});

const taglineStyles = css({
	paddingBlockEnd: token('space.200'),
});

const optionStyles = cssMap({
	root: {
		paddingBlockStart: token('space.050'),
		paddingInlineEnd: token('space.050'),
		paddingBlockEnd: token('space.050'),
		paddingInlineStart: token('space.050'),
	},
});

const Option = ({ children }: { children: ReactNode }) => (
	<Box xcss={optionStyles.root}>{children}</Box>
);
const SpotlightCardIsFlat = (): JSX.Element => {
	return (
		<div css={wrapperStyles}>
			<div>
				<div css={headingStyles}>
					<h2>Welcome to Jira</h2>
					<ProgressIndicator values={[1, 2, 3]} selectedIndex={0} />
				</div>
				<p css={taglineStyles}>
					Tell us about your team so we can personalise your project for you.
				</p>
				<SpotlightCard heading="Why are you trying Jira Software?" headingLevel={3} isFlat>
					<Option>
						<Button>Learn about agile</Button>
					</Option>
					<Option>
						<Button>Explore the app</Button>
					</Option>
					<Option>
						<Button>How to set up Jira for your team</Button>
					</Option>
				</SpotlightCard>
			</div>
		</div>
	);
};

export default SpotlightCardIsFlat;

Actions

Spotlight card actions work in a similar way to spotlight. You can set the appearance of action buttons to either default (primary), subtle, or subtle-link.

Select the project name and icon to quickly switch between your most recent projects.

import React from 'react';

import __noop from '@atlaskit/ds-lib/noop';
import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardActionsExample = (): React.JSX.Element => {
	return (
		<SpotlightCard
			actions={[
				{ text: 'Next', onClick: __noop },
				{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
			]}
		>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardActionsExample;

Actions before element

To add a left-aligned element before the action buttons, use the actionsBeforeElement prop.

Select the project name and icon to quickly switch between your most recent projects.

1/3

import React from 'react';

import __noop from '@atlaskit/ds-lib/noop';
import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardActionsBeforeExample = (): React.JSX.Element => {
	return (
		<SpotlightCard
			actionsBeforeElement="1/3"
			actions={[
				{ text: 'Next', onClick: __noop },
				{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
			]}
		>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardActionsBeforeExample;

Heading

Use the heading prop to add a heading to a spotlight card.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

1/3

import React from 'react';

import __noop from '@atlaskit/ds-lib/noop';
import { SpotlightCard } from '@atlaskit/onboarding';

const SpotlightCardHeadingExample = (): React.JSX.Element => {
	return (
		<SpotlightCard
			heading="Switch it up"
			headingLevel={2}
			actionsBeforeElement="1/3"
			actions={[
				{ text: 'Next', onClick: __noop },
				{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
			]}
		>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardHeadingExample;

Heading after element

The headingAfterElement prop allows you to place an element to the right of the heading.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

import React from 'react';

import Button from '@atlaskit/button/button';
import __noop from '@atlaskit/ds-lib/noop';
import CloseIcon from '@atlaskit/icon/core/cross';
import { SpotlightCard } from '@atlaskit/onboarding';
import { token } from '@atlaskit/tokens';

const SpotlightCardHeadingAfterExample = (): React.JSX.Element => {
	return (
		<SpotlightCard
			headingAfterElement={
				<Button
					iconBefore={<CloseIcon label="Close" color={token('color.icon.inverse')} />}
					appearance="subtle"
				/>
			}
			heading="Switch it up"
			headingLevel={2}
			actions={[{ text: 'Next', onClick: __noop }]}
		>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardHeadingAfterExample;

Image

You can add an image to a spotlight with the image prop. Although we have an illustration library that you can make use of, please keep in mind that most of those illustrations are designed to work with neutral backgrounds, and you may need further design support to implement an ideal spotlight image.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

import React from 'react';

import __noop from '@atlaskit/ds-lib/noop';
import { SpotlightCard } from '@atlaskit/onboarding';

import spotlightImage from '../assets/this-is-new-jira.png';

const SpotlightCardHeadingExample = (): React.JSX.Element => {
	return (
		<SpotlightCard
			image={<img src={spotlightImage} alt="" width="400" />}
			heading="Switch it up"
			headingLevel={2}
			actions={[
				{ text: 'Next', onClick: __noop },
				{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
			]}
		>
			Select the project name and icon to quickly switch between your most recent projects.
		</SpotlightCard>
	);
};

export default SpotlightCardHeadingExample;

Width

The width prop sets the width of the card in pixels.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

Switch it up

Select the project name and icon to quickly switch between your most recent projects.

import React from 'react';

import __noop from '@atlaskit/ds-lib/noop';
import { SpotlightCard } from '@atlaskit/onboarding';
import { token } from '@atlaskit/tokens';

const SpotlightCardWidth = (): React.JSX.Element => {
	return (
		<div
			style={{
				display: 'flex',
				flexDirection: 'column',
				gap: token('space.300'),
			}}
		>
			<SpotlightCard
				width={200}
				heading="Switch it up"
				headingLevel={2}
				actions={[
					{ text: 'Next', onClick: __noop },
					{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
				]}
			>
				Select the project name and icon to quickly switch between your most recent projects.
			</SpotlightCard>
			<SpotlightCard
				width={400}
				heading="Switch it up"
				headingLevel={2}
				actions={[
					{ text: 'Next', onClick: __noop },
					{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
				]}
			>
				Select the project name and icon to quickly switch between your most recent projects.
			</SpotlightCard>{' '}
			<SpotlightCard
				width={600}
				heading="Switch it up"
				headingLevel={2}
				actions={[
					{ text: 'Next', onClick: __noop },
					{ text: 'Dismiss', onClick: __noop, appearance: 'subtle' },
				]}
			>
				Select the project name and icon to quickly switch between your most recent projects.
			</SpotlightCard>
		</div>
	);
};

export default SpotlightCardWidth;

Was this page helpful?

We use this feedback to improve our documentation.