Template:Card

This Card template offers a different approach to displaying cards without using HTML codes on the content pages. Instead, set the content and style for the card using the parameters listed below.

Parameters

The template serves the following parameters:

header - The header text of the card
headercolor - The background color of the header section
headerbg - The background color of the header section
title - The title text of the card
titlecolor - The color for the title text
content - The body content of the card
contentcolor - The color for the content text
bodybg - The background color of the body section
footer - The footer text of the card
footercolor - The color for the footer text
footerbg - The background color of the footer section
border - The border color of the card
maxwidth - Max width of the card
class - Classes for the card, replacing the default bottom margin mb-3

For all possible color styles and examples see Colors.

Simple Card

Code

{{Card
|header=Header
|headercolor=white
|title=Title
|titlecolor=white
|content=Some quick example text to build on the card title and make up the bulk of the card's content.
|contentcolor=white
|bodybg=primary
}}

Result

Header

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Customized Card

Code

{{Card
|header=Card header
|headercolor=white
|headerbg=success
|title=Card title
|titlecolor=dark
|content=This is the card content![[File:DSC02180 363.jpg|class=card-img-top]]
|contentcolor=dark
|bodybg=light
|footer=I have a footer
|footercolor=white
|footerbg=warning
|border=dark
|maxwidth=25rem
}}

Result

Card header

Card title

This is the card content!

I have a footer

Card Deck

Updated for Bootstrap 5. Parts of this page's Bootstrap 4 code no longer work with Bootstrap 5. Wikis moving to Bootstrap 5, for example with Chameleon 6, need to update such content too. See the Bootstrap 4 version of this page.

Code

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    {{Card
    |header=Card 1
    |title=Card Title
    |content=Card with short content and no footer.
    |bodybg=light
    |maxwidth=none
    |class=h-100
    }}
  </div>
  <div class="col">
    {{Card
    |header=Card 2
    |title=Card Title
    |content=Some quick example text to build on the card title and make up the bulk of the card's content. This card has more text than the others.
    |bodybg=light
    |footer=Card Footer
    |maxwidth=none
    |class=h-100
    }}
  </div>
  <div class="col">
    {{Card
    |header=Card 3
    |title=Card Title
    |content=Some quick example text to build on the card title and make up the bulk of the card's content.
    |bodybg=light
    |footer=Card Footer
    |maxwidth=none
    |class=h-100
    }}
  </div>
</div>

Result

Card 1

Card Title

Card with short content and no footer.

Card 2

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content. This card has more text than the others.

Card Footer

Card 3

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Footer

Template code

<includeonly><!--
--><div class="card {{#if: {{{border|}}} |border border-{{{border}}} }} text-{{{contentcolor|black}}} bg-{{{bodybg|info}}} {{{class|mb-3}}}" style="max-width: {{{maxwidth|18rem}}};">
  <div class="card-header {{#if: {{{headerbg|}}} |bg-{{{headerbg}}} }} {{#if: {{{headercolor|}}} |text-{{{headercolor}}} }}">{{{header|}}}</div>
  <div class="card-body text-{{{contentcolor|black}}} bg-{{{bodybg|info}}}">
    <h5 class="card-title {{#if: {{{titlecolor|}}} |text-{{{titlecolor}}} }}">{{{title|}}}</h5>
    <p class="card-text">{{{content|}}}</p>
  </div>
  {{#if: {{{footer|}}} |
<div class="card-footer {{#if: {{{footerbg|}}} |bg-{{{footerbg}}} }}">
<small class="text-{{{footercolor|muted}}}">{{{footer}}}</small>
</div>
  }}
</div></includeonly>