Content
Link Tile Compact
Space-efficient category node variant for listing pages with eight design variants and optional images.
Overview
Used in Inpage Navigation Compact Grid and Slider components. Supports customizable background colors per node and 1:1 aspect ratio images. See more variant links to supercategory pages via category ID or URL. Themed component with multiple color modes for light, dark, and bright backgrounds. Icon display available via LuiIcon integration.
Key Business & UX Benefits
- Fits many category links in grids and sliders without crowding the layout.
- Eight variants (default, outline, solid, sale, etc.) suit different sections and emphasis.
- Text-only mode and optional images support flexible content and performance.
- Full interaction states and optional flags keep tiles clear and accessible.
Pro-Tip from Larry: Use the solid or outline variants in compact grids so tiles read clearly at a glance.
Usage
LinkTileCompact
Feature List
- Eight design variants: default, outline, outline-sale, solid-light, solid-bright, solid-pale, solid-sale, solid-sale-red
- Optional image display with text-only mode available
- Promotional flag support with automatic corner positioning based on variant
- Full interaction states: default, hover, pressed, focus
API Reference
| 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" |
colorMode | default | "default" | "on-light" | "on-dark" | "on-bright" |
megaMenu | false | boolean |
href | string | |
media | ||
icon | media/image | string |
flag | CategoryNodeFlagProps { variant, radius, size, 2 more } | |
backgroundColor | string |