GitHub Repository Card
This example shows how to create a GitHub repository card that can be converted to an image. Perfect for showcasing your projects on social media, documentation, or presentations.
HTML Content
<div class="repo-card">
<div class="repo-header">
<div class="repo-name-container">
<svg class="repo-icon" viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z" />
</svg>
<div class="repo-name">
<a href="https://github.com/html2img/html-to-image" class="repo-link">codeium/html-to-image</a>
<span class="repo-visibility">Public</span>
</div>
</div>
<button class="star-button">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" />
</svg>
Star
</button>
</div>
<div class="repo-description">
Convert HTML elements to images using pure JavaScript with no dependencies. Perfect for creating social media cards, screenshots, and more.
</div>
<div class="repo-meta">
<div class="meta-item">
<div class="language-dot"></div>
TypeScript
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" />
</svg>
1.2k stars
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z" />
</svg>
156 forks
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z" />
</svg>
42 watching
</div>
<div class="meta-item">
Updated 2 days ago
</div>
</div>
</div>CSS Styles
body {
margin: 0;
padding: 0;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.repo-card {
width: 450px;
background: white;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 16px;
font-size: 14px;
}
.repo-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.repo-name-container {
display: flex;
align-items: center;
}
.repo-icon {
color: #57606a;
margin-right: 8px;
}
.repo-name {
display: flex;
align-items: center;
}
.repo-link {
color: #0969da;
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.repo-visibility {
margin-left: 8px;
padding: 0 7px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
border: 1px solid #d0d7de;
border-radius: 2em;
color: #57606a;
}
.star-button {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 12px;
font-size: 12px;
font-weight: 500;
line-height: 20px;
color: #24292f;
background-color: #f6f8fa;
border: 1px solid #1b1f2426;
border-radius: 6px;
cursor: pointer;
}
.star-button:hover {
background-color: #f3f4f6;
border-color: #1b1f2426;
}
.repo-description {
color: #57606a;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
}
.repo-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
color: #57606a;
font-size: 12px;
}
.meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.language-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #3178c6;
}
.meta-item svg {
color: #57606a;
}API Request
POST https://app.html2img.com/api/html{
"html": "<div class=\"repo-card\"><div class=\"repo-header\"><div class=\"repo-name-container\"><svg class=\"repo-icon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\" /></svg><div class=\"repo-name\"><a href=\"https://github.com/codeium/html-to-image\" class=\"repo-link\">codeium/html-to-image</a><span class=\"repo-visibility\">Public</span></div></div><button class=\"star-button\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z\" /></svg>Star</button></div><div class=\"repo-description\">Convert HTML elements to images using pure JavaScript with no dependencies. Perfect for creating social media cards, screenshots, and more.</div><div class=\"repo-meta\"><div class=\"meta-item\"><div class=\"language-dot\"></div>TypeScript</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z\" /></svg>1.2k stars</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z\" /></svg>156 forks</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z\" /></svg>42 watching</div><div class=\"meta-item\">Updated 2 days ago</div></div></div>",
"width": 484,
"height": 200,
"css": "body{margin:0;padding:0;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.repo-card{width:450px;background:white;border:1px solid #e1e4e8;border-radius:6px;padding:16px;font-size:14px}.repo-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.repo-name-container{display:flex;align-items:center}.repo-icon{color:#57606a;margin-right:8px}.repo-name{display:flex;align-items:center}.repo-link{color:#0969da;text-decoration:none;font-weight:600;font-size:16px}.repo-visibility{margin-left:8px;padding:0 7px;font-size:12px;font-weight:500;line-height:18px;border:1px solid #d0d7de;border-radius:2em;color:#57606a}.star-button{display:flex;align-items:center;gap:4px;padding:3px 12px;font-size:12px;font-weight:500;line-height:20px;color:#24292f;background-color:#f6f8fa;border:1px solid #1b1f2426;border-radius:6px;cursor:pointer}.star-button:hover{background-color:#f3f4f6;border-color:#1b1f2426}.repo-description{color:#57606a;margin-bottom:16px;font-size:14px;line-height:1.5}.repo-meta{display:flex;flex-wrap:wrap;gap:16px;color:#57606a;font-size:12px}.meta-item{display:flex;align-items:center;gap:4px}.language-dot{width:12px;height:12px;border-radius:50%;background-color:#3178c6}.meta-item svg{color:#57606a}"
}
Update the repository details, stats, and description to match your GitHub repository.
How it Works
- Accurate recreation of GitHub’s repository card design
- SVG icons for repository actions and metadata
- Interactive star button with hover state
- Responsive layout that maintains GitHub’s visual style
Remember to update the repository URL and statistics to match your actual GitHub repository data.