metadata-based-explorer1/src/components/media/Media.md

Box UI Elements

> **Note**
>
> `Media` is a compound component, the inner elements are not meant to be used outside of the Media container

Implements the "media object" element

```plaintext
import Media from 'box-ui-elements/es/components/media'
```

```js
const { MenuItem } = require('../menu');

<Media style={{ width: 300 }}>
  <Media.Figure>
    <Avatar size="large" />
  </Media.Figure>

  <Media.Body>
    <Media.Menu label="Options">
      <MenuItem>Edit</MenuItem>
      <MenuItem>Delete</MenuItem>
    </Media.Menu>
    <div>
      <b>Yo Yo Ma</b> commented on this file
    </div>
    <div>
      Please review the notes
      <br />a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8
      9 0 1 2 3 4 5 6 7 8 9
    </div>
  </Media.Body>
</Media>;
```

```js
const { MenuItem } = require('../menu');

<>
  <code>
    <span style={{ color: 'green' }}>Media</span>{' '}
    <span style={{ color: 'purple' }}>Media.Figure</span>{' '}
    <span style={{ color: 'orange' }}>Media.Body</span>{' '}
    <span style={{ color: 'red' }}>Media.Menu</span>
  </code>
  <br />
  <br />
  <Media style={{ width: 300, boxShadow: '0 0 2px 3px green', padding: 5 }}>
    <Media.Figure style={{ boxShadow: '0 0 2px 3px purple' }}>
      <Avatar size="large" />
    </Media.Figure>

    <Media.Body style={{ boxShadow: '0 0 2px 3px orange', padding: 3 }}>
      <Media.Menu
        style={{ boxShadow: '0 0 2px 3px red', margin: 3, padding: 3 }}
      >
        <MenuItem>Edit</MenuItem>
        <MenuItem>Delete</MenuItem>
      </Media.Menu>
      <div>
        <b>Yo Yo Ma</b> commented on this file
      </div>
      <div>
        Please review the notes
        <br />a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7
        8 9 0 1 2 3 4 5 6 7 8 9
      </div>
    </Media.Body>
  </Media>
</>;
```

## Nesting Media Components

```js
const { MenuItem } = require('../menu');

<Media style={{ width: 300 }}>
  <Media.Figure>
    <Avatar />
  </Media.Figure>

  <Media.Body>
    <Media.Menu>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Delete</MenuItem>
    </Media.Menu>
    <div>
      <b>Yo Yo Ma</b> commented on this file
    </div>
    <div>This is a nested media object</div>
    <ul style={{ margin: 0, padding: 0 }}>
      <Media as="li" style={{ marginTop: 10 }}>
        <Media.Figure>
          <Avatar />
        </Media.Figure>

        <Media.Body>
          <div>
            <b>Bjork</b> replied
          </div>
          <div>I must agree!</div>
          <Media as="li" style={{ marginTop: 10 }}>
            <Media.Figure>
              <Avatar />
            </Media.Figure>

            <Media.Body>
              <div>
                <b>Bono</b> replied
              </div>
              <div>Me too!</div>
            </Media.Body>
          </Media>
        </Media.Body>
      </Media>
    </ul>
  </Media.Body>
</Media>;
```

## With Form Elements

```js
const { MenuItem } = require('../menu');

<Media style={{ width: 300 }}>
  <Media.Figure>
    <Avatar size="large" />
  </Media.Figure>

  <Media.Body>
    <Media.Menu>
      <MenuItem>Edit</MenuItem>
      <MenuItem>Delete</MenuItem>
    </Media.Menu>
    <div>
      <b>W.A. Mozart</b> commented on this file
    </div>
    <div>Everyone get ready to perform the symphony tonight!</div>
    <div>
      <Button>Reply</Button>
      <Button>Cancel</Button>
      <TextArea label="Response" />
    </div>
  </Media.Body>
</Media>;
```