<p>The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<p>The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <ahref="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <ahref="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
</div>
<divclass="section">
<h2>Quick start</h2>
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <ahref="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
<p>To start using cards in your layout, you need to be somewhat familiar with the <ahref="grid.html"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
<ol>
<li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
<li>Inside the <code>.row</code>, cards are defined as <code><div></code> elements of the <code>.card</code> class.</li>
<li>Finally, inside the <code>.card</code>s, you can define sections using the <code>.section</code> class to wrap your content.</li>
</ol>
<p>Note that cards will respond to screen changes, realigning themselves as necessary to fit on the page.</p>
<h3>Sample code</h3>
<pre><div class="row">
<div class="card">
<div class="section">
<h3>Card Title</h3>
<p>Card content...</p>
</div>
</div>
<div class="card">
<div class="section">
<h3>Card Title</h3>
<p>Card content...</p>
</div>
</div>
</div></pre>
</div>
</div>
<divclass="section">
<h3>Notes</h3>
<ul>
<li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li>
<li>If you want to further customize your <code>.section</code>s, check the section below.</li>
</ul><hr>
<divclass="row">
<divclass="col-sm-12 col-md-6 col-lg-4">
<pre><div class="card">
<div class="section">
<h3>Card Title</h3>
</div>
<div class="section">
<p>Card content...</p>
<p>More card content...</p>
</div>
</div></pre>
<pclass="do"><markclass="tertiary">Do:</mark> You can add as many <code>.section</code>s as you like to a card.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid using cards with content inside them that is not wrapped in sections. Try to use a single <code>.section</code> to wrap the content inside these to avoid unexpected behavior.</p>
<pclass="do"><markclass="tertiary">Do:</mark> You can use the <code>.section</code> class for things other than <code><div></code> elements (e.g. <code><h1></code>-<code><h6></code>, <code><p></code>, <code><button></code>).</p>
<pclass="dont"><markclass="secondary">Don't:</mark> If you want to place multiple cards side by side, add them all inside the same <code>.row</code>. Placing cards inside different rows or not inside rows at all can result in unexpected behavior. </p>
</div>
<divclass="col-sm-12 col-md-6 col-lg-4">
<pre><div class="card">
<div class="section row">
<div class="card">
</div>
</div>
</div>
<spanclass="fore-tertiary"><!-- or --></span>
<div class="card">
<div class="row">
<div class="card">
</div>
</div>
</div></pre>
<pclass="do"><markclass="tertiary">Do:</mark> You can place <code>.row</code> elements inside <code>.card</code> elements, if you want. you should normally also make those rows into card <code>.section</code>s, but for this specific case you might want to make an exception sometimes.</p>
<divclass="card"><divclass="section"><h3>Card with image</h3></div><imgclass="section media"src="https://placehold.it/800x600"><divclass="section"><p>Content</p></div></div>
<divclass="card"><iframeclass="section media"width="1280"height="720"src="https://www.youtube.com/embed/ScMzIvxBSi4"frameborder="0"></iframe><divclass="section"><h3>Card with video</h3></div></div>
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code><img></code> element or a video element of your choice (e.g. using a <code><iframe></code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>. Finally, you can turn a whole <code>.card</code> black, by applying the <code>.inverse</code> class to it. This is not really a section trick, but we thought we should include it here anyway.</p>
<li>The <code>.media</code> class might not be well supported in older browsers, especially legacy versions of Internet Explorer.</li>
<li>Due to the <code>.media</code> class using <ahref="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend <ahref="https://github.com/bfred-it/object-fit-images">this one</a> for images and <ahref="https://github.com/jonathantneal/fitie">this one</a> for videos.</li>
<li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <ahref="customization.html">customization page</a> for instructions.</li>
</ul>
</div>
</div>
</div>
</div>
<divclass="row">
<divclass="col-sm col-lg-10 col-lg-offset-1">
<divclass="card fluid">
<divclass="section"><h2>Card sizing & fluidity</h2></div>
<divclass="card small"><divclass="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div>
<divclass="card large"><divclass="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div>
<divclass="col-sm-12 col-md-12 col-lg">
<divclass="card fluid"style="margin: 2px 10px 20px;"><divclass="section"><h3>Fluid Card</h3><p>Fluid cards scale their width based on their container. Always wrap them in a column.</p></div></div>
<p>Apart from the normal-sized cards (<code>320px</code> wide), there are also two different fixed-width card styles, which can be applied using the <code>.small</code> and <code>.large</code> classes respectively. Fluid cards are available via the <code>.fluid</code> class, but they require one extra step in the card structure, between the <code>.row</code> and <code>.card</code> step, which is to insert either a <code>.col-<spanclass="fore-primary">SCR_SZ</span></code>, replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><spanclass="fore-tertiary">sm</span></code> for smaller screens, <code><spanclass="fore-tertiary">md</span></code> for medium-sized screens or <code><spanclass="fore-tertiary">lg</span></code> for larger screens) or a <code>.col-<spanclass="fore-primary">SCR_SZ</span>-<spanclass="fore-secondary">COL_WD</span></code> to specify columns with fixed width, replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><spanclass="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the column.</p>
<h3>Sample code</h3>
<pre><div class="card small">
<div class="section">
<p>Content</p>
</div>
</div>
<div class="card large">
<div class="section">
<p>Content</p>
</div>
</div>
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<p>Content</p>
</div>
</div>
</div></pre>
</div>
</div>
<divclass="section">
<h3>Notes</h3>
<ul>
<li><code>.fluid</code> cards might not display properly in older browsers, especially legacy versions of Internet Explorer.</li>
<li>Due to the fact that <code>.fluid</code> cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.</li>
</ul><hr>
<divclass="row">
<divclass="col-sm-12 col-md-6">
<pre><div class="card">
<div class="section">
<p>Content</p>
</div>
</div>
<div class="card fluid">
<div class="section">
<p>Content</p>
</div>
</div></pre>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid mixing fixed-width cards with <code>.fluid</code> cards. Mixing the two could result in some unexpected behaviors. You can, however, mix fixed-width cards with fluid columns, which can contain <code>.fluid</code> cards inside them, effectively achieving the desired effect.</p>
<pclass="dont"><markclass="secondary">Don't:</mark> Avoid using <code>.fluid</code> cards without wrapping them in columns. Try to use a single <code>.col-sm</code> to wrap the card inside it, otherwise there might be unexpected behavior.</p>
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <ahref="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <iclass="fa fa-heart-o"aria-hidden="true"></i> by <ahref="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <ahref="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <ahref="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
