Agriculture Design System
Design System for import and export services

Feature link list

Feature link list is a vertical list of important links. It adds prominence and additional information to help users find and understand the navigation items.

View in FigmaView in StorybookView in Github
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.

Open in Playroom, opens in a new tabOpen responsive preview
<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.

Open in Playroom, opens in a new tabOpen responsive preview
<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',
		},
	]}
/>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

This component has a 'bodyAlt' variant. Components with a 'bodyAlt' variant utiliseshadeAlt to highlight interface components and content that sit on 'bodyAlt' background. shadeAlt is also used to fill interactive components, ensuring sufficient contrast is maintained for hover states.

Light palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack gap={1.5} padding={1.5}>
		<H4>Feature link list: on light body background</H4>
		<FeatureLinkList
			links={[
				{
					href: '#',
					label: 'Add a business with RAM',
				},
				{
					href: '#',
					label: 'Accept an invite',
				},
				{
					href: '#',
					label: 'About the department',
				},
			]}
		/>
	</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
		<H4>Feature link list: on light bodyAlt background</H4>
		<FeatureLinkList
			background="bodyAlt"
			links={[
				{
					href: '#',
					label: 'Add a business with RAM',
					},
				{
					href: '#',
					label: 'Accept an invite',
				},
				{
					href: '#',
					label: 'About the department',
				},
			]}
		/>
	</Stack>
</Box>

Dark palette

Open in Playroom, opens in a new tabOpen responsive preview
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5} padding={1.5}>
		<H4>Feature link list: on dark body background</H4>
		<FeatureLinkList
			links={[
				{
					href: '#',
					label: 'Add a business with RAM',
				},
				{
					href: '#',
					label: 'Accept an invite',
				},
				{
					href: '#',
					label: 'About the department',
				},
			]}
		/>
	</Stack>
		<Stack background="bodyAlt" gap={1.5} padding={1.5}>
		<H4>Feature link list: on dark bodyAlt background</H4>
		<FeatureLinkList
			background="bodyAlt"
			links={[
				{
					href: '#',
					label: 'Add a business with RAM',
					},
				{
					href: '#',
					label: 'Accept an invite',
				},
				{
					href: '#',
					label: 'About the department',
				},
			]}
		/>
	</Stack>
</Box>
  • Card – Cards are layout components used to link to more information or for secondary in-page navigation.
  • 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.
Edit this page