幽灵卡

Spectre Cards 让我们可以设计卡片。卡片是一种灵活且可扩展的内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。

它取代了使用面板、井和缩略图。所有这些都可以在称为卡片的单个灵活内容容器中使用。要创建卡片，您需要使用卡片类添加容器元素。并使用card-image 、 card-header 、 card-body和card-footer类添加子元素。

幽灵卡类：

card：该类用于创建卡片组件。
card-image：该类用于向卡片添加图像。
card-header：这个类用于保存卡片标题和副标题类。
card-title：该类用于设置卡片的标题。
card-subtitle：该类用于设置卡片的字幕。
card-body：该类用于设置卡体内容。
card-footer：该类用于设置卡片的页脚。

注意：卡片图像可以放置在卡片上的任何位置。

句法：


  
    
  
  
    ...
    ...
  
  
    ...
  
  
    ...

示例：下面的示例说明了幽灵卡。

HTML



  

    
    
    
    

  

                      
        GeeksforGeeks
         SPECTRE card class 
     
    
      
        
      
      
        
            GeeksforGeeks
        
        
            A Computer Science Portal for Geeks
        
      
      
        
            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!

输出：

幽灵卡

参考： https://picturepan2.github.io/spectre/components/cards.html#cards