Skip to content

Instantly share code, notes, and snippets.

@ianthekirkland

ianthekirkland/foundation-cards-card-sizing-flex.markdown

Created September 4, 2017 19:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ianthekirkland/ece2d9e719692b1c25c52d0ec217b4b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ianthekirkland/ece2d9e719692b1c25c52d0ec217b4b4 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation/Cards/Card Sizing (Flex)
Raw
foundation-cards-card-sizing-flex.markdown
Raw
index.html
<section class="container">
<!-- row -->
<div class="row small-up-12 medium-up-12 large-up-12 align-center">
<div class="column">
<h2>Card Sizing</h2>
<p>A card is just an element with a <code>.card</code> class applied. You can put any kind of content inside. Make sure you wrap your content in a <code>.card-section</code> element in order to achieve the traditional card look.</p>
<p>A card container has no padding, allowing you to place full-bleed images inside. Use the <code>.card-divider</code> and <code>.card-section</code> classes to sub-divide a card.</p>
<p>You can arrange the card classes in any order that suits your content. See below:</p>
</div>
</div>
<br>
<!-- row -->
<div class="row medium-unstack">
<!-- column -->
<div class="column medium-4">
<div class="card">
<div class="card-divider">
This is a header
</div>
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<!-- column -->
<div class="column medium-4">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column medium-4">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-divider">
What's going on here?
</div>
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
<!-- row -->
<div class="row small-up-12 medium-up-12 large-up-12 align-center">
<div class="column">
<hr><br>
<p>Place your image inside the <code>.card-section</code> wrapper to have padding around it.</p>
</div>
</div>
<!-- row -->
<div class="row medium-unstack">
<!-- column -->
<div class="column medium-4">
<div class="card">
<div class="card-section">
<img src="http://fillmurray.com/500/300">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column medium-4">
<div class="card">
<div class="card-section">
<img src="http://fillmurray.com/500/300">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column medium-4">
<div class="card">
<div class="card-section">
<img src="http://fillmurray.com/500/300">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- row -->
<div class="row small-up-12 medium-up-12 large-up-12 align-center">
<div class="column">
<hr><br>
<p>As you can see, sizing the cards within grid columns works well. You can use the Foundation <a href="https://foundation.zurb.com/sites/docs/flex-grid.html#block-grids">Block Grid</a> for even width cards.</p>
</div>
</div>
<!-- row -->
<div class="row small-up-2 medium-up-3 large-up-4 align-center">
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<!-- column -->
<div class="column">
<div class="card">
<img src="http://fillmurray.com/500/300">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
<div class="card-divider">
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Raw
script.js
$(document).foundation();
Raw
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>
Raw
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;
}
Raw
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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment