Clients are always hating on tables, so instead they want cards. Then they complain if the cards don’t match each other in height.
This has a set of cards that allows the header and main body to take up the majority of the space, but the button is always locked to the bottom of the card. All the cards are the same height, and will hide if empty. Note this does require flexbox, so it’ll only work in BS3/BS4 sites.
Styles are not included, but hopefully the cards are laid out easily enough that you can create that on your own. You can also see the example sites for how others have styled them.
These cards also have hard-coded buttons to trigger a modal. See this snippet to get things set up so that if there is no content in the modal, the button (and associated modal) will hide.
How To
HTML
<div class="column-space flex-wrap d-flex d-md-row d-column justify-content-center align-items-stretch align-self-start my-5">
<div class="check-column hidden-card">
<div class="check-column-inner d-flex flex-column h-100">
<div class="check-column-inner-top">
<div data-content-block="card1top" data-content="content" data-editable="editable" class="content">
{% raw %}{{#page.card1top}}
{{& content}}
{{/page.card1top}}{% endraw %}
<!-- @if NODE_ENV!='production' -->
Account Name
<!-- @endif -->
</div>
</div>
<div class="check-column-inner-body flex-grow-1">
<div data-content-block="card1body" data-content="content" data-editable="editable" class="content">
{% raw %}{{#page.card1body}}
{{& content}}
{{/page.card1body}}{% endraw %}
<!-- @if NODE_ENV!='production' -->
<ul>
<li>mmy nibh euismod</li>
<li>Lorem ipsum dolor sit amet</li>
<li>consectetuer adipiscing</li>
<li>elit</li>
<li>sed diam</li>
<li>nonummy nibh euismod.</li>
</ul>
<!-- @endif -->
</div>
</div>
<div class="check-column-inner-footer">
<div class="modal-toggle" data-toggle="modal" data-target="#modal1">More Details</div>
</div>
</div>
</div>
<!-- insert as many cards as you need -->
</div>
Script - scripts.js
For best organization, this should go below the remove-blank function in the scripts.js.
// Hide card if no text (tricky because of text in footer)
$(".remove-card").each(function() {
if (window.self !== window.top || $.trim($(this).find('.card-header').text()) || $(this).find('.card-header').has("img").length || $(this).find('.card-header').has("iframe").length) {
//do nothing
} else {
$(this).remove();
}
});
Example Sites
Tags: bs3, bs4, card, modal, flexbox