This page shows how to create a character grid using a custom Swiffle Grid connector and the Rick and Morty API.

The connector retrieves characters with their name, species, status, and portrait image. Each card displays the character on the front, while the back contains additional information such as origin, location, and number of episodes.

Below is an excerpt from the connector that builds the character cards:

$front = "
    <div class='rm-card'>
        <img src='{$image}' alt='{$name}' />
        <h3>{$name}</h3>
        <span>{$species}</span>
    </div>
";

Resulting layout after adjusting card settings:

• Card width: 200
• Card height: auto
• Card radius: 8