@amsterdam/design-system-css
Version:
Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.
28 lines (19 loc) • 1.41 kB
Markdown
<!-- @license CC0-1.0 -->
# Top Task Link
A prominent navigation element to quickly start a task.
## Guidelines
- A Top Task Link has both a title and a description.
- The title describes the essence of the page being referred to, attracting attention when scanning the page.
- The description provides more context, helping the user confirm that they can indeed achieve their goal on the linked page.
- Keep both texts concise.
A title consists of a few words, and the description consists of 1 or 2 short sentences.
The description should end with a period or another appropriate punctuation mark.
- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
If you have more Top Task Links, place them in the next row.
Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
If this is not possible, leave the last cells of the grid empty.
- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
### Using links with routing libraries
Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.
## Relevant WCAG requirements
The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).