Card Component #

Description #

The Card component is a flexible container that can display various types of content including images, text, and buttons. It supports multiple layouts and includes features like scrollable content and customizable headers/footers.

Examples and Classes #

Basic Example

            

                

                    

                        
                    
                    

                        
Title
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime aut ipsa voluptate.
                        
Last update was 3 min ago
                    
                
            
            

                
                
HTML
                
            
            <div class="card all-border-medium">
    <div class="card-image overflow-hidden" style="height: 20rem;">
        <img class="w-100" src="path_to_image.jpg" alt="">
    </div>
    <div class="card-body">
        <p class="section-title-text-color txt-mid-title">Title</p>
        <p class="multiply-ellipsis-3 section-title-text-color">Content text...</p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
    </div>
</div>
        

Scrollable Content Example

            

                

                    

                        
Header
                    
                    

                        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est placeat Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda id quaerat molestias recusandae labore perferendis sequi eligendi vero inventore dolorum, hic quae iusto praesentium! Quam voluptatem cupiditate vero vitae at! quam unde ea dicta labori osam! Laborum, id fugit? Aperiam Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nostrum quia tempora, magni saepe esse odit natus vel aut laudantium qui, facilis recusandae laborum quidem nemo officia sequi totam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium delectus quo, incidunt iusto sequi vero minus architecto nemo natus optio nihil, laudantium aperiam maiores, obcaecati totam commodi corporis ea eveniet? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit in eligendi ea voluptate! Eaque optio veniam unde maxime quae ducimus nihil veritatis culpa perferendis eveniet officiis cumque hic, eos alias.
                    
                    

                        
Footer
                    
                
            
            

                
                
HTML
                
            
            <div class="card card-scrollbar all-border-medium">
    <div class="card-header pb-0">
        <p class="section-title-text-color txt-mid-title">Header</p>
    </div>
    <div class="card-body">
        <p class="section-title-text-color mt-0" style="max-height: 4rem;">
            Long scrollable content...
        </p>
    </div>
    <div class="card-footer">
        <p class="section-title-text-color txt-mid-title">Footer</p>
    </div>
</div>
        

Card with Buttons Example

            

                

                    

                        
                    
                    

                        
Title
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime aut ipsa voluptate.
                        
Last update was 3 min ago
                        

                            Primary
                            Secondary
                        
                    
                
            
            

                
                
HTML
                
            
            <div class="card all-border-medium">
    <div class="card-image overflow-hidden" style="height: 20rem;">
        <img class="w-100" src="path_to_image.jpg" alt="">
    </div>
    <div class="card-body">
        <p class="section-title-text-color txt-mid-title">Title</p>
        <p class="multiply-ellipsis-3 section-title-text-color">Content text...</p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
        <div class="d-flex gap-1 mt-2">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
        </div>
    </div>
</div>
        

Available Classes

Class	Description
.card	Base class for all cards
.card-header	Header section of the card
.card-body	Main content area of the card
.card-footer	Footer section of the card
.card-image	Container for card images
.card-scrollbar	Adds scrolling functionality to card content

Layout Variations

Cards can be structured in different ways:

• Image on Top: Default layout with image above content
• Image on Bottom: Content above image
• With Header/Footer: Additional sections for more structured content
• Scrollable Content: For longer content that needs scrolling

File Locations #

Type	Path
SCSS	miz/themes/mizoon/components/card/_index.scss
HTML Example	miz/themes/mizoon/components/card/index.html
JavaScript	miz/themes/mizoon/components/card/script.js

SCSS Variables #

            

                
                
SCSS
                
            
            $card-custom-classes: ".bg-primary-color";
$card-header-custom-classes: ".px-2, .py-2";
$card-body-custom-classes: ".d-flex, .flex-column, .gap-1, .p-2";
$card-footer-custom-classes: ".pt-2";
$card-image-space-custom-classes: ".px-2";
$card-scrollbar-custom-classes: ".p-2";
        

JavaScript #

Currently, there is no specific JavaScript functionality for the card component.