Foundation/Cards/Card Divider (Flex)

foundation-cards-card-divider-flex.markdown

Foundation/Cards/Card Divider (Flex)

This is a demo of Foundation's Cards.

A Pen by Ian Kirkland on CodePen.

License.

index.html

<section class="container">

  <h2>Card Divider</h2>
  <p>You can also include a <code>.card-divider</code> element as a title, footer or to break up content.</p>
  <br>

  <div class="card" style="width: 300px;">
    <div class="card-divider">
      <h4>I'm featured</h4>
    </div>
    <img src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg">
    <div class="card-section">
      <p>This card makes use of the card-divider element.</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://codepen.io/ZURBFoundation/pen/jmYLwq"></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;
}

/* 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://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.2/motion-ui.css" rel="stylesheet" />