Card

A basic content container module

Source
Version
Updated
7/6/2017

Install

npm install designkit-card --save

Dependencies

Examples

Basic Card

Cards are used to apply a container around a related grouping of information.

HTML

<div class="card">
  <div class="card-content">
    <div class="card-body">
      <div>
        <!--Card Content-->
      </div>
    </div>
  </div>
</div>

Example

A card can include a optional header for a title area and a footer for UI actions.

HTML

<div class="card">
  <div class="card-content">
    <div class="card-heading">
      <h3 class="card-title">Card UI</h3>
    </div>
    <div class="card-body">
      <div>
        <!--Card Content-->
      </div>
    </div>
    <div class="card-footer">
      <div>Action bar</div>
    </div>
  </div>
</div>

Example

CSS