# BodyText

A body-copy block that renders a markdown string into styled article prose.

**Category:** Components/Text elements/BodyText

**Import:** `import { BodyText } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `text` | `string` | — | ✓ | A markdown text string. |
| `class` | `string` | `''` |  | Add a class to target with SCSS. |
| `id` | `string` | `''` |  | Add an id to the block tag to target it with custom CSS. |

## Examples

### Demo

```svelte
<BodyText text={/* value — see Props/Types for full type */} />
```

### Typography sample

```svelte
<BodyText
  class="body-text-typography-example-story"
  text={/* value — see Props/Types for full type */}
/>
```

### Custom styles

```svelte
<BodyText
  class="body-text-custom-styles-story"
  text="Venison shoulder <span class="highlight">ham hock</span> ham leberkas."
/>
```

## Documentation

# BodyText

The `BodyText` component creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, links, blockquotes and other markdown-supported elements.

```svelte
<script>
  import { BodyText } from '@reuters-graphics/graphics-components';

  const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
  
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.

- Steak
- [Pork chop](https://www.google.com)
- Fillet
  
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
</script>

<BodyText text={markdownText} />
```

## Using with ArchieML docs

With the graphics kit, you'll likely get your text value from an ArchieML doc...

```yaml
# ArchieML doc
[blocks]

type: text
text: Bacon ipsum ...

... etc.
:end

[]
```

... which you'll parse out of a ArchieML block object before passing to the `BodyText` component.

```svelte
<!-- App.svelte -->
<script>
  import { BodyText } from '@reuters-graphics/graphics-components';
  import content from '$locales/en/content.json';
</script>

{#each content.blocks as block}
  {#if block.type === 'text'}
    <BodyText text={block.text} />
  {/if}
{/each}
```

## Styling text

Styles are built in for many text elements created by `BodyText`, including headings, ordered and unordered lists, links, blockquotes and even drop caps (using a `"drop-cap"` classed span).

```svelte
<BodyText
  text="<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola ..."
/>
```

### Custom styles

To add your own styling, you can write styles in a global SCSS stylesheet:

```svelte
<BodyText
  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
/>
```

```scss
// global.scss
span.highlight {
  background: palegoldenrod;
  padding: 2px 4px;
}
```

If you want to make sure styles for one portion of text don't apply other parts of the page, add a `class` to BodyText to use as an additional selector.

```svelte highlight=2
<BodyText
  class="my-special-text-block"
  text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
/>
```

```scss
// global.scss
.my-special-text-block {
  span.highlight {
    background: palegoldenrod;
    padding: 2px 4px;
  }
}
```