@rei-co-op/cedar-media-object v0.0.7

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}

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>