Competition Cards

Design the card your competitions appear on: choose a layout, show, hide and move every part of it, change its colours, font and shape, and make it react as a competition sells out or nears its draw. Every site starts on the default card (the card your site has always had), and this page opens on it, ready to change. Nothing changes on your site until you save, and Reset to default puts it back whenever you like.

Where to find it: Site → Competition Cards (/admin/appearance/cards). The link only appears if your account can manage settings.

The designer is in beta, and a banner at the top of the page says so. The page itself may change a lot as we work out the simplest way to design a card, so a button or panel may have moved since you last used it, or since this guide was written. Tell us what's confusing, missing or great at [email protected].

The page is your card and one settings panel. On a computer the panel is on the left and the card on the right. On a narrow screen the card comes first, with the panel below it. Looks, Surprise me and Reset to default sit at the top right, and the save bar runs along the bottom.

Change your card

1. Go to Site → Competition Cards. The card your site shows now is drawn using one of your own competitions, on a phone and a computer side by side, and the panel shows the whole card.
2. Make your changes. The quickest way in is the card itself: click any part of it to open its settings, or drag it somewhere else. The panel's whole-card page has everything else: layout and spacing, what's on the card, colours, font and shape, hover and motion and how it reacts as a competition ends. Or swap the whole card for a ready-made look first.
3. Check it: click Sold out and Ended next to Preview as above the card, and check the phone as well as the computer. Most visitors see the phone.
4. Click Save in the bar at the bottom.

You'll see Saved. Your cards are updated. There's one design per site, so rows of cards always line up. Your design is used wherever your site shows a grid of competition cards:

• every Competitions Grid block, on your homepage and on any other page;
• More Competitions You Might Like on each competition page;
• the suggestions customers see after paying (headed Keep Playing unless you've reworded it).

It isn't used by the Featured Competitions hero, which draws its own tiles, or by the Competition Cards block in marketing emails.

Start from a ready-made look

1. Click Looks at the top of the page. The Start from a look window shows six looks, each drawn as a real card using one of your competitions:

   Look	What it looks like
   Default	The card every site starts with, matched to yours.
   Ticket Stub	A torn-off raffle ticket with a dashed edge.
   Neon Arcade	Dark, sharp and glowing green.
   Luxury	Black and gold with a serif title.
   Minimal	Just the essentials, no frame.
   Trading Card	A foil card that tilts on hover.

2. Click a look, or its Use … button (for example Use Luxury). If you have unsaved changes, you're asked to confirm first, because they'll be lost.

3. The window closes and the look replaces the card you're editing, as unsaved changes: you'll see, for example, Luxury is on the card. Save to keep it. Tweak it, then save.

Every look begins from your own card, so the badges you'd switched off under Settings → Appearance stay off. The exception is Minimal, which keeps only the Sold Out and Sale badges.

Default is the same card Reset to default puts back. See Go back to the default card.

Choose a layout and spacing

At the top of the panel's whole-card page, under Layout:

• Stacked — image on top, details below. This is the shape of the default card.
• Side by side — image beside the details. It needs a wide card, so narrower cards (four across on a computer, two across on a phone) stack themselves automatically. Click Computer above the card to see it four and three across.
• Overlay — the image fills the card and everything sits on it.

Switching layout moves any parts the new layout has no room for, and a message says how many moved (for example 3 parts moved to fit the overlay layout.).

Spacing — Compact, Regular or Roomy — sets how tightly the card is packed. How wide a card is comes from the grid's columns, not from the design. Phone cards, two across, are narrow, so there Roomy packs like Regular, and a Large or Extra large title or price comes down one size.

Image sets where the photo sits: On top or Below the details on Stacked, Left or Right of them on Side by side. A Side by side card that stacks on a narrow screen keeps its photo on top. Overlay has no choice: the photo is the whole card.

Show, hide and move parts of the card

The card is made of parts: the image, title, price, countdown, tickets sold, buttons, status, each badge, and extras such as Tickets left, Prize value and Draw date. Nothing is compulsory, so you can hide any of them.

Open a part

• On the card — click the part. Moving the pointer over the card outlines what a click would pick (dashed), and the part you're editing has a solid outline. Click the photo itself for the Image settings.
• In the panel — under On the card, every part that's showing is listed in the order it sits: On the image first, then Below the image (Beside the image on Side by side). With the image below, the details come first, under Above the image. Each row says where the part sits. Click a row to open it. Hovering a row outlines that part on the card.
• A badge — the twelve badges share one row, Badges, which says how many are on. Click it for the full list, then click a badge.

The part's settings fill the panel. On a narrow screen the page scrolls down to them. To go back to the whole card, click Your card (or Badges) at the top of the panel, or click anywhere beside the card.

Show or hide a part

• Click the eye on the part's row. Badges have their eyes in the Badges list.
• Or, in the part's settings, use the switch at the top. It reads On the card or Hidden.

Hidden parts (apart from badges) are listed under Add to the card, below the parts list. Click one to put it back where it was and open its settings. A hidden part keeps its settings, and one shown again goes back to its old spot.

Each badge only shows on competitions it applies to: Sold Out when every ticket has gone, Instant Wins on competitions with instant wins, and so on. The Badges list says where each badge sits or, if it's off, when it would show.

Move a part

Drag it on the card. Press on a part and drag it. Every area it can go in is outlined, the one under the pointer lights up with its name, and a line shows where the part will land among those already there. Let go to drop it, or press Esc to cancel. An area that isn't outlined can't take that part.

Or pick a spot. In the part's settings, under Where it sits, click a spot on the little picture of the card: the image's corners, top middle, centre or bottom strip, the image edge (Stacked only), or the top, middle or bottom of the details. Overlay has no details. Spots the part can't use are faded, and a number shows how many other parts are already in a spot. Picking a spot for a hidden part shows it there.

Then, in the same settings:

• Reorder parts that share a spot — parts in the same spot stack, so badges that come and go never overlap. In this spot, top to bottom lists them; use the up and down arrows. Dragging on the card does the same.
• Line it up — Line up sets Left, Centre, Right or Full width.

Some spots refuse some parts, because they'd physically not fit:

• Tickets sold as a bar, segments or words goes only in the image's bottom strip or the details. As a Ring, it can also sit in an image corner or the centre.
• Buttons go in the image's centre, bottom corners or bottom strip, or in the details.
• Title and Summary go anywhere except the image edge.
• A Ribbon sits only in a top corner of the image, a Stamp in the centre or a corner of the image, and a Tab only on the image edge (so only on Stacked). Picking one of those shapes moves the part there for you.

The Image doesn't move: it's the frame the other parts sit on. Its eye (first under On the image) hides the photo. On Stacked and Side by side, any parts placed on it then move into the details.

Put a part somewhere else on phones

A phone card is small, so a part that fits on the image at computer width can crowd it on a phone. You can give any part except the buttons a different spot on phones:

1. Find the part on the phone in the preview: the two cards side by side at a real phone width. (Click Phone above the card to see the phone on its own.)

2. Drag the part to another area on the phone. This moves it on phones only: computers keep it where it was. Only the area changes, so parts sharing an area keep the order they have on computers.

   Or open the part and click Phone next to Where it sits. The picture is headed Where it sits on phones, and the spot you click is its phone spot. A Side by side card is drawn stacked there, because narrow cards stack. Clicking a part on the phone opens it with Phone already picked; clicking it on the computer picks Computer.

3. To undo it, click Same on both in the part's settings (next to On phones: … or On computers: …), or drag it back to the spot it has on computers.

A part with its own phone spot says so on its row, for example Top right · on phones: bottom right.

Buttons sit in the same place on phones and computers. Moving them on the phone moves them everywhere.

Phone placement applies whenever a card is narrow — in practice, two cards across on a phone. That's how More Competitions You Might Like and the after-payment suggestions always look on phones, and how a Competitions Grid looks if its Mobile columns is set to 2. A grid set to one card across on phones gives each card the full width, so it uses the normal placement.

Change what a part says and how it looks

Open a part (click it on the card, or its row) and its own settings fill the panel, above Where it sits. Most are self-explanatory; these are the ones worth knowing about:

Part	Worth knowing
Image	Shape on Match site (Card Aspect Ratio) follows Card Aspect Ratio in Settings → Appearance. Show it all fits the whole photo in rather than cropping it.
Title	Lines before it is cut short — 1, 2 or 3. Long prize names are cut at that point.
Price	Wording — £0.99, 99p or £0.99 per entry. 99p only applies under £1; a £1.50 entry still shows as £1.50. Wording for free entry shows on free competitions.
Countdown	Style — 3d 4h, With seconds, Boxed digits, Flip clock or Draw date. Turn urgent in the last sets when it changes colour (0 never).
Tickets sold	Bar, Segments, Ring or Words only, with your choice of words either side. Turn "hot" when selling fast above a percentage you set.
Buttons	Main button wording (up to 24 characters), and whether to show the Quick buy button.
Status	What a card says when it can't be entered: Sold Out, Ended, Limit Reached or Awaiting draw. Choose a Style, reword each one, and tick Show the winner on ended cards to show "Won by Sarah T." and their ticket number instead of Ended. As a ribbon or stamp it shows just the name.
Badges	Your own Wording (leave it empty for the usual wording), Shape, Colour and icon. Several badges' usual colour is a gradient (Instant Wins goes from your accent colour to violet): the first swatch, Platform, shows it and puts it back. A colour you pick makes the badge one solid colour. The Sale badge always takes its wording from the discount, and Main Prize Boost from the boost's branding. A Tab shape needs the Stacked layout.
Max per person	Type {n} where the number goes, as in "Max {n} per person".

A part only shows when it has something to say: Opens in only on competitions that haven't opened yet, Prize value only when you've set one, the status only when a card can't be entered, and so on.

Opening a part that only shows in some states switches the card to one that shows it: Status and the Sold Out badge show the card sold out, Sale on sale, Early Bird on early bird pricing, Max Reached at its limit, Selling Fast almost sold out, and Opens in not open yet. If the part still isn't on the card, its settings say Not on the card right now and when it shows (an Instant Wins badge on a competition without instant wins, say). Pick a competition that has it from the list above the card.

Change the colours, font and shape

These are on the panel's whole-card page, under Colours and font and Shape.

Follow your site, or set your own

Most of these settings can follow Settings → Appearance, and keep following it: change your accent colour there later, and your cards change with it. The panel shows which ones do:

• On a row of options (Card style, Corners, Under the mouse), your site's own option has a dot. Picking it follows your site; picking any other sets your own.
• Under each colour swatch it says Your site (or Automatic for Text) while it follows your site, and Your own once you've set one.

Your own value starts from your site's current one, so the card doesn't jump. To follow your site again:

• A colour — open its swatch and click Use your site's card colour (…accent colour, …buttons, or Back to automatic for Text). Picking the same colour by hand still counts as your own, so it won't follow later changes.
• The font — click Use your site font (…), or pick your site font from the list.
• Card style, Corners, Under the mouse — pick the option with the dot. For Border, pick Fine line.
• Everything at once — click Match my site at the top of Colours and font. It puts every setting that can follow your site back on it: the colours and font, and also Card style, Corners, Border and Under the mouse. The button only shows while something is set to your own.

Setting	While it follows your site, it uses
Card (colour)	Card Color
Text	A colour picked automatically to read well on the card
Accent	Accent Color
Buttons	Button Color and Button Style
Font	Your site font
Card style	Card Style
Corners	Border Radius
Border	Fine line — the default card's own faint border
Under the mouse	Hover Effect

Frame and the buttons' Hover never follow your site: they're always your own choice, and Match my site leaves them as they are.

Change a colour

1. Under Colours and font, click a swatch: Card, Text, Accent or Buttons. Its editor opens below the swatches. Click the swatch again to close it.
2. Pick a colour, type a hex code, or click one of the small squares underneath: your site's button, accent, card and background colours, white and black.

What each one colours:

• Card — the card's background. Choose Solid, Gradient (two colours and a Direction), Texture (Grain, Dots, Grid, Stripes or Paper over a colour) or None, where the card sits straight on your page background and its text takes your page's text colour. A card colour of your own colours your cards only. Card Color also colours your header, footer and panels across the site, and those keep it.

• Text — the card's text. Automatic picks a colour that reads well on the card.

• Accent — progress bars, highlights and glows.

• Buttons — Button colour, Button style (Solid, Outline, Ghost or Gradient) and Hover, what both buttons do under the mouse:

  • Default — a light fade or tint, set by the button style. This is what cards did before you could choose.
  • None — the buttons don't change.
  • Shade — the button colour shifts a shade: dark buttons lighten, light ones darken.
  • Lift — the buttons rise a touch, with a shadow.
  • Grow — the buttons grow a little.
  • Glow — a soft glow in the button colour.
  • Fill — solid buttons hollow out to an outline; outline, ghost and grey buttons fill in with your button colour.

  Hover works whether the buttons follow your site or not, so you can keep your site's button colour and still change it. Phones don't hover, and visitors who've asked for reduced motion get Shade instead of Lift or Grow.

The price is in your button colour, as on the default card. If you've given the card its own background and the button colour would be hard to read on it (yellow on light blue, say), the price uses the text colour instead.

Change the font

Under Font, choose from the list. Picking your site font follows your site again.

Change the shape

Under Shape:

• Card style — Flat, Elevated, Bordered or Glass.
• Corners — Sharp, Soft, Rounded or Pill.
• Border — Fine line (the default card's), None, or Thin, Medium or Thick. Those three also let you choose the Line (Solid, Dashed or Double) and Border colour.
• Frame — decoration around the card: None, Ticket stub, Neon, Gold line or Foil.

Add hover and motion

Under Hover and motion on the whole-card page:

• Under the mouse — what the card does when the pointer is over it: None, Lift, Zoom, Glow or Tilt. Your site's Hover Effect has the dot.
• Sheen — Light (a soft light follows the pointer) or Foil (a rainbow band that shifts with the pointer). Foil looks best with the Foil frame, and the panel reminds you if you haven't picked it.
• Lean towards the pointer — the card tilts as the mouse moves over it.
• Drifting image — the prize photo moves slowly, like a camera pan.

Tilt (from either control), sheen and the drifting image only run on devices with a mouse, and are switched off for visitors who've asked their device for reduced motion. Phones get none of them.

The buttons have their own hover: click the Buttons swatch under Colours and font and choose under Hover (see above).

Make cards react as a competition ends or sells out

At the bottom of the whole-card page, When a competition… lists four moments: is ending soon, is almost sold out, sells out and has ended. A green dot means the card changes then, and the line under each says how (or Off).

1. Click a row. Its settings open in the panel, and the card switches to that state so you can watch it change.
2. Turn it on with the switch at the top of the panel. It reads On or Off.
3. Choose what changes:
   • Ending soon — Starts in the last however many hours you set. Choose a Glowing border, Pulse the countdown and Countdown turns red.
   • Almost sold out — From the % sold you set (50 to 99). Choose a Glowing border, Pulse the tickets sold bar and Show the bar as "hot".
   • Sold out and Ended — Black and white, Fade the card, and Stamp across the image with your own Stamp wording (up to 16 characters), Angle and Stamp colour.
4. Under Also in this state, open any part that changes then too — for example the Status wording on sold-out and ended cards, or the Selling Fast badge as tickets run out.

You can also start from the card. Click a state next to Preview as above it (say Sold out), and a line under the card says how the card reacts in that state, for example Sold out: black and white, "SOLD OUT" stamp. Click Change to open it. Ended, Awaiting draw and Won all use the has ended settings.

On the default card all four are off; some of the looks switch them on. If your Status or Sold Out badge is already drawn as a stamp, the card shows that stamp rather than adding a second one.

Check your card in every state and size

The Preview box above the card only changes what you're looking at. Nothing in it changes your card, your competitions or your site:

• Phone and computer, Phone or Computer picks the screens to show. You start on both: the phone first, two cards side by side at a real phone width with phone placements applied, and the computer beside it, one card as wide as in a grid four across. Computer on its own shows the card four across and three across, the two widths a Competitions Grid can use.
• The competition list picks which of your competitions to draw. Ones with photos are listed first. If your site has none yet, it uses a sample.
• Preview as forces the card into any state: Live, On sale, Early bird, Ending soon, Almost sold out, Sold out, Limit reached, Ended, Awaiting draw, Won or Not open yet. Your competition isn't changed; only the card on this page is. How the card looks in each state is set under When a competition… in the panel.

Under the card, Worth checking lists anything that's probably not what you meant, such as Sold-out and ended cards will show no status. or text that's hard to read on your background. These never stop you saving, because nothing on a card is required. A part with a warning also carries a Worth checking badge on its row, and the warning shows in its settings.

Worth checking also measures your card at all three widths (phone, four across and three across) and says when parts run into each other or don't fit on the image or the card, for example On phones, the countdown runs into the Instant Wins badge. It measures the competition you've picked, so pick one with several badges to see the busiest case. If more than three things collide, you get one line instead, and each part's settings say what it runs into.

Let Compy surprise you

Surprise me, at the top right of the page, gives you a random design built from colours, fonts, frames and layouts that work together. Compy thinks for a moment, then waves, and the new design appears on the card.

Before showing you a design, Compy tries it on the competition you're previewing (and the one beside it on the phone), on a phone and on a computer. It skips any where parts run into each other or off the card, or where the title, a badge or the draw date is cut short with "…", and keeps trying until one reads cleanly, or shows you the clearest of eight. Side by side designs nearly always come out Compact, and now and then the photo goes below or right of the details. That's why you'll rarely get Overlay, where everything sits on the photo: on a phone card there's often no room for your badges, the countdown and the title together. If you'd like an Overlay card anyway, pick Overlay under Layout, tick Layout under Keep these when shuffling, and shuffle the rest.

1. Click Surprise me. Click again for another.
2. To keep part of your design, click the arrow beside the button and tick what to keep under Keep these when shuffling: Layout, Colours, Font, Corners, Image, Parts, Badges, Motion or Reactions. Everything else is shuffled around them. Motion also keeps the card's and the buttons' hover.
3. Don't like it? Open the same menu and click Undo shuffle. It steps back one shuffle at a time, up to your last ten.
4. Save when you've found one you like.

Surprise me never saves on its own, and never changes wording you've typed (button text, badge and status wording). It doesn't use AI, so it's instant and works whether or not you've set Compy up. Your ticks under Keep these when shuffling last until you leave the page.

Save your changes

The bar along the bottom of the page shows where you are: Unsaved changes, or All changes saved (followed by this is the default card while it is). Save puts your changes live.

Undo my changes puts everything back to the last saved version. It only shows while you have unsaved changes.

If you try to leave the page with unsaved changes, you're asked first.

Save stays greyed out while there's nothing to save, or while the red Fix these before saving panel is showing (the bar then says Fix the issues above to save). That panel is rare, because the page is built so you can't normally make a design it would refuse. The part it's about carries a Needs attention badge on its row.

If another admin saves the card design while you have the page open, you'll see Someone else saved the card design when you save. Choose Load their version (your unsaved changes are discarded) or Overwrite their version (yours replace theirs). Closing the box does neither, so nothing is lost by accident.

Go back to the default card

1. Go to Site → Competition Cards.
2. Click Reset to default at the top right, and confirm. The default card appears, matched to your site. (The button is greyed out when your card already is the default.)
3. Click Save.

You'll see Saved. Your site is on the default card. Your design is replaced, not kept: until you save, Undo my changes brings it back.

What a design can't change

A few things work the same whatever your design says, so a design can never put a customer in a dead end:

• Quick buy never shows on a card that can't be bought — sold out, ended, locked behind an access code, app only, not open yet, or a customer who already holds the most tickets allowed. Your Quick buy button setting applies to every other card.
• Tapping a card always opens the competition. That includes tapping the title or the image. The buttons do their own job, and a winner's name links to the competition's results.
• Buttons and status never show together. The buttons give way to the status on sold-out, ended and limit-reached cards.
• Every card uses the same design, so rows of cards stay the same height. There are no per-competition designs.

How it fits with your Appearance settings

The card controls in Settings → Appearance stay where they are:

• The badge tick boxes and Winner on ended cards (under Appearance → Competition Cards) decide what the default card shows. Once you've changed your card here, it has its own show and hide for each part (the eyes in the panel), and the tick boxes aren't used. Reset to default brings them back into use, and the card it puts back follows them. A look copies your tick boxes at the moment you pick it.
• The colours, Border Radius, Button Style, Card Style, Hover Effect, Card Aspect Ratio and site font style the default card, and any setting here that follows your site.

Once you've changed your card, Appearance → Competition Cards shows a note saying the tick boxes aren't used. See Choose what shows on competition cards.

Keep your custom CSS working

If you've written custom CSS for your cards, the stable hooks carry across once you change your card: [data-comps="competition-card"], card-title, card-price, card-progress, card-badge with data-comps-badge="…" (the countdown is still timer, or ended), card-cta-winner, and button with data-comps-variant on the quick buy and main buttons all appear on the matching parts.

A changed card adds a few more:

• [data-comps="card-image"] — the image area.
• [data-comps="card-status"] — the Sold Out, Ended, Limit Reached or Awaiting draw status.
• [data-comps="card-buttons"] — the button row.
• [data-comps="card-block"] with data-comps-block="summary|category-tag|tickets-left|max-per-person|prize-value|draw-date|opens-in" — the extra parts.

CSS that reaches the card some other way — by class names, or by the order of elements — was written against the default card's layout and may not match once you change it. Check your site after your first save.

Troubleshooting

My changes aren't on my site. Look at the bottom bar on this page. If it says Unsaved changes, save first. Then reload your site.

The Settings → Appearance badge tick boxes don't change my cards. You've changed your card on this page, so it has its own show and hide for each badge. Click Badges under On the card and use the eyes there, or Reset to default to go back to the tick boxes.

Someone else saved while I was editing. Choose Load their version or Overwrite their version — see Save your changes. If the page says it Could not check for other changes just now, nothing was saved; try again.

I can't drag the image. The image is the frame the other parts sit on, so it doesn't move. Click it to change its shape or fit, or hide it with its eye.

An area doesn't light up when I drag a part over it. That part can't sit there (a tickets sold bar in an image corner, say). See the list under Move a part.

I opened a part but it isn't on the card. It only shows on some competitions or in some states, and its settings say when. Pick a competition that has it from the list above the card, or the state it shows in next to Preview as.

Side by side looks stacked. The card is too narrow to sit side by side. Four across on a computer and two across on a phone always stack. Click Computer above the card to see it three across, side by side.

Titles end in "…" on phones. A phone card is about half as wide as a computer one. Open Title and set Lines before it is cut short to 3, pick Medium or Small for Size, or untick All capitals, which takes more room.

Parts overlap on phones. A phone card is small, so its image has room for less. Worth checking names the parts that collide. Drag one of them to another area on the phone in the preview: that moves it on phones only (see Put a part somewhere else on phones). Or move it off the image altogether.

Sold-out cards don't say they're sold out. The Status part (or the Sold Out badge) is hidden, and Worth checking flags it. Click Status under Add to the card to show it, or turn on Stamp across the image under When a competition… → sells out.

Some cards have no quick buy button. They can't be bought right now — see What a design can't change.

Previewing as Won just shows Ended. Show the winner on ended cards is off in the Status part's settings, and your site shows the same.

Almost sold out doesn't change the card on this page. Previewing as Almost sold out shows the card about 94% sold, so a reaction set to start higher than that won't show here. It still works on your site.

I can't see tilt, sheen or the drifting image. Motion only runs with a mouse, and not at all for visitors who've switched on reduced motion. Check on a computer, and check your own device's reduced-motion setting.

The page says We could not load your card design. Click Try again. Nothing on your site has changed.

An amber notice says my card design couldn't be read. The notice says what the page did. If part of the design was left out, saving keeps what you see. If none of it could be read, the page has started again from the default card and your site shows the default card in the meantime, never a broken card — check the design, then save to replace the unreadable copy. If it says your design was saved by a newer version of the platform, saving is refused for now; try again shortly.