<UseCases> Component

Note: Consider reaching for Callouts before using this component. Although it's still in use, it should be considered deprecated unless other components don't work for your use case.

A set of three horizontally-aligned images paired with a short title and descriptive text. They re-align vertically for mobile.

Share
Code Editor
<UseCases items={[
{
title: 'Easily onboard and manage users',
description:
'Use SSO to manage onboarding and off-boarding users.',
image: {
url: 'https://www.datocms-assets.com/2885/1565300480-workload-orchestration.png',
},
link: {
title: 'Learn more',
url:
'https://learn.hashicorp.com/tutorials/boundary/getting-started-config',
},
},
{
title: 'Open and extensible remote access',
description:
'Integrate with existing tooling and APIs to simplify access.',
image: {
url: 'https://www.datocms-assets.com/2885/1565300480-workload-orchestration.png',
},
link: {
title: 'Learn more',
url: '/docs/common-workflows/manage-users-groups',
},
},
{
title: 'Compliance without overhead',
description:
'Provide session visibility that enables teams to stay compliant.',
image: {
url: 'https://www.datocms-assets.com/2885/1565300480-workload-orchestration.png',
},
link: {
title: 'Learn more',
url: '/docs/common-workflows/manage-sessions',
},
},
]}
/>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...

Props

NameDescription
items*
object
Array of callout items
Object contains nested props, see below:
items.title*
string
Short callout item title
items.description
string
Short description. Both HTML and plain text are supported.
items.link
object
Contains a link object
Object contains nested props, see below:
items.link.title
string
Link title
items.link.url
string
The link URL
items.image
object
Contains a URL prop which links to the image
Object contains nested props, see below:
items.image.url
string
Path to the image
className
string
Optional className to add to the root element