Components

Cards

#

Contact cards provide users with quick access to important contact information. Users can easily find details such as name, phone number, email address, and job title. These cards often feature buttons enabling users to initiate actions like making a call, sending an email, or accessing additional contact details.

#

Product cards offer users a snapshot of key information about a particular item. This includes details like product name, price, description, and availability. Buttons on product cards typically allow users to add items to their cart, view more details, or proceed to purchase directly. These buttons streamline the user experience, enabling swift actions and informed decisions.

#

Preview

profile

John Doe

A brief description about John Doe.

profile

Sample Product

$99.99

This is a great product.

#

Code


    
    "use client"  // for nextJS
    import { Card1, Card3 } from "mvk-ui";
    import userImage from '../../assets/user.png';
    import shopbagImage from '../../assets/shop.png';

    function App() {
        return (
            <>
                <Card1 
                    image={userImage} 
                    title="John Doe" 
                    text="A brief description about John Doe." 
                    textColor="#000" 
                /> 
                <Card3 
                    image={shopbagImage} 
                    title="Sample Product" 
                    product_price="$99.99" 
                    text="This is a great product."
                    text_on_btn="Buy Now"
                    onClick={() => alert('Buy Now clicked')}
                    textColor="#000" 
                />  
            </>
        );
    }

    export default App;