Foundation/Media Object (Flex)

foundation-media-object-flex.markdown

Foundation/Media Object (Flex)

This is a demo of Foundation's Media Object.

A Pen by Ian Kirkland on CodePen.

License.

index.html

<section class="container">
  
  <h2>Media Object</h2>

  <p>A media object is typically an image to the left, with descriptive content to the right. Foundation's Media Object will help you create this common repeatable pattern and can be used several different ways. Without using hacky floats, Foundation's media object achives this using either the table method, or Flexbox in the flex version.</p>

  <p>A media object is a container with the class <code>.media-object</code>, and two or three sections with the class <code>.media-object-section</code>.</p>

  <p>The unique behavior of Media Objects is the images in Media Objects are set to NOT shrink as the containers get smaller. This is desireable for many reasons but can be easily overwritten.</p>

  <div class="primary callout">
    <p>In flexbox mode, the class <code>.main-section</code> must be added to your center section in order to properly size it.</p>
  </div>
  <br>

  <div class="media-object">
    <div class="media-object-section">
      <div class="thumbnail">
        <img src="http://fillmurray.com/150/150">
      </div>
    </div>
    <div class="media-object-section main-section">
      <h4>Dreams feel real while we're in them.</h4>
      <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
    </div>
  </div>

</section>

script.js

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/2.1.1/what-input.min.js"></script>

style.scss

/** 
 * Demo Styles 
 */
* { 
  color: #444444; 
}

body {
  padding: 2rem 1rem;
}

.container {
  width: 80%;
  margin: auto;
  margin-top: 2em;
}

.row {
  margin-bottom: 2em;
}

.row.small-up-12 {
  margin-bottom: 0;
}

.column {
  margin-bottom: .5em;
}

/* Hides Foundation Docs Callout */
[href*="https://foundation.zurb.com/sites.html"] {
	visibility: hidden !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 0px !important;
	height: 0px !important;
	display: none !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.2/motion-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />