Spectre Cards

Spectre Cards offers us to design cards. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colours, and powerful display options.

It replaces the use panels, wells and thumbnails. All of it can be used in a single flexible content container called a card. To create a card you need to add a container element with the card class. And add child elements with the card-image, card-header, card-body and card-footer classes. 

Spectre Card Classes:

• card: This class is used to create the card component.
• card-image: This class is used to add images to the card.
• card-header: This class is used to hold the card title and subtitle class.
• card-title: This class is used to set the title of the card.
• card-subtitle: This class is used to set the subtitle of the card.
• card-body: This class is used to set the card body content.
• card-footer: This class is used to set the footer of the card.

Note: The card-image can be placed anywhere on the card.

Syntax:

<div class="card">
 <div class="card-image">
 <img src="...">
 </div>
 <div class="card-header">
 <div class="card-title">...</div>
 <div class="card-subtitle">...</div>
 </div>
 <div class="card-body">
 ...
 </div>
 <div class="card-footer">
 ...
 </div>
</div>

Example: Below example illustrate the Spectre Cards.

Output:

👁 Spectre Cards

Reference: https://picturepan2.github.io/spectre/components/cards.html#cards