# The GitHub Info Cards Block

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FEi6j4oQAY4DfPeHuIJz6%2Fdlx-theme-light.jpg?alt=media&#x26;token=6c6e34cf-26e3-4665-9a11-bdeb11624b3b" alt=""><figcaption></figcaption></figure>

The block allows you to insert any public repository and display it in a beautiful layout.

First is finding the block, which I recommend using a `/` command for.

### Inserting the Block

Using the slash command, find the GitHub Info Cards Grid block. Use slash command: `/git`

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2F9TRZMvaSEBtPMb1COcji%2Fdlx-block-insert-slash-command.jpg?alt=media&#x26;token=a56f0004-2177-457f-8aa5-1b2c09bc5909" alt=""><figcaption><p>Use Slash Command <code>/git</code> to Find the Block</p></figcaption></figure>

From there, you can enter the repo information, including username and repo.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2F75i4S9kGQAAm1nBRFuji%2Fdlx-2025M8muKOo8.gif?alt=media&#x26;token=2ff4d4c6-41a8-4b4a-ae95-0c7be6710a4e" alt=""><figcaption><p>Gif of Inserting and Adding the Repo</p></figcaption></figure>

### Configuring the the Parent Block

The blocks are split into two. You have a main grid block and a child GitHub Info Card block.

In the main block's toolbar, you'll find the following shortcuts.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FPIW4DLg3LFusLaXTWT0p%2Fdlx-github-main-block-toolbar.jpg?alt=media&#x26;token=4bfe53bf-67db-40e0-bc85-da2e29a489be" alt=""><figcaption></figcaption></figure>

1. Switch themes
2. Switch between Large and Card layouts
3. Add a New Card

You can also switch themes via the block's sidebar options.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FcapmMnARxyLsGWr4Grgy%2Fdlx-block-sidebar-theme-options.jpg?alt=media&#x26;token=8d9ffbb7-c656-461d-95a3-547a43ebe854" alt=""><figcaption><p>Sidebar Block Theme Options</p></figcaption></figure>

If multiple cards are in one grid, the grid layout settings will be displayed.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FiFDn2t0SzEV7xrroJMXR%2Fdlx-block-sidebar-grid-layout-options.jpg?alt=media&#x26;token=771e79c3-54ad-4498-9bea-378cd9fed784" alt=""><figcaption><p>Grid Layout Settings</p></figcaption></figure>

You can also control the visibility settings of certain sections by toggling them on or off. This applies to all cards within the grid.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FcZ2vBaE0POKi4oi56rKv%2Fdlx-block-sidebar-visibility.jpg?alt=media&#x26;token=6031c91a-5a6b-4bef-a4cb-120000f25fab" alt=""><figcaption><p>Controlling the Visibility Settings of the Parent Block</p></figcaption></figure>

### Configuring the Child Block - GitHub Info Card

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FjLxhvIIalHZFJCgCyzb0%2Fdlx-block-toolbar-child-block.jpg?alt=media&#x26;token=4816d3e7-d833-4382-9059-3963ea073a35" alt=""><figcaption><p>The GitHub Info Card Child Block Toolbar</p></figcaption></figure>

The child block's toolbar allows you to:

1. Edit the GitHub repo's username and repo name.
2. Refresh the repo in the block editor.
3. Change the theme of all child blocks.
4. Change the appearance of all child blocks.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FBUIOJg6NWl4uOHT9AcwY%2Fdlx-block-sidebar-child-overrides.jpg?alt=media&#x26;token=38e1617d-ab5f-4798-bcc5-cd81c72a77cf" alt=""><figcaption><p>Child Block Overrides of the GitHub Info Card</p></figcaption></figure>

For the child block, the block controls allow you to override various sections of the card, including:

* Repo name
* Repo author
* Homepage URL
* Sponsors URL
* Upload a custom avatar

Additional button controls allow you to customize the button, both in changing the button's text, and the button's URL.

<figure><img src="https://2501776759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpnYS3YtcHzoazndRXC9y%2Fuploads%2FoixNVvGqnQ0091qkf0VQ%2Fdlx-sidebar-button-overrides.jpg?alt=media&#x26;token=974cc6b3-6fbe-453e-881a-8476262fdf0b" alt=""><figcaption><p>Button Overrides in the Child Block</p></figcaption></figure>

Lastly, you would publish the changes and view the cards on your site.
