MIZ

Github

1.0.0-alpha

1.0.0-alpha

Light

Dark

System

Browse docs

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

            

                

                    
Make beautiful websites regardless of your design experience.

                

            

            

                
                
HTML

                
            

            <div class="card">
    <p class="secondary-color">Make beautiful websites regardless of your design experience.</p>
</div>

Card with divider

            

                

                    

                        
                        

                            
Miz

                            easymizy.com
                        

                    

                    

                        
Make beautiful websites regardless of your 
 design experience.

                    

                    

                        Visit source code on GitHub. 
                    

                
                 
            

            

                
                
HTML

                
            

            <div class="card divider">
    <div class="card-header">
        <img class=" radius-all-small aspect-ratio-1x1" style="width: 40px;" src="/assets/media/images/output-onlinepngtools.png" alt="">
        <div class="w-70 d-flex flex-column align-content-center justify-content-space-between ">
            <p class="secondary-color">Miz</p>
            <a href="https://eazymizy.com" class="link txt-subtitle">easymizy.com</a>
        </div>
    </div>
    <div class="card-body">
        <p class="secondary-color">Make beautiful websites regardless of your <br> design experience.</p>
    </div>
    <div class="card-footer">
        <a href="#" class="on-primary-color bold txt-subtitle">Visit source code on GitHub. <i class="fa-solid fa-link"></i></a>
    </div>
</div>

With Image

            

                
                                                  
                    
                
                        
Daily Mix

                        
Frontend Radio

                        
12 Tracks

                    

                    

                        
                    

                

            

            

                
                
HTML

                
            

            <div class="card">
    <div class="card-header flex-column">                
        <p class="secondary-color txt-transform-uppercase">Daily Mix</p>
        <p class="secondary-color txt-mid-title">Frontend Radio</p>
        <p class="text-color txt-subtitle">12 Tracks</p>
    </div>
    <div class="card-body">
        <img class="radius-all-medium" style="width: 400px;" src="assets/media/images/output-onlinepngtools.png" alt="">
    </div>
</div>

Covered Image

            

            

                
                

                    
Available soon.

                    
                

            

            

            

                
                
HTML

                
            

            <div class="card covered-image">
    <img class="object-cover" style="width: 400px; height: 300px;" src="/assets/media/images/card-example-3.jpeg" alt="">
    <div class="card-footer blurred">
        <p class="secondary-color">Available soon.</p>
        <button class="btn btn-blur">Notify me</button>
    </div>
</div>

Scroll bar

            

                

                    

                        

                            
                            

                                
Zoey Lang

                                
@zoeylang

                            

                        

                        
                    

                    

                        
Frontend developer and UI/UX enthusiast. Join me on this coding adventure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, exercitationem est? Quo, eius rem. Cumque excepturi, minus voluptates labore saepe cum necessitatibus praesentium a accusamus unde, assumenda recusandae repudiandae fugiat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium hic odio quas reprehenderit sequi dolorem sit odit, aliquid, alias reiciendis numquam obcaecati ducimus aliquam non. Qui soluta cum perspiciatis consequatur. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae facilis deleniti dolorum accusamus officiis, repellat fugit nemo ut consequuntur maiores quod, aperiam est inventore iusto dolores nesciunt. Hic, ad quasi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At dolore voluptate voluptates odit, hic eveniet repellendus sapiente a mollitia veritatis saepe modi nemo eligendi quia voluptatum. Ab sunt voluptates quo!

                    

                    

                        
4 Following

                        
97.1K Followers

                    

                

            

            

                
                
HTML

                
            

            <div class="card card-scrollbar">
    <div class="card-header align-items-center justify-content-space-between gap-2">
        <div class="d-flex align-items-center gap-2">
            <img class="object-cover aspect-ratio-1x1 radius-all-full bw-2 border-style-solid border-divider-color" width="50px" src="/assets/media/images/1f9048205abd80ea9c6f33461a3a3c2e (1).jpg" alt="">
            <div class="d-flex flex-column  justify-content-space-between gap-1">
                <p class="secondary-color">Zoey Lang</p>
                <p class="secondary-color txt-subtitle">@zoeylang</p>
            </div>
        </div>
        <button class="btn btn-outline-info ">Follow</button>
    </div>
    <div class="card-body " style="height: 55px;">
        <p class="txt-subtitle secondary-color">Frontend developer and UI/UX enthusiast. Join me on this coding adventure! Lorem 
        ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, exercitationem est? Quo, eius rem. Cumque excepturi, minus 
        voluptates labore saepe cum necessitatibus praesentium a accusamus unde, assumenda recusandae repudiandae fugiat. Lorem ipsum 
        dolor sit amet consectetur adipisicing elit. Laudantium hic odio quas reprehenderit sequi dolorem sit odit, aliquid, alias 
        reiciendis numquam obcaecati ducimus aliquam non. Qui soluta cum perspiciatis consequatur. Lorem ipsum dolor sit, amet consectetur 
        adipisicing elit. Recusandae facilis deleniti dolorum accusamus officiis, repellat fugit nemo ut consequuntur maiores quod, aperiam
         est inventore iusto dolores nesciunt. Hic, ad quasi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At dolore voluptate 
         voluptates odit, hic eveniet repellendus sapiente a mollitia veritatis saepe modi nemo eligendi quia voluptatum. Ab sunt voluptates
          quo!</p>
    </div>
    <div class="card-footer gap-2">
        <p class="txt-subtitle secondary-color">4 Following</p>
        <p class="txt-subtitle secondary-color">97.1K Followers</p>
    </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
.covered-image Container get image as background
.card-scrollbar Adds scrolling functionality to card content
.divider Adds divder to card

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-on-secondary-color, .radius-all-normal, .p-2, .w-fit-content";
$card-header-custom-classes: ".d-flex, .gap-1, .pb-2";
$card-body-custom-classes: ".d-flex, .gap-2, .py-2";
$card-footer-custom-classes: ".d-flex, .gap-2, .pt-2";
$card-image-space-custom-classes: ".px-2";
$card-scrollbar-custom-classes: ".p-2"; 
$card-divider-custom-classes: ".border-divider-color, .bw-1, .bb-style-solid";
$enable-card-full-divider : true; 
$card-content-space-divider: ".px-2";
$card-blurred-filter: "blur(15px) saturate(150%)"; 
$card-blurred-item: ".px-2, .py-1, .m-1, .radius-all-normal, .bw-1, .border-style-solid";
$card-blurred-item-border-color: color-mix(in srgb, get-color(border) 30% , transparent);

JavaScript #

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