This package has been deprecated

Author message:

Deprecated in favor of @rei/cdr-media-object

@rei-co-op/cedar-media-object

0.0.7 • Public • Published

The Media Object allows you to group small amounts of like content is a small amount of markup. The examples below show some of the may visual displays available to this component.

Modifiers

add {top, right, bottom, center, overlay, block, stretch}

Name Description
top

Media figure displays above Media body

right

Media figure displays to the right of the Media body

bottom

Media figure displays below the Media body

Center

Can be stacked with other alignment modifiers and will center the Media figure.

overlay

Media Body overlays the Media Frame

stretch

The Media Frame extends 16px left and right from the parent container. This is intended to be used with the top or bottom modifier.

block

The Media Frame extends 16px left and right from the parent container. and an additional 16px left and right value wraps the media object. This is intended to be used with the top or bottom modifier.

Examples

Media objects aligning media frames

  <cdr-media-object
    img-src="http://placehold.it/350x150"
    media-url="http://rei.com"
    media-title="Backpacking Tents: How to Choose"
    level="2"
    media-img-shape="responsive"
    modifier="top stretch">
    <p>Cras volutpat, nibh quis fringilla efficitur, dolor sapien posuere ipsum, sit amet pharetra est dolor ac est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec ex semper ex congue tristique ac at massa. Duis posuere ornare ante, id placerat purus pretium non. Nulla rhoncus libero sed faucibus finibus. Proin egestas volutpat tortor, non tincidunt quam accumsan et. Donec eleifend condimentum consectetur. Ut a lorem cursus, fermentum eros in, commodo ex. Nulla fringilla mi ex, eu tempus turpis molestie vitae. Duis eget tellus malesuada, iaculis ipsum non, vehicula sapien. Mauris tincidunt sem at turpis dapibus, nec viverra arcu condimentum. Donec felis nulla, blandit mollis tristique ut, commodo in sapien.</p>
  </cdr-media-object>
  <cdr-media-object
    img-src="http://placehold.it/350x150"
    media-url="http://rei.com"
    media-title="Backpacking Tents: How to Choose"
    level="2"
    media-img-shape="responsive"
    modifier="bottom block">
  </cdr-media-object>
  <cdr-media-object
    img-src="http://placehold.it/150x150"
    level="3"
    media-title="Tiger Mountain Loop">
    <p>Tiger Mountain is a multi-use recreation area near Seattle. In recent years, new trails and the continued work of Evergreen Mountain…</p>
  </cdr-media-object>
  <cdr-media-object
    img-src="http://placehold.it/50x50"
    media-img-shape="circle"
    level="3"
    media-title="Jerry Stritzke">
    <p>Issaquah Alps, WA</p>
  </cdr-media-object>
  <cdr-media-object
    img-src="http://placehold.it/150x150"
    level="3"
    media-title="Tiger Mountain Loop"
    modifier="right">
    <p>Tiger Mountain is a multi-use recreation area near Seattle. In recent years, new trails and the continued work of Evergreen Mountain…</p>
  </cdr-media-object>

Media Object overlay

  <cdr-media-object
    img-src="http://placehold.it/350x150/212121/222222"
    media-url="http://rei.com"
    media-title="Backpacking Tents: How to Choose"
    level="2"
    media-img-shape="responsive"
    modifier="top stretch overlay">
    <p>Cras volutpat, nibh quis fringilla efficitur, dolor sapien posuere ipsum, sit amet pharetra est dolor ac est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec ex semper ex congue tristique ac at massa. Duis posuere ornare ante, id placerat purus pretium non. Nulla rhoncus libero sed faucibus finibus. Proin egestas volutpat tortor, non tincidunt quam accumsan et. Donec eleifend condimentum consectetur. Ut a lorem cursus, fermentum eros in, commodo ex. Nulla fringilla mi ex, eu tempus turpis molestie vitae. Duis eget tellus malesuada, iaculis ipsum non, vehicula sapien. Mauris tincidunt sem at turpis dapibus, nec viverra arcu condimentum. Donec felis nulla, blandit mollis tristique ut, commodo in sapien.</p>
  </cdr-media-object>

Media Figure ratio

 <cdr-media-object
    img-src="http://placehold.it/350x150"
    media-url="http://rei.com"
    media-title="Backpacking Tents: How to Choose"
    level="2"
    media-img-shape="responsive thumbnail"
    ratio="16-9"
    modifier="top stretch">
    <p>Cras volutpat, nibh quis fringilla efficitur, dolor sapien posuere ipsum, sit amet pharetra est dolor ac est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec ex semper ex congue tristique ac at massa. Duis posuere ornare ante, id placerat purus pretium non. Nulla rhoncus libero sed faucibus finibus. Proin egestas volutpat tortor, non tincidunt quam accumsan et. Donec eleifend condimentum consectetur. Ut a lorem cursus, fermentum eros in, commodo ex. Nulla fringilla mi ex, eu tempus turpis molestie vitae. Duis eget tellus malesuada, iaculis ipsum non, vehicula sapien. Mauris tincidunt sem at turpis dapibus, nec viverra arcu condimentum. Donec felis nulla, blandit mollis tristique ut, commodo in sapien.</p>
  </cdr-media-object>

Readme

Keywords

none

Package Sidebar

Install

npm i @rei-co-op/cedar-media-object

Weekly Downloads

1

Version

0.0.7

License

ISC

Last publish

Collaborators

  • heavymedl
  • peripateticus
  • mhewson