# GitHub Info Cards

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FUEHDfZpS7onxAXvBA7d6%2Fdlx-github-cards-demo.jpg?alt=media&#x26;token=d5f09e48-f178-4431-bea1-f65f1a6be93e" alt=""><figcaption><p>Demo of GitHub Info Cards</p></figcaption></figure>

The GitHub integration for WP Plugin Info Cards allows you to share practically any public GitHub repo.

{% hint style="danger" %}
A GitHub Personal Access Token is Required.

To avoid rate limit issues, a GitHub personal access token is required. I've written an article on [how to retrieve a non-expiring GitHub personal access token](https://dlxplugins.com/how-tos/how-to-create-a-non-expiring-github-personal-access-token/).
{% endhint %}

A GitHub Info Card can be added via the [block editor](https://docs.dlxplugins.com/wp-plugin-info-card/blocks/the-github-info-cards-block) or [shortcode](https://docs.dlxplugins.com/wp-plugin-info-card/shortcodes/github-info-card).

{% content-ref url="github-info-cards/enabling-github-info-cards" %}
[enabling-github-info-cards](https://docs.dlxplugins.com/wp-plugin-info-card/overview/github-info-cards/enabling-github-info-cards)
{% endcontent-ref %}

### Layouts

The cards can be displayed in a Large or Card layout.

It features:

* A top bar with language, license, and quick links.
* An author bar with avatar, repo name, and author.
* A stats bar with quick links to stars, forks, watchers, and current release.
* A description.
* A last updated bar and call-to-action.

#### Large Layout

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FAbVe8xcQhP9dZkaW88gv%2Fdlx-github-card-vs-code.jpg?alt=media&#x26;token=9c8ff2f7-3e74-4c94-ae07-de30e7e8a671" alt=""><figcaption><p>Large Layout Showing the VS Code GitHub Repo</p></figcaption></figure>

The large layout is horizontally aligned and features a prominent call-to-action.

#### Card Layout

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2Fdh4NsUjsCMrZB5Ka1UeQ%2Fdlx-github-vs-code-card-layout.jpg?alt=media&#x26;token=d5353cea-406a-4741-9d68-6d73b4ac0fdd" alt=""><figcaption><p>Card Layout Showing the VS Code GitHub Repo</p></figcaption></figure>

The card layout is center-aligned and features a prominent stats bar and call-to-action.

### Themes

Here are the various themes for the GitHub Info Cards.

#### GitHub Light

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FBjeZt15QrReX1sOI6Zrn%2Fdlx-theme-light.jpg?alt=media&#x26;token=d28faec7-481e-43c8-a7d2-f5b8ad5db56b" alt=""><figcaption></figcaption></figure>

#### GitHub Dark

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FytXAQ25dKU2XKzxIfjEd%2Fdlx-theme-dark.jpg?alt=media&#x26;token=40a21947-4ce0-4076-9265-ccb5e1f38a23" alt=""><figcaption></figcaption></figure>

#### GitHub Colorful

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2F0lswQcHGZtrd2uSBJ4Qi%2Fdlx-theme-colorful.jpg?alt=media&#x26;token=e0dee257-7d4d-4489-a12b-327c2d66d240" alt=""><figcaption></figcaption></figure>

#### GitHub B\&W

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FrD7qm0SH58JqvL1e4cwX%2Fdlx-theme-bw.jpg?alt=media&#x26;token=fda685da-73f4-4ab3-a628-e4fd7d206231" alt=""><figcaption></figcaption></figure>

#### GitHub Custom

You can choose from several custom colors to make the GitHub card your own.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FvjfoD6pHJvRNYXcFo46d%2Fdlx-theme-custom.jpg?alt=media&#x26;token=314839ea-7362-4a64-ad41-2979ba20cbe9" alt=""><figcaption><p>GitHub Card With Custom Colors</p></figcaption></figure>

{% content-ref url="github-info-cards/enabling-github-info-cards" %}
[enabling-github-info-cards](https://docs.dlxplugins.com/wp-plugin-info-card/overview/github-info-cards/enabling-github-info-cards)
{% endcontent-ref %}

{% content-ref url="../shortcodes/github-info-card" %}
[github-info-card](https://docs.dlxplugins.com/wp-plugin-info-card/shortcodes/github-info-card)
{% endcontent-ref %}

{% content-ref url="../blocks/the-github-info-cards-block" %}
[the-github-info-cards-block](https://docs.dlxplugins.com/wp-plugin-info-card/blocks/the-github-info-cards-block)
{% endcontent-ref %}