Spectre Cards

Last Updated : 28 Jan, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        .card { 
            margin:5%; 
        } 
    </style> 
</head> 
  
<body> 
    <center>                   
        <h1 class="text-success">GeeksforGeeks</h1> 
        <b><p> SPECTRE card class </p></b> 
    </center>  
    <div class="card"> 
      <div class="card-image"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png" 
             class="img-responsive"> 
      </div> 
      <div class="card-header"> 
        <div class="card-title h6 text-green"> 
            GeeksforGeeks 
        </div> 
        <div class="card-subtitle text-gray"> 
            A Computer Science Portal for Geeks 
        </div> 
      </div> 
      <div class="card-body"> 
        <p> 
            We provide a variety of services for you  
            to learn, thrive and also have fun! Free  
            Tutorials, Millions of Articles, Live,  
            Online and Classroom Courses ,Frequent  
            Coding Competitions ,Webinars by Industry 
            Experts, Internship opportunities and Job 
            Opportunities. Knowledge is power! 
        </p> 
  
      </div> 
      <div class="card-footer"> 
        <button class="btn btn-success"> 
          Explore more 
        </button> 
      </div> 
    </div> 
</body> 
</html>