Feature link list

import { ... } from '@ag.ds-next/react/feature-link-list';

Feature link list provides emphasis and hierarchy to an important list of links. It provides support for description content that will help a user read, understand, assess and select the appropriate link. To enhance usability, a feature link list should always be accompanied by a clear heading.

<FeatureLinkList
	links={[
		{
			label: 'Add a business with RAM',
			description:
				'Set up a business to act on behalf of it or invite others to. You can do this if you are responsible for this business in Relationship Authorisation Manager (RAM).',
			href: '#',
		},
		{
			label: 'Accept an invite',
			description:
				'Use an invite code from an email to act on behalf of a business.',
			href: '#',
		},
		{
			label: 'About the department',
			description: 'A suitable description for an external link.',
			href: 'https://www.agriculture.gov.au/',
			target: '_blank',
		},
	]}
/>

Do

• use to provide emphasis and hierarchy to link lists
• avoid opening links in new tabs; provide an external link icon when it is not possible to open the link in the same browser tab
• aim for consistent use of descriptions for all links in a list.

Don’t

• unnecessarily repeat the label in the description
• include more than 3 lines of copy in the description
• confuse with Inpage nav, which links to content on the current page
• use outside of the Main region. Link list may be more suitable in this instance.

Using without a description

Links can also be used without a description, if the label alone provides enough information.

<FeatureLinkList
	links={[
		{
			label: 'Add a business with RAM',
			href: '#',
		},
		{
			label: 'Accept an invite',
			href: '#',
		},
		{
			label: 'About the department',
			href: 'https://www.agriculture.gov.au/',
			target: '_blank',
		},
	]}
/>

Related components

• Card – Also known as Tiles, Cards are a layout component that link to more information on a topic.
• Inpage nav – Also known as Page contents, Inpage nav links help users scan page contents and quickly navigate to different sections.
• Link list – Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.
• List – Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.