Skip to main content

Media Objects

Version: 0.9.0
Edit

Media objects are a common UI pattern where an image, icon, or other media is placed next to some related content. A number of components, such as the ISU web logo, Alert messages, and our academic program descriptions utilize the media object for positioning.

  • When to Use

    Setting a piece of media next to some content.

    • Media can be an icon, image, or other thumbnail
    • Wide range of uses from ISU web logo to alerts with icons to academic program descriptions

  • When not to Use

    • Without media

Media Object

Author: Not specified
Since: 0.9.0
Source: /source/patterns/objects/media-objects.scss#L7

  • Chevron Link

    Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.

    • <!-- media object -->
<li class="o-media-object">
   <div class="o-media-object__media">
      <img class="o-media-object__image" src="https://placehold.it/180" alt="" />
   </div>
   <div class="o-media-object__content">
      <h3><a class="c-chevron-link" href="#">Chevron Link</a></h3>
      <p>Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.</p>
   </div>
</li>

    Reversed Media Object

    Author: Not specified
    Since: 0.9.0
    Source: /source/patterns/objects/media-objects.scss#L68

  • Bacon ipsum dolor amet porchetta ut cupidatat sint, pig sausage ex ground round prosciutto aute laborum do velit enim elit. Qui jowl excepteur, beef ribs laborum picanha tongue shank id tri-tip short loin consequat meatloaf officia.

    Meatloaf ex, meatball nisi ea corned beef sirloin short loin jowl pork loin magna. Rump eiusmod sirloin tempor consequat short ribs. Salami proident adipisicing ad shank sunt prosciutto aute cow, reprehenderit minim laboris.

    • <!-- media object reversed -->
<li class="o-media-object o-media-object--reversed">
   <div class="o-media-object__content">
     <p>Bacon ipsum dolor amet porchetta ut cupidatat sint, pig sausage ex ground round prosciutto aute laborum do velit enim elit. Qui jowl excepteur, beef ribs laborum picanha tongue shank id tri-tip short loin consequat meatloaf officia.</p>
       <p>Meatloaf ex, meatball nisi ea corned beef sirloin short loin jowl pork loin magna. Rump eiusmod sirloin tempor consequat short ribs. Salami proident adipisicing ad shank sunt prosciutto aute cow, reprehenderit minim laboris.</p>
   </div>
    <div class="o-media-object__media">
      <img class="o-media-object__image" src="https://placehold.it/180x240" alt="" />
   </div>
</li>

    Tight Media Object

    Author: Not specified
    Since: 0.9.0
    Source: /source/patterns/objects/media-objects.scss#L111

  • Chevron Link

    Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.

    • <!-- media object tight -->
<li class="o-media-object o-media-object--tight">
   <div class="o-media-object__media">
      <img class="o-media-object__image" src="https://placehold.it/180" alt="" />
   </div>
   <div class="o-media-object__content">
      <h3><a class="c-chevron-link" href="#">Chevron Link</a></h3>
      <p>Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.</p>
   </div>
</li>

    Reversed Tight Media Object

    Author: Not specified
    Since: 0.9.0
    Source: /source/patterns/objects/media-objects.scss#L140

  • Meatloaf ex, meatball nisi ea corned beef sirloin short loin jowl pork loin magna. Rump eiusmod sirloin tempor consequat short ribs. Salami proident adipisicing ad shank sunt prosciutto aute cow, reprehenderit minim laboris.

    • <!-- media object reversed tight -->
<li class="o-media-object o-media-object--reversed o-media-object--tight">
    <div class="o-media-object__content">
      <p>Meatloaf ex, meatball nisi ea corned beef sirloin short loin jowl pork loin magna. Rump eiusmod sirloin tempor consequat short ribs. Salami proident adipisicing ad shank sunt prosciutto aute cow, reprehenderit minim laboris.</p>
    </div>
  <div class="o-media-object__media">
      <img class="o-media-object__image u-width-9-25rem" src="https://placehold.it/320" alt="" />
  </div>
</li>