Cards
Basic Card
Basic Card
This is an example of a Basic Card.
<div class="c-container--canvas">
<div class="row">
<div class="col-sm-12">
<div class="c-card">
<div class="c-card__content">
<div class="t-title--large"> Basic Card </div>
<p> This is an example of a Basic Card. </p>
</div>
<div class="c-card__footer">
<button class="btn btn-tertiary"> Tertiary Button </button>
<button class="btn btn-primary" type="button"> Primary Button </button>
</div>
</div>
</div>
</div>
</div>
Card Title Variant
Basic Card Title
This is an example of a Basic Card.
<div class="c-container--canvas">
<div class="row">
<div class="col-sm-12">
<div class="c-card">
<div class="c-card__header">
<div class="t-type-base-strong"> Basic Card Title </div>
</div>
<div class="c-card__content">
<p> This is an example of a Basic Card. </p>
</div>
<div class="c-card__footer">
<button class="btn btn-tertiary"> Tertiary Button </button>
<button class="btn btn-primary" type="button"> Primary Button </button>
</div>
</div>
</div>
</div>
</div>
Card Groups
jQuery Plugin
The Card Group requires a single line of JavaScript. All card groups in a page can be initialzed by a single call, like this:
$('.c-card-group').flexCardGroup();
Desktop
Basic Card (not expandable/collapsible)
Collapsible Card
This is an example of a Collapsible Card.
With another sample of a different element type.
Toggle Next Div
Click the link to toggle my visibility.
Collapsible Card with Title Border
This is an example of a Collapsible Card with the title border applied.
This is an example of a Collapsible Card.
With another sample of a different element type.
This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling inputs that are housed in this card (or other uses as necessary).
The title collapses the card.
This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling inputs that are housed in this card (or other uses as necessary).
The title checks the box.
This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling inputs that are housed in this card (or other uses as necessary).
<div class="c-container--canvas">
<div class="row">
<div class="col-sm-12">
<div class="c-card-group">
<div class="c-card">
<div class="c-collapsible__title"> Basic Card (not expandable/collapsible) </div>
</div>
<div class="c-card">
<div class="c-collapsible__title"
data-toggle="collapse"
data-target="#card-collapsible-1">
<div>Collapsible Card</div>
<span class="flexicon flexicon-toggler flexicon-chevron"></span>
</div>
<div class="collapse" id="card-collapsible-1">
<div class="c-collapsible__content">
<p> This is an example of a Collapsible Card. </p>
<div> With another sample of a different element type. </div>
<a href="javascript:void(0);" class="js-card-link">Toggle Next Div</a>
<div>
Click the link to toggle my visibility.
</div>
</div>
</div>
</div>
<div class="c-card">
<div class="c-collapsible__title c-collapsible-title-border"
data-toggle="collapse"
data-target="#card-collapsible-2">
<div>Collapsible Card with Title Border</div>
<span class="flexicon flexicon-toggler flexicon-chevron"></span>
</div>
<div class="collapse" id="card-collapsible-2">
<div class="c-collapsible__content">
<p> This is an example of a Collapsible Card with the title border applied. </p>
<p> This is an example of a Collapsible Card. </p>
<div> With another sample of a different element type. </div>
<div class="c-search-input">
<span class="flexicon flexicon-search"></span>
<input class="form-control" placeholder="Type to search...">
<button class="flexicon flexicon-close" style="display: none;">
</div>
</div>
<script>
jQuery(function ($) {
$('.c-search-input').flexSearchInput();
});
</script>
</div>
</div>
<div class="c-card">
<div class="c-collapsible__title c-collapsible-title-border"
data-toggle="collapse"
data-target="#card-collapsible-3">
<div class="c-card-enable">
<input type="checkbox" checked="" id="enable1"><label for="enable1">Collapsible Card with Enable/Disable</label>
</div>
<span class="flexicon toggler flexicon-chevron"></span>
</div>
<div class="collapse" id="card-collapsible-3">
<div class="c-collapsible__content">
<p> This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling
inputs that are housed in this card (or other uses as necessary).
</p>
</div>
</div>
</div>
<div class="c-card">
<div class="c-collapsible__title c-collapsible-title-border"
data-toggle="collapse"
data-target="#card-collapsible-4">
<div class="c-card-enable">
<input type="checkbox" checked="" id="enable2"><label class="use-for-collapsing">Dolar Cavat</label>
</div>
<span class="flexicon toggler flexicon-chevron"></span>
</div>
<div class="c-card-enable-summary">
The title collapses the card.
</div>
<div class="collapse" id="card-collapsible-4">
<div class="c-collapsible__content">
<p> This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling
inputs that are housed in this card (or other uses as necessary).
</p>
</div>
</div>
</div>
<div class="c-card">
<div class="c-collapsible__title c-collapsible-title-border"
data-toggle="collapse"
data-target="#card-collapsible-5">
<div class="c-card-enable">
<input type="checkbox" checked="" id="enable3"><label for="enable3">Numquam Elus</label>
</div>
<span class="flexicon toggler flexicon-chevron"></span>
</div>
<div class="c-card-enable-summary">
The title checks the box.
</div>
<div class="collapse" id="card-collapsible-4">
<div class="c-collapsible__content">
<p> This is an example of a Collapsible Card with an Enable/Disable select input. We use it for disabling/enabling
inputs that are housed in this card (or other uses as necessary).
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.c-card-group').flexCardGroup();
$('.js-card-link').on('click', function () {
$(this).next().toggle();
});
function shadeSummaryText($checkbox) {
if ($checkbox.prop('checked')) {
$checkbox.closest('.c-card').find('.c-card-enable-summary').css('color', '#0077d9');
} else {
$checkbox.closest('.c-card').find('.c-card-enable-summary').css('color', '#a6a6a6');
}
}
$('.c-card-enable :checkbox').on('change', function() {
shadeSummaryText($(this));
});
});
</script>
Implementation Notes
- data-toggle="collapse" marks the elment as the toggle trigger.
- data-target is the CSS selector for the element to expand/collapse.
- class="collapse" on the collapsible element is required.
- Set aria-expaned to "true" to on trigger element and add class "in" to collapsible element to start with collapsible element expanded.
- The collapsible element doesn't have documentation on the current Bootstrap site (version 3.3.7). Version 4 has a slightly different implementation. So use the guidelines above for implementation purposes.
- The 'enable/disable' toggle will not trigger the expandable/collapsible but will allow that functionality to work when the card or arrow is clicked.
- Text Value rules for the Summary value:
- Range: value - value
- Multi: first value +n
- Single value: value
- Alternate Text Value rule: Allow the user to put any summary value in and the element will cap its size to 50% of the title area, using elipsise if it overflows.
- Configurable checkbox/collapse rules:
- Title Text
- NOTE: For accessability (a11y standards) it is generally advised to allow a broader click area for checkboxes(IE clicking the checkbox label should act the same as clicking the checkbox). While the UI Library is purposefully designed to be open and flexible, it is suggested the implementation adhere to accessability standards.
- Title text expands/collapses the card if the label has the class 'use-for-collapsing' defined.
- Title text clicks the checkbox if the 'for' property is set to the id of the checkbox.
- Title Text