Image Card Component

Overview #

The Image Card component in the MIZ framework is designed to display information alongside an image. It supports multiple layouts with flexible arrangements of images, text, and buttons. Cards can also include headers and footers, as well as a scrolling feature for longer content.

Example #

Here’s a basic example of the Image Card:

                
                   
                    

                        

                            
                        
                        

                            
Title
                            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe maxime aut ipsa voluptate. Molestiae ad omnis quos voluptatem odio aspernatur inventore error mollitia nemo soluta fugit veniam eligendi, tenetur magni! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, dolorem? Dolore eos nostrum eveniet possimus, placeat ea provident est, earum, corporis laboriosam quo repellendus hic. Dolorem error laborum atque excepturi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis alias aliquam quae consequuntur eaque quod quaerat, molestiae dicta commodi voluptatibus. Labore voluptatibus porro ipsa vitae quis aliquam quam vero blanditiis!
                            
Last update was 3 min ago
                        
                    
                    
                 
                

                    
                    
HTML
                    
                
                <div class="card bg-secondary-color 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">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id eveniet fugiat voluptate.
        </p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
    </div>
</div>
            

Layout Variations #

1. Image on Top: The default layout where the image appears on top of the card.
2. Image on Bottom: A variation where the image is positioned at the bottom of the card.

                    
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id eveniet fugiat voluptate.
Last update was 3 min ago

                    

                        
                        
HTML
                        
                    
                    <div class="card bg-secondary-color all-border-medium">
    <div class="card-body">
        <p class="section-title-text-color txt-mid-title">Title</p>
        <p class="multiply-ellipsis-3 section-title-text-color">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id eveniet fugiat voluptate.
        </p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
    </div>
    <div class="card-image overflow-hidden" style="height: 20rem;">
        <img class="w-100" src="path_to_image.jpg" alt="">
    </div>
</div>
                

Card with Button #

You can add buttons to your card for interactivity. For example:

                    
    
            
    
        
Card content
        Button    
                        
                    
                    

                        
                        
HTML
                        
                    
                    <div class="card bg-secondary-color 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="multiply-ellipsis-3 section-title-text-color">Card content</p>
        <button class="btn btn-primary btn-round section-title-text-color txt-subtitle px-2">Button</button>
    </div>
</div>
                

---

Scrollbar Card Component

Overview #

The Scrollbar Card component is used when content exceeds the available space. This card includes a vertical scrollbar, making it ideal for content-heavy sections that require scrolling.

Example #

Here’s an example of the Scrollbar Card:

                
Header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est placeat quam unde ea dicta laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi at omnis doloribus, nisi velit nam unde officiis quos. Soluta voluptate explicabo nam, laboriosam aut odit odio possimus ut ad ipsa! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis assumenda dicta, corrupti reiciendis eveniet est sint animi cum nulla explicabo dolorem dolore, quo quod libero velit architecto non! Sint, natus? Lorem ipsum dolor sit amet consectetur adipisicing elit.Sed quaerat ad cupiditate repellendus fuga odio delectus fugit ipsa, non quia nihil in vel dolores sunt unde at nobis sapiente placeat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, eos mollitia. Impedit nisi in, eius sed modi rem cum sequi quibusdam, eaque, incidunt maiores odit eum deleniti voluptates animi est? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius minus magni cupiditate corrupti maxime corporis rerum quas dolor voluptatum temporibus dolore totam, nesciunt amet blanditiis earum pariatur, neque atque ad. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod id reprehenderit doloremque vel consequuntur nam adipisci eligendi! Veritatis et laudantium odio, necessitatibus fugit repellat autem distinctio, veniam nesciunt, quasi sapiente.
Footer
                                 
                 
                

                    
                    
HTML
                    
                
                <div class="card bg-secondary-color 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">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id eveniet fugiat voluptate.
        </p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
    </div>
</div>
                

Scrollable Content #

You can add long content within the body of the card, which will scroll when it exceeds the maximum height:

                    
Long scrollable content that exceeds the card's height... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem accusamus asperiores est nisi harum iste minus soluta aperiam! Similique quod consequuntur optio placeat deleniti cumque natus nesciunt sunt recusandae voluptas! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos dolorum quaerat vel numquam! Quidem non voluptas blanditiis cumque itaque veritatis, maiores et consequatur, officiis repellat, consequuntur explicabo enim ad unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolore aperiam, hic maxime cum cumque, fugit, provident similique reiciendis dolores deleniti accusamus doloribus. Animi ipsa nihil error praesentium. Tempora, nulla! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam rem id quis esse. Ratione eum facilis, at dolorum optio labore consectetur assumenda hic, ex perferendis provident veniam deserunt commodi incidunt? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem molestiae ipsum ad numquam sit tenetur nulla eligendi necessitatibus repellendus, quaerat, dolores, rem impedit! Repellat fugiat commodi nihil optio deleniti deserunt.
                    
                 
                 

                     
                     
HTML
                     
                    
                    <div class="card bg-secondary-color 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">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id eveniet fugiat voluptate.
        </p>
        <p class="text-color txt-subtitle">Last update was 3 min ago</p>
    </div>
</div>

Conclusion #

Both the Image Card and Scrollbar Card components offer flexibility in layout and design, making them useful for a variety of use cases such as galleries, articles, and content-heavy sections. Use the examples and customization options to fit these components into your projects with ease.