Foundation/Media Object/Stack on Small (Flex)

foundation-media-object-stack-on-small-flex.markdown

Foundation/Media Object/Stack on Small (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 Stack on Small</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.</p>

  <p>By adding the <code>.stack-for-small</code> class, you can make your media object responsive. Images will get a width of 100%, but this can be changed.</p>
  
  <br>
  
  <!-- row, column -->
  <div class="row column medium-9">
    <div class="media-object stack-for-small">
      
      <div class="media-object-section middle">
        <img src="http://fillmurray.com/300/300">
      </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. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, illo doloremque dolores delectus. Maxime recusandae dicta atque amet maiores veniam molestias assumenda id provident, laudantium non reiciendis esse quae adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid pariatur odit qui reiciendis molestias! Laborum praesentium cumque possimus, minus dicta nulla repellat minima id, nesciunt vitae nihil enim tempora necessitatibus!</p>
      </div>
    </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;
}

.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.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" />