import { Meta } from '@storybook/blocks';

<Meta title="Atoms/Links" />

# Link

## Styling

There are helpers in the `_link-helpers.scss` file to help you style links;
- some to quicky set the states of a link (hover, active, …).
- some to style specific types of links (e.g. 'read more') that are recurring.

The styling is applied in `_link.scss`.
You will see you can style default link tag, links in CKE and links for
specific types (attached to a class).

## tag vs Field

The link atom is not used by Drupal directly, but is included inside other
components, replacing Drupal's 'content' output
(e.g. included in all menu items to render a link tag with classes).

If you want to render a link field, that looks like what Drupal produces,
inside a Storybook Molecule, you can include `link-field.twig`. This wraps the
link inside the correct field wrappers and classes as output by Drupal.
Examples of that can be found in the 'menu item' atom (which is in turn used
by 'menus' molecules).

## Empty link

In some cases, empty links are printed in Drupal. This happens in the
navigation when the route is left empty.
When that happens, the `a`-tag is replaced by a `span`.
