Content
Link Tile
Category-promoting tile that routes to a Basic, Compact, or Big internal layout based on the `variant` prop.
Overview
LinkTile promotes a category from anywhere outside the main navigation. It is the entry point that CategoryCardGrid and CategoryCardSlider render for each item, which is why their variant aliases share the LinkTileVariant type.
For mixed-media editorial tiles use Card. For the product-listing tile with pricing and add-to-cart, use ProductTileBasic.
Pick a variant by the role the tile plays in the layout:
variant | Renders | Use for |
|---|---|---|
'basic' | LinkTileBasic | Square tiles in standard category grids. |
'compact' | LinkTileCompact | Dense category grids and sliders with low chrome. |
'compact-bordered' | LinkTileCompact (outline variant) | Same as compact, with an outline. |
'big' | LinkTileBig | Hero-scale category tiles on entry pages. |
The tile accepts a promotional flag that auto-positions per variant. The router itself has no surfaceTone field; each sub-component (LinkTileBasic, LinkTileCompact, LinkTileBig) owns its own colouring and reads tone where it matters.
Key Business & UX Benefits
- A single tile drives every category entry point on the storefront, so the homepage, sliders, and grids all promote categories with the same visual language.
- Built-in promo flag positioning per variant lets merchandisers push timed campaigns from Studio without filing a dev ticket each time.
- Three layouts under one router prop mean designers can swap density between hero and dense grids without rebuilding the page.
Pro-Tip from Larry: Reach for
compact or compact-bordered inside dense grids and sliders. Reserve big for hero placements where the imagery does the work.Usage
Basic
LLinkTile
Compact
LLinkTile
Big
LLinkTile
Feature List
- Four variants ('basic', 'compact', 'compact-bordered', 'big') route to `LinkTileBasic`, `LinkTileCompact`, or `LinkTileBig` from one component
- Shared `LinkTileVariant` type means `CategoryCardGrid` and `CategoryCardSlider` accept the same value, keeping homepage and slider tiles in sync
- Built-in promotional flag auto-positions per variant, so merchandising can ship timed campaigns from Studio without dev help
- Configurable in Studio (variant, media, copy, flag) so density swaps between hero and dense grid placements are content-only changes
- Single `LinkTile` router prop lets pages swap density between hero and dense grids without rebuilding layout
API Reference
LLinkTile (router)
| Prop | Default | Type |
|---|---|---|
variantrequired | LinkTileVariant ("big" | "basic" | "compact" | "compact-bordered") | |
titlerequired | string | |
href | string | |
media | ||
flag | BadgePromotionProps { variant, radius, size, 4 more } | |
icon | string | |
iconColor | string | UserColor { dark, light } | |
backgroundColor | string | |
cardVariant | "default" | "sale" |
LLinkTileBasic
| Prop | Default | Type |
|---|---|---|
variant | default | "default" | "sale" |
title | string | |
href | string | |
media | ||
backgroundColor | string | |
icon | media/image | string |
iconColor | string | UserColor { dark, light } | |
flag | BadgePromotionProps { variant, radius, size, 4 more } | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") |
LLinkTileCompact
| Prop | Default | Type |
|---|---|---|
titlerequired | string | |
variant | default | "default" | "outline" | "default-sale" | "outline-sale" | "solid-light" | "solid-dark" | "solid-bright" | "solid-pale" | "solid-sale" | "solid-sale-red" |
megaMenu | false | boolean |
href | string | |
media | ||
icon | media/image | string |
flag | BadgePromotionProps { variant, radius, size, 4 more } | |
backgroundColor | string | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") |
LLinkTileBig
| Prop | Default | Type |
|---|---|---|
titlerequired | string | |
textPosition | inside | "inside" | "below" |
textAlignment | center | "left" | "right" | "center" |
href | string | |
media | ||
imageSize | square | "square" | "landscape" | "portrait" |
flag | BadgePromotionProps { variant, radius, size, 4 more } | |
showOverlay | false | boolean |
backgroundDark | false | boolean |
background | default | "default" | "none" | "custom" |
customBackground | string | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") |