lintel-contrib-cards

Cards for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-cards --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-cards/sass/cards.scss"

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$card-padding-y

Default value: $cushion-y-md

Change the default padding-top and padding-bottom.

$card-padding-x

Default value: $cushion-x-md

Change the default padding-left and padding-right.

$card-header-padding-y, $card-body-padding-y, $card-footer-padding-y

Default value: $card-padding-y

Change padding-top and padding-bottom for a specific part.

$card-header-padding-x, $card-bodx-padding-x, $card-footer-padding-x

Default value: $card-padding-x

Change padding-left and padding-right for a specific part.

$card-bg

Default value: #fff

Card background.

$card-border

Default value: $border-base

Header and footer border.

$card-border-dark

Default value: $border-dark

Card border.

$card-border-radius

Default value: $border-radius-small

Card border-radius.

$card-header-text

Default value: $text-base

Header text color.

Examples

Base Card

<div class="card">
  <div class="card-header">
    <h1 class="card-heading text-h5">
      Title
    </h1>
  </div>
  <div class="card-body">
    Body
  </div>
  <div class="card-footer">
    Footer
  </div>
</div>

Linked Title

<h1 class="card-heading text-h5">
  <a href="#">Link Title</a>
  <small>Subtitle</small>
</h1>

Header Actions

Note: make sure there are no spaces between the actions and .card-heading otherwise there will be a bit of space before the card title. See how to remove the space between inline-block elements.

<div class="card-header">
  <div class="card-header-actions">
    <div class="btn-group">
      <button class="btn" type="button">
        Cancel
      </button>
      <button class="btn btn-primary" type="button">
        Save
      </button>
    </div>
  </div><!--
  --><h1 class="card-heading text-h5">
    Card Title
  </h1>
</div>

Footer Actions

Note: make sure there are no spaces between the actions any optional text on the left. See how to remove the space between inline-block elements.

<div class="card-footer">
  <div class="card-footer-actions">
    <div class="btn-group">
      <button class="btn" type="button">
        Cancel
      </button>
      <button class="btn btn-primary" type="button">
        Save
      </button>
    </div>
  </div><!--
  --><span class="text-muted">Last Saved: Right Now</span>
</div>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.