# About Toolkit Layouts

The **Toolkit** has several built-in layouts, called "modes" that you can use to display your pets.

# Selecting a layout


The JavaScript Toolkit has built-in modes (layouts) you can use. Select the layout that works best for your website. If you need help making a particular layout work for your website, [please contact us](https://rescuegroups.org/support/).

| **Mode** | **Description** |
|------|-------------|
| **Grid 1 (National)** | This layout is designed to present well on National Search websites. The Grid 1 (National) Toolkit layout it will by default load the website visitor's zip code as opposed to the zip code you specify in the Toolkit. <br>Each pet’s first thumbnail picture, name, and the breed is displayed in a grid format (for example, three pets on each row and four rows per page). See below for an example, or see this toolkit layout live on RescueGroups.org: <https://www.rescuegroups.org/adoptable-pet-search-grid-1/><br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/ba1ddcb6-6728-436a-9d05-b2003039e25a/search-grid1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=f6386badb6d6d7c01b507e16f3430dd771410405187d00047d6e0f1a54ca1e42&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =639x455")<br> |
| **Grid 2** | This layout includes each pet’s first thumbnail picture, name, and the breed displayed in a grid format (for example, three pets on each row and four rows per page). In addition:<br>* **Included Fields** is used. <br> * **Show the search form** is used <br> * **Known Issue**: YES/NO results when selecting good with kids, spay/neuter and fields that return a yes, no value.<br>See below for an example, or see this toolkit layout live on RescueGroups.org:  <https://www.rescuegroups.org/adoptable-pet-search-grid-2/>.<br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/2d5f22d9-af95-4e9c-949c-85e529ec4b9c/search-grid-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=5b75bca5eae7eb40da3093624ae093b88d15ff683aaa94a16e0ba82e01a507db&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =636x724") |
| **Grid 3** | This layout includes each pet’s first thumbnail picture, name, and breed in a grid format (for example, three pets on each row and four rows per page).<br>See below for an example, or see this toolkit layout live on RescueGroups.org:  <https://www.rescuegroups.org/adoptable-pet-search-grid-3/>.<br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/e87cf2a5-8206-4844-9a4d-2830d9d0c838/search-grid-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=27d0b21fb450c8c2eb2f8cd6e745d8e2fd86aea5c361bac6649091298ad794bc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =527.5x322.5")<br> |
| **List 2** | This horizontal list of pets typically includes basic pet information and one picture (name, breed, age/size, picture). See below for an example, or see this toolkit layout live on [RescueGroups.org](http://rescuegroups.org/): <https://www.rescuegroups.org/adoptable-pet-search-list-2/>.<br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/2a057279-e4e2-4ad6-87d7-85f614699037/pet-list2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=3a7ab86ea4301597a87aa7ab56a7b0f40437c8f58e41948d13343cfe595ea0d6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =672x538") |
| **List 3** | This layout features one picture with the basic information (name and breed) and the animal's description, in a list beside the photo. See below for an example, or see this toolkit layout live on [RescueGroups.org](http://rescuegroups.org/): <https://www.rescuegroups.org/adoptable-pet-search-list-3/>.<br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/829358cc-5788-49bc-b24b-ec0080684a83/pet-list-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=66c3cb514a530b4b6aedbc425fa3f2bb964a683e9522ecc4d84d77921d7240ec&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =687x816") |
| **Random 1** | A single pet, chosen at random, with name and breed. Suitable for a website's sidebar.<br>See below for an example, or see this toolkit layout live on RescueGroups.org: <https://www.rescuegroups.org/adoptable-pet-search-random-1/><br> ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/4d85c076-1837-410e-b187-a1341a1051f4/pet%20search%201.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=eb9665ac27212914980d52eb403360c0c9181be93850284e6c78f4783fa6264e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =198x153.5") |