Product Card to Image

This example shows how to convert a product card into an image. This is useful for generating social media assets, email marketing materials, or catalog images.

HTML Content

<div class="product-card">
    <div class="badge">New</div>
    <div class="product-image">
        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="Product">
    </div>
    <div class="product-info">
        <h1>Nike Sport Shoes</h1>
        <p class="price">$199.99</p>
        <p class="description">
            Premium running shoes with enhanced comfort and durability.
            Perfect for both professional athletes and casual runners.
        </p>
        <div class="rating">
            ★★★★☆ <span>(4.2)</span>
        </div>
    </div>
</div>

CSS Styles

body {
    margin: 0;
    padding: 16px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.product-card {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ff3366;
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
}

.product-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h1 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.price {
    font-size: 24px;
    font-weight: bold;
    color: #ff3366;
    margin: 8px 0;
}

.description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0;
}

.rating {
    color: #ffd700;
    font-size: 16px;
}

.rating span {
    color: #666;
    font-size: 14px;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"product-card\"><div class=\"badge\">New</div><div class=\"product-image\"><img src=\"https://images.unsplash.com/photo-1542291026-7eec264c27ff\" alt=\"Product\"></div><div class=\"product-info\"><h1>Nike Sport Shoes</h1><p class=\"price\">$199.99</p><p class=\"description\">Premium running shoes with enhanced comfort and durability. Perfect for both professional athletes and casual runners.</p><div class=\"rating\">★★★★☆ <span>(4.2)</span></div></div></div>",
    "width": 332,
    "height": 460,
    "css": "body{margin:0;padding:16px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.product-card{width:300px;background:white;border-radius:12px;box-shadow:0 2px 20px rgba(0,0,0,0.1);overflow:hidden;position:relative}.badge{position:absolute;top:12px;right:12px;background:#ff3366;color:white;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:bold}.product-image{width:100%;height:200px;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-info{padding:20px}.product-info h1{margin:0;font-size:20px;color:#333}.price{font-size:24px;font-weight:bold;color:#ff3366;margin:8px 0}.description{color:#666;font-size:14px;line-height:1.5;margin:8px 0}.rating{color:#ffd700;font-size:16px}.rating span{color:#666;font-size:14px}"
}

How it Works

1. The product card uses modern CSS features for layout and styling
2. Shadow and border-radius create a floating card effect
3. The image uses object-fit for proper scaling
4. System fonts ensure consistent text rendering