Card & List Display Options
This guide applies to the following building blocks:
Each of these blocks supports multiple ways to visually present your content. This page outlines the available layout types and card styling options shared across these list blocks.
Type
Choose how your content should be displayed:
- Cards – Grid-style cards with flexible layout and styling options. Ideal for visual overviews and galleries.
- List – A more compact, vertically stacked layout. Great for text-heavy content or quick scanning.
- Single – Displays only one item. Best for highlighting a featured article, dog, or breeding.
Card Layouts (Only applies when Type = Cards)
Choose the card layout that suits your content and aesthetic:
Default
A flexible card layout that works well when your images have different aspect ratios, especially portrait-style photos. This layout displays the full image without cropping, ensuring the entire subject is visible — useful when image sizes and shapes vary.
At larger screen sizes, cards are shown in three columns, and the layout automatically adjusts the card height to match across each row. This helps the grid look more balanced, even when the images themselves aren’t uniform.
Use this layout when you don’t want to crop your images and expect a mix of portrait and landscape shots. It's especially effective for showcasing full-frame photos while keeping the layout neat.
Example of the Default card layout showing a mix of portrait and landscape images. Cards display the full image and adjust height across each row for visual balance.
Small
A compact card layout using a 480 × 720 px image size (2:3 aspect ratio). These cards are designed to display more items in a tighter space.
On large screens, four cards are shown per row. As the screen size decreases, the layout shifts responsively to three, two, and finally one card per row.
This layout is best suited for pages with lots of entries, where space efficiency and scannability are important.
Use the Small layout when you want to display more entries at once — like a long list of individuals, articles, or archived litters.
Small cards showing individuals with the border style option selected. Four cards are displayed across on a large screen.
Large
A full-size card layout that emphasizes both the image and content. The image aspect ratio varies slightly depending on screen size, but cards remain tall and visually prominent.
Cards are displayed three across on large screens, then adjust to two and eventually one as screen size decreases. This layout works best when you have three or six items, allowing for a clean, balanced grid without leftovers.
Use the Large layout when you want more breathing room around your content and only need to display a few entries at a time.
Large cards with the solid background style and small gap setting applied. Three cards are shown across on a large screen.
Side by Side
A layout where each card is split into two halves — image on the left, text on the right. This stacked horizontal design works best on large screens and automatically reverts to a standard vertical card (image on top, text below) on smaller devices.
Because of its size and emphasis, this layout is best used with a small number of items. It can create a more editorial or feature-style look.
Use the Side by Side layout when you want to pair strong imagery with meaningful text — particularly effective with landscape-oriented photos or well-composed portraits.
Example of two Side by Side cards with solid background style applied.
Featured
A bold layout designed to highlight content in a larger, more prominent format. Cards are displayed in rows of two or three on large screens, with the text centred underneath each image. The images expand to fill the available width, making this layout ideal for visual impact.
This layout works best with two or three items. For a single item, use the Single display type instead.
Use the Feature layout when you want to showcase a small number of standout items — such as recent articles, available litters, or featured individuals — in a visually impactful way.
Feature layout with two cards in a row. This layout does not support custom background or border styles — it inherits the existing page background for a clean, minimal look.
Card Style
Controls the visual container of each card:
- Solid Background – Cards have a block-colour background with padding. Good for contrast and text readability.
- Border – Cards have a subtle border with a transparent background. Clean and minimal.
- None – Cards blend into the background with no border or fill. Best used when you want a very minimal look or rely heavily on imagery.
Large card example showing top card with border, middle card with solid background, and bottom card with no background.
Card Gap
Controls spacing between cards in the grid:
- Small – Tighter spacing for compact layouts.
- Medium – Balanced spacing for general use.
- Large – Extra breathing room between cards. Works well with large images or text-heavy layouts.
You can combine gap size with any card layout or style to suit the tone and rhythm of the page.
Comparison of card gaps — top row uses small spacing, middle row uses medium, and bottom row uses large for more breathing room.
List Layout (Only applies when Type = List)
A vertically stacked layout where each item is shown in a simple list format, combining an image and text.
On medium and larger screens, the image takes up one-third of the width and the text takes up two-thirds, creating a balanced horizontal layout. On smaller screens, the image and text stack vertically for better mobile readability.
This layout is useful when you want to display full images (regardless of aspect ratio) alongside consistently formatted text — ideal for individual listings or articles.
You can choose the image position relative to the text:
- Left – Image appears to the left of the text.
- Right – Image appears to the right of the text.
- Alternating – Images alternate left and right as you scroll.
Use the List layout when you want clean alignment, full image display, and a good balance between visuals and text — especially useful with varied image shapes.
List layout with image on the left and text on the right. Image takes up one-third of the width on larger screens and stacks vertically on smaller devices.
Single Layout (Only applies when Type = Single)
The Single layout is designed to showcase just one item in a clean, centered format. It displays the full image, followed by centered text and a call-to-action button labeled Read More.
There are no additional configuration options — this layout is intentionally simple and works well when you want to highlight a featured article, dog, or breeding.
Use the Single layout when you want to focus on one item without distraction — ideal for homepage highlights or callout sections.
Single layout displaying one item with a full image, centred text, and a Read More button underneath.