furl
Getting startedDesignComponents
Design
Design GuidelinesTypography SystemLayout SystemColor palettesCustomization
Components
ComponentsAccordionAlertAnchorAudioAvatarBadgeBreadcrumbsButtonButtonGroupCalendarCardCollapseContextButtonDividerDropdownFooterFormGraphGridHyperlinkIconIframeImageInputItemLayoutListLoaderMediaObjectMenuModalNotificationPaginationPopoverProgressSearchStepsSwitchTableTabsTooltipTypographyVideo

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

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

furl was designed and developed by Angelos Chalaris © 2019
Documentation generated using Gatsby, hosting by Netlify