@bootstrap-styled/v4/lib/Media/index.md

twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities.

`<Media />` component example:

```js
import { Media } from '$PACKAGE_NAME';

<Media>
  <Media href="javascript:;" className="text-center">
    <Media fluid object src={favicon} className="w-50" alt="64x64" />
  </Media>
  <Media body>
    <Media heading>
      Media heading
    </Media>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </Media>
</Media>
```

`<Media />` component example **centered**:

```js
import { Media } from '$PACKAGE_NAME';

<Media>
  <Media middle href="javascript:;">
    <Media fluid object src={favicon} className="w-50" alt="64x64" />
  </Media>
  <Media body>
    <Media heading>
      Media heading
    </Media>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </Media>
</Media>
```

`<Media />` component example with **right** display:

```js
import { Media } from '$PACKAGE_NAME';

<div>
  <Media>
    <Media right href="javascript:;">
      <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
    <Media body>
      <Media heading>
        Media heading
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </Media>
  </Media>
</div>
```

`<Media />` component example with **nested** `<Media />`:

```js
import { Media } from '$PACKAGE_NAME';

<Media>
  <Media middle href="javascript:;">
    <Media fluid object src={favicon} className="w-50" alt="64x64" />
  </Media>
  <Media body>
    <Media heading>
      Media heading
    </Media>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <Media>
      <Media middle href="javascript:;">
        <Media fluid object src={favicon} className="w-50" alt="64x64" />
      </Media>
      <Media body>
        <Media heading>
          Nested media heading
        </Media>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </Media>
    </Media>
  </Media>
</Media>
```

`<Media />` component example with specific **alignment**:

```js
import { Media } from '$PACKAGE_NAME';

<div>
  <Media>
    <Media left top href="#">
      <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
    <Media body>
      <Media heading>
        Top aligned media
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </Media>
  </Media>
  <Media className="mt-1">
    <Media left middle href="#">
      <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
    <Media body>
      <Media heading>
        Middle aligned media
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </Media>
  </Media>
  <Media className="mt-1">
    <Media left bottom href="#">
      <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
    <Media body>
      <Media heading>
        Bottom aligned media
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </Media>
  </Media>
</div>
```

`<Media />` component example with specific **alignment** and **nested** `<Media />`:

```js
import { Media } from '$PACKAGE_NAME';

<Media list>
  <Media tag="li">
    <Media left href="#">
      <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
    <Media body>
      <Media heading>
        Media heading
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      <Media>
        <Media left href="#">
          <Media fluid object src={favicon} className="w-50" alt="64x64" />
        </Media>
        <Media body>
          <Media heading>
            Nested media heading
          </Media>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          <Media>
            <Media left href="#">
              <Media fluid object src={favicon} className="w-50" alt="64x64" />
            </Media>
            <Media body>
              <Media heading>
                Nested media heading
              </Media>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </Media>
          </Media>
        </Media>
      </Media>
      <Media>
        <Media left href="#">
          <Media fluid object src={favicon} className="w-50" alt="64x64" />
        </Media>
        <Media body>
          <Media heading>
            Nested media heading
          </Media>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </Media>
      </Media>
    </Media>
  </Media>
  <Media tag="li">
    <Media body>
      <Media heading>
        Media heading
      </Media>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </Media>
    <Media right href="#">
       <Media fluid object src={favicon} className="w-50" alt="64x64" />
    </Media>
  </Media>
</Media>
```