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

<Meta title="Atoms/Headings" />

# Headings

There are helpers in the `_headings-helpers.scss` file to help you style
headings.

The styling is applied in `_headings.scss`.
You will see you can style default heading tags, as well as headings in
CKEditor and classes that emulate a heading style (e.g. .h2).

Pay special attention to the `text-long` styling because that is what comes
out of CKEditor.

## tag vs Field

The heading atom is not used by Drupal directly, but is included inside other
components, replacing Drupal's normal rendering of titles e.g. a block heading,
field label, …

In Drupal site building, there is also a field formatter that turns a normal
text field into a heading tag.
Fields set up by those formatters render their content using this heading atom.

If you want to render a heading field, that looks like what Drupal produces,
inside a Storybook Molecule, you can include `heading-field.twig`. This wraps
the hx-tag inside the correct field wrappers and classes as output by Drupal.
Examples of this can be found in the 'example' Molecule.
