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
data
prop. Ifdata
is provided, it will take precedence over passed children, therefore rendering only the content provided indata
. data
accepts either a string or an object, which allows you to pass it a React component tree.mediaWidth
andmediaHeight
accept any valid CSS value, including CSS variables.