Content
Link Tile Big
Large-format category node with multiple aspect ratios, text overlay options, and gradient overlays for prominent in-page navigation.
Overview
Ideal for hero-style category navigation on homepages and entry pages. Supports promotional badges like "Sale" or "New" with themed flag positioning. Full interaction states (default, hover, pressed, focus) provide clear feedback. Gradient opacity is adjustable to balance image visibility with text readability, and the component uses LuiImageContrastOverlay for dark image variants.
Key Business & UX Benefits
- Hero-style category tiles draw attention on home and entry pages.
- Square, landscape, and portrait ratios fit different layouts and imagery.
- Text on image or below image supports flexible content and readability.
- Gradient overlay and badges (Sale, New) support promotions and clarity.
Pro-Tip from Larry: Use portrait or landscape for hero category tiles so they stand out on the page.
Usage
LinkTileBig
Feature List
- Three image aspect ratios: square (1:1), landscape, and portrait
- Text positioning options: on image or below image
- Optional gradient overlay for improved text readability on dark images
- Customizable background color per node
API Reference
| Prop | Default | Type |
|---|---|---|
titlerequired | string | |
textPosition | inside | "inside" | "below" |
textAlignment | center | "left" | "right" | "center" |
href | string | |
media | ||
colorMode | default | "default" | "on-light" | "on-dark" | "on-bright" |
imageSize | square | "square" | "landscape" | "portrait" |
flag | CategoryNodeFlagProps { variant, radius, size, 2 more } | |
showOverlay | false | boolean |
isBackgroundDark | false | boolean |
background | default | "default" | "none" | "custom" |
customBackground | string |