Stats cards are the images most profile READMEs are known for: your commits and stars, the languages you write, your contribution streak. This lesson adds them in Profile README Studio and explains where they come from, which is why they keep loading.
Know the stats blocks
The Stats group in Add blocks has these:
| Block | What it shows |
|---|---|
| GitHub stats card | Stars, commits, pull requests, issues and a level |
| Top languages | The languages across your repositories |
| Contribution streak | Your current and longest streak of days with contributions |
| Trophies | A shelf of trophies for stars, commits, followers and more |
| GitHub achievements | Your GitHub achievement badges |
| Activity graph | A line graph of your last 31 days of contributions |
| LeetCode profile | A badge that links to your LeetCode profile |
| Contribution snake | A snake eating your contribution graph |
| 3D contribution graph | Your contribution graph in 3D |
| Year overview | Your year in one picture: counts, calendar, languages and more |
| Stats from your repo | Stats, languages and streak drawn in your own repository |
Every card here is drawn by the studio. Those that need your GitHub data are redrawn every day by one workflow in your own repository; the lessons on broken cards and GitHub Actions cover it.
Add cards and set them up
Add GitHub stats card and Top languages. The preview draws them from example numbers; on your profile they show your own once the profile workflow has run. Click a card to see its settings under Block: what to show or hide, the layout (the languages card has a compact layout, for example) and the size.
Drag the blue handle on a card to resize it.
Put two cards side by side
Two cards next to each other take half the height and look tidier than a column of cards. Select the second card and set Placement to Next to the card above (the other choice is Own row), or drag it beside the first card in the preview. In the markdown they then share one marker, like <!-- studio:stats+langs -->.
The Columns and Container blocks in the Layout group give you more control, for example a text block beside a card.
Know who draws each card
On most profiles, a stats card is an image drawn on request by a free community server, which reads public data from the GitHub API. Those servers share one GitHub API quota between everyone who uses them, so they get slow or rate limited at busy times, and some have shut down for good.
The studio does not use them. It draws every card itself, in GitHub's style and your theme's colours, and your README points at files in your own profile repository. One workflow there, profile.yml, reads your numbers with the repository's own token and redraws the cards every day. GitHub serves the files, so they load as long as GitHub does.
Do not overdo it
Every card is an image your visitor waits for. A profile with ten cards loads slowly and says less than one with two good ones. A strong default:
- GitHub stats card and Top languages, side by side
- Contribution streak, if you commit often
Skip cards that show a low number you would rather not advertise. A profile is not a report card.
The next lesson makes all these cards look right for every visitor: themes and dark mode.