MediaObject
MediaObjects allow you to accompany textual content using an image.
Examples
Joe Henderson
I have posted this amazing article here. Check it out!
Sophie Gray
Dude, this is awesome. Thanks so much.
import React from 'react';
import ReactDOM from 'react-dom';
import { MediaObject, Paragraph, Text } from 'furl-components';
ReactDOM.render(
<div>
<MediaObject
media='profile-joe.jpg'
data='Joe Henderson: I have posted this amazing article here. Check it out!'
/>
<MediaObject media='profile-sophia.jpg' mediaClassName='avatar circle'>
<Paragraph><Text textStyle='bold'>Sophie Gray</Text><br />Dude, this is awesome. Thanks so much.</Paragraph>
</MediaObject>
</div>,
document.getElementById('root')
);API
| Property | Description | Type | Default | ||
|---|---|---|---|---|---|
| media | media url | string | |||
| mediaWidth | media width | int/string | 'ls-200p' | ||
| mediaHeight | media height | int/string | 'ls-200p' | ||
| mediaClassName | media class | int/string | 'ls-200p' | ||
| data | media object data source | string/object | |||
Notes
- You can populate a media object either via passing children to it or via the use of the
dataprop. Ifdatais provided, it will take precedence over passed children, therefore rendering only the content provided indata. dataaccepts either a string or an object, which allows you to pass it a React component tree.mediaWidthandmediaHeightaccept any valid CSS value, including CSS variables.
