00:00:04:12 - 00:00:28:36
Hi everyone and welcome to this SwiftFox Masterclass. Today we're looking at one of the more design focused additions to SwiftFox – custom card templates for news and events. Up until now, the way a news item or an event appeared inside a list or feed was largely shaped by a fixed group of card settings. Those settings do the job, but they didn't give much room to express your own design language or make news and events feel like a natural part of your own site.

00:00:28:40 - 00:00:53:00
Custom card templates change that. You can now design your own card from the ground up, decide exactly how each news item should look, and then apply that design across any news item, event list, or feed on your site. We're going to cover what custom card templates are really for where they live and how they're built in a way that produces clean, consistent results across your site.

00:00:53:04 - 00:01:08:48
At their core, custom card templates are way of taking control of how repeated content is displayed. A news list or an event feed doesn't show a single item. It shows many, and the value of a template is that it lets you define one visual pattern that gets applied to them all.

00:01:09:02 - 00:01:28:36
In practice, that means that you're designing a repeatable layout, not styling an individual card. You decide which fields appear, how they're arranged, how they should adapt across different contexts, and how they sit alongside the rest of the page. Once that pattern is set, every news item or event in the list or the feed is rendered through the same structure.

00:01:28:40 - 00:01:37:34
This is particularly useful when you want news and events to feel consistent with the rest of your site, rather than like a separate component that's been dropped in.

00:01:37:38 - 00:01:58:04
Custom cards live in a dedicated card template folder inside your website settings, and that's the only place that you can create them. Keeping templates in one location makes them easier to manage and reuse without confusing them with regular content. Inside the template, you'll find a standard block grid with a curated selection of compatible blocks.

00:01:58:06 - 00:02:22:40
One block is unique to the card templates – the card container. This block sets the boundaries for the card, the shape and sizing rules that the rest of the layout has to work within. The key decision here is width. Without a defined width, cards tend to size themselves around their content, and this is where the lists start to look a little bit uneven. A clear width gives you the consistent rhythm across a grid.

00:02:23:00 - 00:02:39:22
Height works in a similar way, but a good rule of thumb is to design cards so that their content naturally produces a consistent height. Fixed heights can work, but they can also create awkward empty space or unexpected truncation if the layout isn't designed for it.

00:02:39:24 - 00:02:48:14
A template isn't useful on its own. It needs to be connected to the data behind your news items or events. That's where placeholders come in.

00:02:48:18 - 00:03:05:10
When you're editing a card, you'll see a list of placeholders on the left. These represent the fields available on a news item or an event. Things like title, summary, date, image, and so on. You drop them into your layout wherever you want that field to appear.

00:03:05:14 - 00:03:31:20
If you've used the news imported templates before, this will feel familiar. You're describing the structure once, and SwiftFox fills in the real values for each item when it displays them in the list, or feed on a page. To keep the card consistent. When text lengths vary, use the new maximum line setting on header and rich text blocks. It lets text wrap around a set number of lines, then truncates the rest with an ellipsis.

00:03:31:28 - 00:03:50:28
Once your template is ready, applying it to a news or event list is a single step. Open the card settings on the list and you'll find a news template option. Adding a template here tells the list to use your custom card to render every item. When a template is applied, the other card settings on the list are ignored.

00:03:50:28 - 00:04:04:24
The template becomes the source of truth. It's also intentionally opt in if you don't apply a template to a list or feed. Everything continues to work exactly as it does today. Custom card templates only take effect where you choose them.

00:04:04:28 - 00:04:37:40
So to wrap things up, custom card templates are about giving you genuine control over how news and events appear across your site. Instead of relying on preset styles, you can define a repeatable card pattern and apply it wherever it's needed. If you're just getting started, keep it simple. Build one template for your main news list. Set a clear width and only add the content you actually need, and use a maximum line limit to keep your text from throwing off the layout. Once that's working well, create a feed specific template if you want a different pace and fill in carousels.

00:04:37:44 - 00:04:41:24
Thanks for joining us for this masterclass. We'll see you next time.