Cards (aka ‘Panels’)
Cards help organize the contents of a Rich Text / HTML box through clear chunking of information.
Card Builder
Cards are typically used in multiples or paired with other elements. Use cards to strong effect by placing them inside columns. You may style your cards with any combination of the attributes below. The default accent color for cards is: Default (grey).
Panel Title
<div class='panel panel-primary'>
<div class='panel-heading'>
<h5 class='panel-title'>
Panel Title
</h5>
</div>
<div class='panel-body'>
Lorem ipsum dolor sic amet.
</div>
<div class='panel-footer'>
Footer content
</div>
</div>
‘Example’ Panel
The ‘example’ panel is useful for focusing users by framing your content. You may wish to place your example panel in a multi-column layout, perhaps placing your explication beside it. As in the example of this handbook, the ‘example’ panel is also well-paired with a code well.
<div class="example"> Content goes here </div>
Panel Builder (collapsible)
Like tabs, panels help chunk content efficiently, concealing larger amounts of data and allowing users to quickly navigate to what they need by scanning headings. A good use for collapsible panels? FAQ boxes!
Keep Panel Sets Unique
While you may place as many sets of collapsible panels on a page as you like, do not simply cut and paste the same set again and again. Make sure to generate each new panel set anew, ensuring the random number assigned to each panel set stays unique and does not conlflict with the other panel sets on the page.
<div class='panel-group' id='accordion' role='tablist' aria-multiselectable='true'>
<div class='panel panel-default'>
<div class='panel-heading' role='tab' id='heading0'>
<h5 class='panel-title'><a role='button' data-toggle='collapse' data-parent='#accordion' href='#collapse1' aria-expanded='true' aria-controls='collapse1'> Panel 1</a></h5></div>
<div id='collapse1' class='panel-collapse collapse' role='tabpanel' aria-labelledby='heading1'>
<div class='panel-body'>Lorem ipsum dolor sic amet!</div>
</div>
</div>
<div class='panel panel-default'>
<div class='panel-heading' role='tab' id='heading1'>
<h5 class='panel-title'><a role='button' data-toggle='collapse' data-parent='#accordion' href='#collapse2' aria-expanded='true' aria-controls='collapse2'> Panel 2</a></h5></div>
<div id='collapse2' class='panel-collapse collapse' role='tabpanel' aria-labelledby='heading2'>
<div class='panel-body'>Lorem ipsum dolor sic amet!</div>
</div>
</div>
</div> <!-- panel group -->