The GitHub Info Cards Block

Show off a GitHub info card with shortcuts to your repository.

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

Use Slash Command /git to Find the Block

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

Gif of Inserting and Adding the Repo

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.

  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.

Sidebar Block Theme Options

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

Grid Layout Settings

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

Controlling the Visibility Settings of the Parent Block

Configuring the Child Block - GitHub Info Card

The GitHub Info Card Child Block Toolbar

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.

Child Block Overrides of the GitHub Info Card

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.

Button Overrides in the Child Block

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

Last updated

Was this helpful?