Care conditions

A grid of condition cards — one card per item, each answering the same short list of questions a customer asks before they buy. You name the questions.

• A nursery names them Sun, Water, Soil, Hardiness zone. A cheesemonger names them Temperature, Humidity, Shelf life. A menswear shop names them Wash, Dry, Iron, Bleach. The section supplies the layout; every word is yours.
• You name the conditions once, on the section — not on every card. Six items with the same four conditions means four words typed once, and every card lines up.
• You write the answers yourself, in your own words. There is no database and no app — a card is a name, an optional photo, up to four short lines, and a note.
• The cards reflow on their own — three across on a wide screen, one on a phone.

Try it

Pick a preset to see its style, edit the heading, and change the Item panel — the item's name, its condition values and its notes all drive the first card in the preview. Try the Seasonal tint too: it washes the section background in the colour of the season, in whichever preset you have selected. Use the screen-size and light/dark buttons in the preview header to check a phone and dark mode. The example below is the Talamh (garden) preset, where the card becomes a cross-section of earth.

←Care conditions

Color scheme

Heading

Condition 1

Icon

NoneCustom…AwardBookmarkBoxPackageShirtTagHashPercentCloudCloud fogCloud rainCloud snowCloud sunBatteryDrillPlugCalendarCalendar daysClockEyeHistoryHourglassSunriseSunsetTimerGlobeMap pinTriangle alertLockShieldShield checkArchiveMove horizontalScaleAsteriskBadge minusBadge plusBookmark minusBookmark plusChart splineCopy minusCopy plusCopy xDiffDivideEqualEqual approximatelyEqual notFunnel plusGit branch minusGit branch plusGit pull request createHeart minusHeart plusHouse plusInfinityLayers minusLayers plusPiSigmaSlashSmile plusTicket minusUser minusUser minus 2User plusUser plus 2User round minusUser round plusVariableXZoom inZoom outBoltCogHammerRulerRuler dimension lineSettingsWrenchUsersBugGaugeBanVolume 2ZapDropletDropletsFlameFlowerTreesWavesWindBirdBoneCatDogPaw printAppleBeefCarrotCoffeeCup sodaEggFishGlass waterMilkUtensilsCannabisCannabis offCloverLeafSproutCloudyHazeRainbowSnowflakeUmbrellaUmbrella offRecycleTrashPillStethoscopeSyringeThermometerThermometer snowflakeThermometer sunMoonSunSun dimSun mediumShower headMountainMountain snowBrushPaintbrushSpray canShellHomeHeartCircle checkStarBadge checkBiohazardFanFootprintsMaximizeRefresh cwRepeatScissorsShovelSparklesWeightWheat

Condition 2

Icon

NoneCustom…AwardBookmarkBoxPackageShirtTagHashPercentCloudCloud fogCloud rainCloud snowCloud sunBatteryDrillPlugCalendarCalendar daysClockEyeHistoryHourglassSunriseSunsetTimerGlobeMap pinTriangle alertLockShieldShield checkArchiveMove horizontalScaleAsteriskBadge minusBadge plusBookmark minusBookmark plusChart splineCopy minusCopy plusCopy xDiffDivideEqualEqual approximatelyEqual notFunnel plusGit branch minusGit branch plusGit pull request createHeart minusHeart plusHouse plusInfinityLayers minusLayers plusPiSigmaSlashSmile plusTicket minusUser minusUser minus 2User plusUser plus 2User round minusUser round plusVariableXZoom inZoom outBoltCogHammerRulerRuler dimension lineSettingsWrenchUsersBugGaugeBanVolume 2ZapDropletDropletsFlameFlowerTreesWavesWindBirdBoneCatDogPaw printAppleBeefCarrotCoffeeCup sodaEggFishGlass waterMilkUtensilsCannabisCannabis offCloverLeafSproutCloudyHazeRainbowSnowflakeUmbrellaUmbrella offRecycleTrashPillStethoscopeSyringeThermometerThermometer snowflakeThermometer sunMoonSunSun dimSun mediumShower headMountainMountain snowBrushPaintbrushSpray canShellHomeHeartCircle checkStarBadge checkBiohazardFanFootprintsMaximizeRefresh cwRepeatScissorsShovelSparklesWeightWheat

Condition 3

Icon

NoneCustom…AwardBookmarkBoxPackageShirtTagHashPercentCloudCloud fogCloud rainCloud snowCloud sunBatteryDrillPlugCalendarCalendar daysClockEyeHistoryHourglassSunriseSunsetTimerGlobeMap pinTriangle alertLockShieldShield checkArchiveMove horizontalScaleAsteriskBadge minusBadge plusBookmark minusBookmark plusChart splineCopy minusCopy plusCopy xDiffDivideEqualEqual approximatelyEqual notFunnel plusGit branch minusGit branch plusGit pull request createHeart minusHeart plusHouse plusInfinityLayers minusLayers plusPiSigmaSlashSmile plusTicket minusUser minusUser minus 2User plusUser plus 2User round minusUser round plusVariableXZoom inZoom outBoltCogHammerRulerRuler dimension lineSettingsWrenchUsersBugGaugeBanVolume 2ZapDropletDropletsFlameFlowerTreesWavesWindBirdBoneCatDogPaw printAppleBeefCarrotCoffeeCup sodaEggFishGlass waterMilkUtensilsCannabisCannabis offCloverLeafSproutCloudyHazeRainbowSnowflakeUmbrellaUmbrella offRecycleTrashPillStethoscopeSyringeThermometerThermometer snowflakeThermometer sunMoonSunSun dimSun mediumShower headMountainMountain snowBrushPaintbrushSpray canShellHomeHeartCircle checkStarBadge checkBiohazardFanFootprintsMaximizeRefresh cwRepeatScissorsShovelSparklesWeightWheat

Condition 4

Icon

NoneCustom…AwardBookmarkBoxPackageShirtTagHashPercentCloudCloud fogCloud rainCloud snowCloud sunBatteryDrillPlugCalendarCalendar daysClockEyeHistoryHourglassSunriseSunsetTimerGlobeMap pinTriangle alertLockShieldShield checkArchiveMove horizontalScaleAsteriskBadge minusBadge plusBookmark minusBookmark plusChart splineCopy minusCopy plusCopy xDiffDivideEqualEqual approximatelyEqual notFunnel plusGit branch minusGit branch plusGit pull request createHeart minusHeart plusHouse plusInfinityLayers minusLayers plusPiSigmaSlashSmile plusTicket minusUser minusUser minus 2User plusUser plus 2User round minusUser round plusVariableXZoom inZoom outBoltCogHammerRulerRuler dimension lineSettingsWrenchUsersBugGaugeBanVolume 2ZapDropletDropletsFlameFlowerTreesWavesWindBirdBoneCatDogPaw printAppleBeefCarrotCoffeeCup sodaEggFishGlass waterMilkUtensilsCannabisCannabis offCloverLeafSproutCloudyHazeRainbowSnowflakeUmbrellaUmbrella offRecycleTrashPillStethoscopeSyringeThermometerThermometer snowflakeThermometer sunMoonSunSun dimSun mediumShower headMountainMountain snowBrushPaintbrushSpray canShellHomeHeartCircle checkStarBadge checkBiohazardFanFootprintsMaximizeRefresh cwRepeatScissorsShovelSparklesWeightWheat

Seasonal tint

NoneSpring (green)Summer (gold)Autumn (amber)Winter (blue)

←Item

Browse the full icon library in the theme documentation. Click any icon to copy its name.

Icon

NoneCustom…AwardBadge centBadge dollar signBadge euroBadge indian rupeeBadge japanese yenBadge percentBadge pound sterlingBadge russian rubleBadge swiss francBadge turkish liraBaggage claimBarcodeBlocksBookmarkBookmark checkBookmark xBoxBriefcaseCircle percentCuboidDiamond percentFile archiveFile boxFolder archiveGemGiftLand plotLibraryLibrary bigMail question markMotorbikePackagePackage 2Package checkPackage minusPackage openPackage plusPackage searchPackage xQr codeReceiptReceipt centReceipt euroReceipt indian rupeeReceipt japanese yenReceipt pound sterlingReceipt russian rubleReceipt swiss francReceipt textReceipt turkish liraScanScan barcodeScan lineScan qr codeShelving unitShirtShopping bagShopping basketShopping cartSquare librarySquare percentStoreTagTicket checkTicket percentTruck electricVanWallet cardsAirplayBatteryBattery chargingBattery fullBattery lowBattery mediumBattery plusBattery warningBinaryBlendBlindsCableCard simCastCircle powerCloud backupCommandCpuDatabaseDatabase searchDatabase zapDiamond minusDrillEthernet portGpuHandHand fistHard driveHard drive downloadHard drive uploadHouse plugKeyboardKeyboard offLaptopLaptop 2Laptop minimalLaptop minimal checkMemory stickMicrochipMonitorMonitor checkMonitor cloudMonitor cogMonitor dotMonitor offMouseMouse offMouse pointerMouse pointer 2Mouse pointer banMouse pointer clickMouse pointer square dashedOptionPc casePill bottlePlugPlug 2Plug zapPlug zap 2PointerPointer offPowerPower circlePower offPower squarePresentationPrinterPrinter checkPrinter xProportionsRatRatioRectangle circleRouterScreen shareScreen share offSmartphone nfcSquare dashed mouse pointerSquare minusSquare mouse pointerSquare plusSquare powerTabletTablet smartphoneToolboxWatchBackpackBedBed doubleBed singleBriefcase conveyor beltHandbagHotelLuggageTicketTicket slashTicket xTicketsTower controlTram frontAmbulanceAnchorBikeBusBus frontCable carCarCar frontCar taxi frontContainerEv chargerForkliftFuelHelicopterKayakLife buoyPlanePlane landingPlane takeoffRoadRocketSailboatScooterShipShip wheelTickets planeTractorTrainTrain frontTrain front tunnelTrain trackTruckUsbCookieBook openBeerMartiniPizzaWineCameraMusicFlowerFlower 2BirdBirdhouseBoneCatDogPandaPaw printRabbitShrimpSnailSquirrelTurtleWormAmphoraAppleBananaBarrelBeanBean offBeefBeef offBlenderBroccoliCakeCake sliceCandyCandy caneCandy offCarrotChef hatCherryCitrusCoffeeCooking potCroissantCup sodaDessertDrumstickEggEgg friedEgg offFishFish offFish symbolFork knifeFork knife crossedGlass waterGrapeHamHamburgerHand platterHopHop offIce cream bowlIce cream coneLeafy greenLollipopMilkMilk offNutNut offPocket knifePopsicleSaladSandwichSliceSoupUtensilsUtensils crossedWine offCannabisCannabis offCloverLeafSproutUmbrellaHeart pulseMicroscopePillStethoscopeSyringeFlask conicalTest tubeArmchairBathLightbulbLightbulb offRocking chairShower headSofaToiletDumbbellMountainMountain snowSport shoeVolleyballChess bishopChess kingChess knightChess pawnChess queenChess rookCrosshairCrownDice 1Dice 2Dice 3Dice 4Dice 5Dice 6DicesGamepadGamepad 2GoalJoystickMedalPuzzleSpline pointerSwordSwordsTargetTrophyZodiac leoPaintbrushShellHouseLampWarehouseBabyFeatherGlassesHard hatPalmtreePopcornTentWheat

Pick an icon from the Lucide library. Browse by category.

item_image — unsupported in docs panel (image_picker)

Item name

Condition 1

Condition 2

Condition 3

Condition 4

Care notes

Sow under glass from March. Pinch out side shoots weekly and feed once the first truss sets.

Storefront preview

How to grow our heritage seed

Read more

• Tomato 'Sungold'

  • SunFull sun
  • WaterRegular, deep
  • SoilWell-drained, rich
  • Hardiness zone5

  Sow under glass from March. Pinch out side shoots weekly and feed once the first truss sets.

• Lavender 'Hidcote'

  • SunFull sun
  • WaterLow, drought-tolerant
  • SoilFree-draining, alkaline
  • Hardiness zone5

  Cut back by a third after flowering — never into old wood. Grit the planting hole on heavy clay.

• Hosta 'Halcyon'

  • SunPartial to full shade
  • WaterEven moisture
  • SoilRich, moisture-retentive
  • Hardiness zone5

  Mulch in spring and keep the crown clear. A copper ring is the kindest slug defence.

How it works

Add the Care conditions section to any page — a dedicated care guide, a collection page, a product page — then name your conditions in the section settings and add one Item block per thing you are describing. The section lays them out as cards and does the rest.

There is nothing to connect and nothing to sync. If you have no Item blocks yet, the theme editor shows a quiet "Add your first item" prompt — only you see it, a shopper never does. On the live page the card grid is not drawn at all: your heading still shows if you set one, so clear the heading too if you want the section to disappear entirely while you build it.

Composition

   Section heading
   Read more →

╔═══ soil-strata band (Talamh) ═╗  ╔═══════════════════════════════╗
│ ┌───────────────────────────┐ │  │ ┌───────────────────────────┐ │
│ │        (photo)            │ │  │ │        (photo)            │ │
│ └───────────────────────────┘ │  │ └───────────────────────────┘ │
│ ✿ Tomato 'Sungold'            │  │ ✿ Lavender 'Hidcote'          │
│ ───────────────────────────── │  │ ───────────────────────────── │
│ ☀ Sun             Full sun    │  │ ☀ Sun             Full sun    │
│ ───────────────────────────── │  │ ───────────────────────────── │
│ ◌ Water           Regular     │  │ ◌ Water           Low         │
│ ───────────────────────────── │  │ ───────────────────────────── │
│ ⌂ Soil            Well-drained│  │ ⌂ Soil            Free-drainng│
│                               │  │                               │
│ Sow under glass from March.   │  │ Cut back by a third after     │
│ Pinch out side shoots weekly. │  │ flowering — never old wood.   │
└───────────────────────────────┘  └───────────────────────────────┘

Each row is a label and a value — the label is whatever you named that condition on the section, and it is identical on every card, which is what makes the grid scannable. The icon at the start of a row is the one you picked for that condition, in the field right under its name. There are no fixed icons: an earlier version of this section welded a sun to row one and a sprout to row three, and the moment you rename row three to "Shelf life" the sprout is a picture that lies. Yours cannot, because you chose it for the word you wrote. Cards fill the row and wrap: roughly three across on a desktop, two on a tablet, one on a phone, with no columns setting to get wrong. A row only ever holds cards that fit; nothing is ever squeezed to a sliver. The hairline rules between the rows and the band across the top are the Talamh decoration; on the other presets the same rows sit on a plain card.

Section settings

The table mirrors the editor panel in order, including the four Icon dropdowns — each one sits directly under the condition name it marks, which is how you tell them apart.

Setting	What it does
Color scheme	Colours the whole section — background, text, cards, and links — from one scheme, so contrast stays legible in light and dark mode.
Heading	The section title (e.g. "How to grow our heritage seed", "Care & planting"). Leave it blank to hide it.
Condition 1	You name this one. It is the first thing you list for every item — Sun for a nursery, Temperature for a cheesemonger, Wash for a menswear shop. Leave it blank and its row never appears, on any card.
Icon	Optional mark at the start of the Condition 1 row, on every card. You pick it, so it always fits the word you chose. Default (none) — leave it and the row is text only.
Custom icon name	Shown only when Condition 1's icon is Custom…. Type any name from the icon library — the help text links it.
Condition 2	The second, named the same way — Water, Humidity, Dry.
Icon	The mark for Condition 2.
Custom icon name	The typed fallback for Condition 2.
Condition 3	The third — Soil, Shelf life, Iron.
Icon	The mark for Condition 3.
Custom icon name	The typed fallback for Condition 3.
Condition 4	The fourth — Hardiness zone, Storage, Bleach.
Icon	The mark for Condition 4.
Custom icon name	The typed fallback for Condition 4.
Seasonal tint	Washes the section background in the colour of a season — None, Spring (green), Summer (gold), Autumn (amber), or Winter (blue). A gentle gradient that starts at your colour scheme's own background at the top of the section and deepens toward the seasonal colour at the bottom — nothing more: it never changes prices, stock, or what the cards say. It works in every preset.
Related article	Optional. Pick a blog post to link under the heading — it renders as a "Read more" link. Clear the selection to hide the link.

The row marks and the item mark draw on two different lists, because they name two different kinds of thing.

A row names an axis — a quantity or a condition — so its list is the vocabulary of measurement: light, water, temperature, time, weight, dimension, power, tools, textile care, food, storage, safety. About 155 marks.

An item names a thing, so its list is category vocabulary: a bike, a wheel of cheese, a bolt, a coffee cup. About 350.

They used to share one list, which is why the row pickers offered a bicycle to mark "Humidity" and the item picker offered a sigma. Both lists end with Custom…, so anything either one misses is a typed name away.

Item settings (one per block)

Setting	What it does
Icon	Optional. A small mark beside the item's name, from a list of things — a bike, a wheel of cheese, a bolt. The answer for a shop whose products have nothing worth photographing. Default (none); Custom… takes any icon name.
Custom icon name	Shown only when the item's icon is Custom…. Type any name from the icon library.
Image	Optional. A photo at the top of the card, cropped to a consistent 4:3 box so a grid of cards never goes ragged. Leave it out and the card starts at its name.
Item name	The card title (e.g. "Tomato 'Sungold'", "Lavender 'Hidcote'"). Write it the way your label writes it — cultivar name and all.
Condition 1	The value for the first condition you named on the section. If you named it Sun, this is where "Full sun" goes. Leave it blank and that row drops from this card only.
Condition 2	The value for the second — "Regular, deep".
Condition 3	The value for the third — "Well-drained, rich".
Condition 4	The value for the fourth — "5".
Care notes	A sentence or two of real advice ("Cut back by a third after flowering — never into old wood"). This is a rich-text field, so bold, italics, and links all work. Leave blank to hide it.

Every field is optional. A row appears only when you have named the condition on the section AND filled it in on the card, so a card with two of the four shows two rows, cleanly, and a card with none drops the row list rather than drawing an empty one. Fill in what you actually know, and leave the rest out rather than writing "N/A".

The Talamh signature — a cross-section of earth

Every preset gets the same working cards; Talamh (garden) gives them the earth treatment, and it's the preset this section was built for.

The card becomes a slice of ground. A warm-loam surface, rimmed in hairline terracotta. Along the top edge runs a decorative two-tone soil-strata band — moss-green topsoil over terracotta subsoil, the same cross-section stripe that draws under the header navigation. The condition rows stack as horizon rows, divided by hairline rules, so the data literally reads as layered ground, and the care notes sit at the base of the horizon in an italic hand, like a field note pencilled in the margin. Nothing about the card's content or structure changes: the decoration sits on top of the same markup and the same reading order.

Preset	Treatment
Talamh	The signature soil-horizon card — a warm-loam surface, a hairline terracotta rim, the two-tone soil-strata band along the top edge, horizon rows split by hairline rules, and italic field-note care notes.
Uisce	Clean, calm cards on a cool ground.
Gaoth	Warm, rounded cards for pet and lifestyle stores.
Tine	Sharper, industrial cards for trade and hardware.
Neart	Soft, premium cards for calm wellness stores.

The section is available in every preset, and it is not only for plants. It is a spec card grid: up to four labelled attributes and a note, under names you choose. A tool shop runs it as Voltage / Torque / Weight / Warranty; a wellness brand as Dose / Timing / With food. If you need shoppers to compare items side by side across the same columns, the Comparison table is the better section — this one is a card per item, read one at a time. The earth decoration is the Talamh flavour, not a requirement.

Realistic examples

• A heritage-seed grower (the Talamh demo). Heading: "How to grow what you sow". Conditions named Sun, Water, Soil, Hardiness zone. Six cards — Tomato 'San Marzano', Pea 'Sugar Snap', Carrot 'Rainbow Mix', Lettuce 'Little Gem', Basil 'Genovese', and Radish 'French Breakfast' — each with its four lines filled in. Related article: soil-preparation-by-season, so the "Read more" link drops the shopper into the soil guide. It lives at /pages/care-conditions.
• A cheesemonger. Conditions named Milk, Age, Rind, Serve at. One card per cheese, with a photo of the cut wheel.
• A houseplant shop. Conditions named Light, Water, Soil — the fourth left blank because nothing goes outdoors, so no card shows a fourth row.
• A menswear shop. Conditions named Wash, Dry, Iron, Bleach, with the care-label symbols written out in words a customer can actually act on.
• A single item's product page. One block, one card, dropped under the product description as a spec panel.

Responsive & accessibility

• Semantic cards. Each item is a real <article> with its name as a heading, so a screen-reader user can jump item to item instead of wading through the whole grid.
• Photos are described by the card. An item image takes its alt text from the item name, so it is never an unlabelled picture — and a card with no photo loses nothing but the photo.
• Both kinds of icon are decoration. The item mark and the row marks are hidden from screen readers, because the text each one marks — the item's name, the condition's name — sits right beside it in plain words. Nobody has to interpret a picture to read a card.
• No columns setting to get wrong. The grid fills the row with as many cards as fit at a comfortable width and wraps the rest, so it is correct on every screen without you configuring anything.
• Respects reduced motion — the card's hover shadow transition is switched off for shoppers who ask for reduced motion. The cards work exactly the same.
• Right-to-left ready — the cards, the condition rows, and the read-more link all flow correctly in Arabic, Hebrew, Persian, and Urdu.
• One color scheme — the whole section is painted from a single scheme, so text never lands in a low-contrast surprise, in light or dark mode. On Talamh the cards stay opaque in dark mode, so they never dissolve into the background. Every piece of card text — the row labels, the values, the care notes and the "Read more" link — takes its colour from the scheme's own text colour rather than its accent, so it clears WCAG AA contrast in all twenty shipped preset colour schemes, not only the ones the demo stores happen to use.
• Every fixed string is translated — the "Read more" link and every label and dropdown option you see in the theme editor ship in all 50 locales. Your own words — the heading, the condition names, the item names, your answers, the care notes — are your content: translate those under Apps → Translate & Adapt. Note that this includes the condition names, because they are yours.
• App blocks are supported — an app can add its own block to this section (a care-reminder signup, a plant-identifier widget), and it renders beneath the cards.

Tips

• Name the conditions before you add the items. A blank condition name hides that row on every card, so nothing appears until the section knows what the column is called.
• Write like a label, not like a manual. "Full sun", "Regular, deep", "Well-drained, rich" — three or four words per row. The card is a glance, the care notes are the sentence.
• Leave a field blank rather than writing "N/A". A blank field removes its row; "N/A" just makes the card look unfinished.
• Be consistent within a condition. If Condition 4 is a hardiness zone, pick USDA numbers (5) or the RHS scale (H4) and stick to one across every card, so the values are comparable at a glance.
• Use photos or don't — but don't do half. The images crop to the same box, so a grid where some cards have a photo and some do not reads as unfinished rather than as a design choice. The same goes for the icon.
• Mark every row or none — don't do three of four. One unmarked row in a marked set reads as a mistake rather than a choice.
• The row icons are chosen, never fixed. An earlier version welded a sun, a droplet and a sprout to rows one, two and three. Rename row three to "Shelf life" and the sprout is a picture that lies. Yours is picked for the word you wrote.
• Point the related article at a published post. If the chosen post is unpublished or deleted, the theme renders no link at all (rather than a broken one) — so if your "Read more" link is missing, check that the post is still published.
• Give it its own page. In the Talamh demo it's a page of its own (/pages/care-conditions), linked from the main menu — customers bookmark it and come back to it long after the sale.