Tutorial 24 of 429 min read

Element Visibility

Show or hide a single element per item with visibility rules, stack them on groups for two-condition logic, and keep your layout count low.

Layout conditions choose which design an item gets. Visibility rules decide whether one piece of that design appears on a given item. Like layout conditions, they only offer properties from the active component type.

This is the feature that keeps your layout count low. If two designs differ by a badge, that's one layout with a conditional badge, not two layouts to maintain forever.

ShuffleKit's own description:

Show or hide this element per item based on a property value. With no rule it always shows.

Show on some cards only, expanded in the Connect data panel

With a rule set, the section carries an ON badge and shows the three fields plus Clear rule:

A configured visibility rule

Adding a rule

  1. Select the element on the canvas or in Layers.
  2. Click its pill in the toolbar floating over the canvas to open Connect data.
  3. Expand Show on some cards only at the bottom of the panel.
  4. Choose Show when or Hide when.
  5. Pick Property, Operator, Value.

The same editor opens from a layer's menu in the Layers panel: Visibility rule…, which shows a tick once the layer has one.

The rule saves as you set it, but only once it's complete, so a half-finished edit never overwrites a working rule. Clear rule removes it and the element goes back to always showing.

When a rule is active the section header carries an ON badge, so you can tell at a glance whether an element is conditional without reading the fields.

A column read only by a visibility rule counts as used: the Layers coverage note doesn't flag it, and its column header in the spreadsheet says Shows or hides an element, not on the card itself.

Show when vs Hide when

Two ways to say the same thing, and the choice is about readability rather than capability.

Reads as
Show when "This only appears for these cards."
Hide when "This appears for everything except these cards."

Pick whichever produces the shorter sentence. A legendary foil bar is Show when Legendary equals true. A watermark you want on everything but tokens is Hide when Type equals token. Writing either as its inverse works but reads backwards, and you'll misread it in six months.

The operators

The operator list is the same one layout conditions use, and it's driven by the property's type rather than by the fact that you're setting visibility. Here the operators are spelled out in full. Pick a Text property and you get five:

The operators for a text property

Operator Shows/hides when
equals The property is exactly this value
does not equal The property is anything else
contains The text holds this value anywhere, ignoring case
is empty No value has been entered
is not empty Any value has been entered

Pick a Select property instead and you also get is any of, with a checkbox list of that Select's options. That means "show for fire, water or air" is one rule, not three elements or a helper column. Pick a Number and you get greater than / less than and their inclusive variants. An Image or Icon list property offers only is empty / is not empty, which is the whole point of those two for visibility work. Color and Icon properties offer equals, does not equal, is empty and is not empty, and Yes / No offers equals and does not equal with a True/False value that starts on True, so picking a Yes/No property gives you a complete rule straight away. The value controls per type, and the full operator table, are in Conditions: The Deep Dive.

A new rule starts on Show when.

Two real limits do apply here:

One rule per element. There's no "add condition" for AND-ing two properties on a single element. When you need that, group the elements and put a second rule on the group (below).

Card properties only. Layout conditions can also read deck membership; visibility rules can't. If an element should only appear in one deck, that's a job for a layout condition.

is empty is the workhorse

Most layouts have a couple of optional fields: flavour text, a subtitle, and a secondary cost. Left unconditional, the empty ones leave a hole, or worse, a stray divider line floating in white space.

The fix is one rule:

Flavour divider   →   Hide when   Flavour   is empty

Now the divider only exists on cards that have flavour text. The same pattern covers:

  • A "Requires:" label that shouldn't print when there's no requirement.
  • A cost bubble on cards that actually have a cost.
  • Stat badges on a design shared by creatures and spells: hide each badge when its stat is empty, and one front serves both. Some templates ship with exactly these rules, and installing one creates the columns its rules read.
  • A scroll ornament that fills the gap when a card has no power icons: literally the rule used in the example project: Shown when powers is empty.

That last one is worth calling out as a technique: instead of hiding an element when a field is empty, show a decorative one. Empty space becomes intentional design.

Group visibility rules

Select a group and the toolbar offers a Visibility rule button of its own (a group's menu in Layers has Visibility rule… too). The explainer states the important part:

Show or hide every layer in this group per item based on a property value. Members' own rules still apply on top.

The group visibility rule

So the two levels stack, and they stack as AND:

  • Group hidden → every member hidden, regardless of their own rules.
  • Group shown → each member then evaluates its own rule.

That gives you two-condition logic without a per-element AND. A "legendary + creature" ornament set becomes a group with Show when Type equals creature, containing an element with Show when Rarity equals legendary.

The group toolbar also gives you a position readout, a single opacity control, Hide group, Lock group, Ungroup, Duplicate and Delete.

Spotting conditional elements

You don't have to open popovers to find the rules in a layout. ShuffleKit marks them in several places:

On the canvas. A conditional element shows a violet Conditional badge when selected or hovered. In Preview mode, when the card on screen fails the rule, that badge turns dark and reads Hidden here, and the element dims, so you can see exactly which cards drop it. Click Hide unused in the preview bar under the canvas (it then reads Printed view) to remove those elements entirely and see the card as it prints.

Conditional layers marked in the Layers panel

In the Layers panel. Conditional layers and groups get a small eye-with-cog icon. On a layer, hover it and the tooltip states the rule in plain English: "Shown when powers is empty", "Shown when title equals Dragon's Peak". On a group the tooltip only says Has a visibility rule; open Visibility rule… from the folder's ⋮ menu to read it. This is the fastest way to audit an inherited layout: scan the layer list for the icon, hover each one.

In the panel. The ON badge on the Show on some cards only header, and a tick beside Visibility rule… in the layer's ⋮ menu.

Manual hide is not a visibility rule

Each layer also has a plain Hide (eye) button. These are different things and it matters:

Effect
Hide (eye) Hides the element on every card: in the editor, in previews and in exports.
Visibility rule Evaluated per card against its data.

Use the eye to get a busy element out of your way while positioning something behind it, then show it again. A layer left hidden stays off every exported card, which is easy to forget because the layer still sits in the list. If an element should never print, delete it; if it should print on some cards, give it a rule.

Recipes

Optional flavour text Flavour text and its divider → Hide when Flavour is empty

Rarity treatment on one layout Foil bar → Show when Rarity equals mythic. Beats a separate mythic layout that duplicates everything else.

Filling an empty region Ornament → Show when powers is empty. Cards with icons show icons; cards without show decoration.

Set symbol only on expansion cards Symbol → Hide when Expansion is empty

One badge for several types Badge → Show when Element is any of fire, water, air (needs Element to be a Select)

Two-condition badge Group Show when Type equals creature, containing badge Show when Legendary equals true.

Proofing marker A loud "DRAFT" bar → Show when Artwork is empty. Turns unfinished cards into something you can't miss in a print sheet.

Pitfalls

Testing with preview off. Rules only evaluate against real data. With preview off every element shows its static state, so a rule looks like it isn't working. Turn on Preview mode and step through cards.

Typos in the value. Same trap as layout conditions: with equals, a free-text property makes Legendary and legendary different values. Prefer Select or Yes/No for anything a rule reads. Select values are picked from a list, so they can't be mistyped.

Rules on the wrong element. Divider hidden but its label still showing is the classic. Group the pieces that belong together and rule the group.

Reaching for a rule when you need a layout. If half your elements carry the same rule, you've built two designs inside one layout. Split it into two layouts with a condition. It'll be easier to reason about and faster to edit.

Visibility or condition?

A quick test:

Situation Use
One or two elements differ Visibility rules
The frame, colour scheme or overall structure differs A separate layout with a condition
Elements are in different positions per card type A separate layout
An optional field is sometimes blank Visibility rule, always
The difference is which deck the card is in A separate layout: only conditions can read decks

When in doubt, start with visibility rules. Splitting one layout into two later is easy; merging two divergent layouts back together is not.

Ready to build your card game?