<commit_before>/*doc
---
title: Media
name: media_react
categories:
 - react_utilities_media
 - react_all
---

<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install pui-react-media --save
</i>
</code>

For the example, you also need to install [Images](#image_react) and require `Image` from it.


Require the subcomponents:

```
var Media = require('pui-react-media').Media;
var Flag = require('pui-react-media').Flag;
```

A Flag is a special type of media that is vAlign='middle'.

## General media object modifiers

Media Modifiers     | Options                                        | Description
------------------- | ---------------------------------------------- | --------------------------------------------------------------------------
`bodyAlignment`     | top (default), "middle", "bottom"              | Vertical alignment of the body (used for large images with small content next to it, usually centered)
`stackSize    `     | "xsmall", "small", "medium", "large"           | At what breakpoint should the media object stack

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

The base button renderer. You won't really interact with this directly.
<commit_msg>chore(media): fix wrong prop name in styleguide<commit_after>/*doc
---
title: Media
name: media_react
categories:
 - react_utilities_media
 - react_all
---

<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install pui-react-media --save
</i>
</code>

For the example, you also need to install [Images](#image_react) and require `Image` from it.


Require the subcomponents:

```
var Media = require('pui-react-media').Media;
var Flag = require('pui-react-media').Flag;
```

A Flag is a special type of media that is vAlign='middle'.

## General media object modifiers

Media Modifiers     | Options                                        | Description
------------------- | ---------------------------------------------- | --------------------------------------------------------------------------
`vAlign`            | top (default), "middle", "bottom"              | Vertical alignment of the body (used for large images with small content next to it, usually centered)
`stackSize    `     | "xsmall", "small", "medium", "large"           | At what breakpoint should the media object stack

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

The base button renderer. You won't really interact with this directly.

{'fraction_non_alphanumeric': 0.2057435090479937, 'fraction_numerical': 0.0, 'mean_word_length': 2.09367396593674, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '338556', 'n_tokens_mistral': 637, 'n_tokens_neox': 623, 'n_words': 260}