@wfp/react/src/components/Story/README.mdx

WFP UI Kit

The **Story** component adds a default style, formatting and spacing for a longer text with main focus on readability.

More information can be found in the [typography documentation](?path=/story/documentation-general--typography).

### HTML

By adding `<div class="wfp--story"></div>` the story styling will be applied to all containing elements.

```html
<div class="wfp--story">
  <h1 class="wfp--story__title">Story Title</h1>
  <h2 class="wfp--story__subtitle">The Sub Title</h2>
  <p>Some <a href="#">text</a></p>
  <ul>
    <li>A list</li>
    <li>Another list item</li>
  </ul>
</div>
```

#### Spacings

When applying the story classes the margins between the elements will be calculated automatically.

### Related

[Text](?path=/docs/components-text--regular)