A layout is a reusable card design: background, frames, text blocks, art window, icon strips. Your card data flows into it.
Open it with the Cards Layout Template tab at the top of the Cards page.
The layout editor works best on a desktop-sized screen. On mobile you can browse layouts and inspect the result, but editing the canvas is desktop-only. If you are designing from a phone or tablet, do the data pass now and return to the editor on desktop.
The editor at a glance
Left rail: four panels
| Panel | Contents |
|---|---|
| Templates | Your layouts, plus a library of ready-made designs |
| Elements | Things to add: Text, Image, Rectangle, Ellipse, Line, Icon box, plus Game art and Emoji |
| Uploads | Your own uploaded assets |
| Layers | The stacking order of everything on the current layout |
Canvas: centre
The card at working size. Zoom controls sit bottom-right (minus / % / + / fit).
Header: right side
- LAYOUT dropdown: which layout you're editing, and the priority list of all of them.
- Counter badge (
4/5): how many of the layout's properties are connected. It turns amber when some aren't, and a missing required property is the case to act on. See Connecting Properties. - Undo / Redo.
- Condition chip (
type equals living): the rule that decides which cards use this layout. See Conditions. - Preview mode: swap placeholders for real card data.
Switching and creating layouts
Click the LAYOUT dropdown:
Layouts are grouped into FRONT and BACK, and numbered by priority. Each row shows its condition (if Type equals "living") and whether it's the starred Default.
From here you can also:
- Browse all (grid): a visual picker instead of a list.
- New layout: start a fresh design.
- Import from PSD…: bring in a Photoshop file as a layout.
The Templates panel
- Your layouts (N): everything in this project, with
Default front/Default backbadges. - Built-in templates, grouped by category: ShuffleKit's ready-made starting points.
- New: blank layout.
- Browse all: the full library.
Starting from a template and stripping it back is usually faster than starting from an empty canvas.
When you apply a template, ShuffleKit can try to bind its elements to your existing properties. Use that option when the property names and element roles already line up; leave elements unbound when you want to choose the connections yourself. Either way, review the connection counter afterward because a template may not find a property for every slot.
Adding and editing elements
- Open Elements in the left rail.
- Click Text, Image, Rectangle, Ellipse, Line or Icon box. It drops onto the canvas.
- Drag to position; drag the handles to resize.
Selecting an element swaps the top toolbar for its property controls:
For a text element that's: the binding pill (title, see below), font family, size, colour, bold / italic / underline / strikethrough, case, alignment, spacing, plus Align, Effects and Position groups (an Animate group is there too, marked coming soon). At the far right: duplicate and delete.
The binding pill
The most important control on that toolbar is the leftmost pill. It shows which card property the element pulls its value from, title in the screenshot.
- A solid pill means the element is bound to a property.
- A dashed pill means it isn't: it will show its static fallback text on every card.
Click it to open the CONNECT DATA popover. Full detail in Connecting Properties to a Layout.
Layers
The Layers panel lists every element top-to-bottom in stacking order. Drag the grip handles to restack.
Elements bound to a property show in blue with a chain icon (powers, Body, Title, Artwork in the screenshot); unbound ones are plain (Subtitle, Divider, Panel, Background). It's the quickest way to audit a layout for missing bindings.
Preview mode
Placeholder text is useless for judging whether real card names actually fit. Click Preview mode:
The canvas fills with a real card, and a navigator appears at the bottom: ‹ CARD 1 OF 16 ›, Hide unused, Exit.
Step through every card before you commit to a font size. Long names, empty ability fields and five-icon power strips are exactly the cases that break a design, and they only show up here.
Click Exit to return to editing.
Card backs
Backs are layouts too; they just live in the BACK group of the layout list. Create them the same way, and give them conditions if different card types need different backs.
Canvas size
The Canvas size control above the canvas (shown while nothing is selected) sets the card dimensions. Set it once, before you build. Elements keep their absolute positions when the canvas changes, so a finished layout can become scattered and need manual repositioning. If you are printing, choose the intended stock before you start; see Print & Ship.
For a complete first-layout sequence, including the recommended order for sizing, binding and previewing, see Layout Editor: A Full Tour.
