Cards

Card Type Asset (Image Card)

Card Type Asset (File Card)

Card Type Asset (User Card)

Card Type Directory (Folder Card)

Card Type Template with Card Interactive (Template Card)

Card Type Template with Card Interactive (Template Card Horizontal)

Horizontal Card with autofit-col-*

Use card-row with autofit-col-expand and autofit-col to create a number of custom horizontal cards. autofit-col-expand fills the remaining space and autofit-col is only as wide as its content inside.

<div class="card-row">
    <div class="autofit-col">
        <section class="autofit-section"></section>
    </div>
    <div class="autofit-col autofit-col-expand">
        <section class="autofit-section"></section>
    </div>
</div>

Two .autofit-col's no .autofit-col-expand.

<div class="card-row">
    <div class="autofit-col">
        <section class="autofit-section"></section>
    </div>
    <div class="autofit-col">
         <section class="autofit-section"></section>
    </div>
</div>

Two .autofit-col-expand's no .autofit-col.

<div class="card-row">
    <div class="autofit-col autofit-col-expand">
        <section class="autofit-section"></section>
    </div>
    <div class="autofit-col autofit-col-expand">
        <section class="autofit-section"></section>
    </div>
</div>

Padded Horizontal Cards

Nest card-row in card-body on to add some spacing around a horizontal card.

<div class="card-body">
    <div class="card-row"></div>
</div>

Truncating Text Inside Card

Add class text-truncate on whatever text you want to be truncated.

• ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin
• Folder 01

  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin
• Folder 02

  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin
• Folder 03

  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin

Add gutters to a specific card card column by using the class autofit-col-gutters.

Card Helper Classes

Use classes rounded, rounded-circle, or rounded-0 on the card to quickly shape the borders.

Use classes card-item-first and card-item-last on elements that appear at the beginning or ending of your card. It styles the border-radius to match the card's border-radius. These classes work similar to Bootstrap 4's .card-img-top and .card-img-bottom but also covers left and right.

Clickable Checkbox Card

To make the whole card clickable just wrap the checkbox and card in:

<div class="form-check form-check-card form-check-top-left">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox">
        <div class="card">...</div>
    </label>
</div>

Clickable Radio Card

To make the whole card clickable just wrap the radio input and card in:

<div class="form-check form-check-card form-check-top-left">
    <label class="form-check-label">
        <input class="form-check-input" type="radio">
        <div class="card">...</div>
    </label>
</div>

Checkbox Card

We have created a pattern to add checkboxes to cards, just wrap the checkbox and card in:

<div class="form-check form-check-card form-check-top-left">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox">
    </label>
    <div class="card">...</div>
</div>

Radio Card

We have created a pattern to add radio inputs to cards, just wrap the radio input and card in:

<div class="form-check form-check-card form-check-top-left">
    <label class="form-check-label">
        <input class="form-check-input" type="radio">
    </label>
    <div class="card">...</div>
</div>