Tiles Stack | Notion

Admin User Requirements for "Tiles Stack"

Schema Overview

Key Functionalities

Tiles Stack
- The section displays a set of tiles that stack on mobile devices and are displayed in a single row on tablet and desktop devices. Each tile can be customized with its own image, heading, description, and link.
Tile Customization
- Each tile has customizable options for the image, image crop, heading, description, and link.
Styling Options
- Full control over the text color, tile text alignment, tile heading size, and image aspect ratio.
Responsive Design
- Tiles are displayed in a row on desktop and tablet, but they stack vertically on mobile devices for better mobile compatibility.

Fields and DefaultsHeader Settings

Field	Required	Default	Description
Heading	Optional	"Tabbed Tiles Slider Heading"	Section heading displayed above the tiles.
Subheading	Optional	Empty	Section subheading displayed below the heading.
Alignment	Optional	`"text-center items-center"`	Align heading and subheading: Options: `left`, `center`, `right`.

Tiles

Field	Required	Default	Description
Image Alt	Optional	Empty	Alt text for the selected image. If not provided, the alt text from the media manager is used.
Image	Required	Placeholder image provided	Image displayed in the tile.
Image Crop Position	Optional	`center`	Determines how the image is cropped (e.g., center, top-left).
Heading	Required	Empty	Heading for the tile.
Description	Optional	Empty	Description text displayed below the heading.
Link	Optional	Empty	URL and optional link text for the tile.

Section Settings

Field	Required	Default	Description
Image Aspect Ratio	Optional	`aspect-[5/4]`	Aspect ratio for the tile images: Options include `3:2`, `4:3`, `5:4`, etc.
Text Color	Optional	`"var(--text)"`	Text color for the section content.
Tile Text Alignment	Optional	`"text-left items-start"`	Aligns the text in each tile: Options: `left`, `center`, `right`.
Tile Heading Size	Optional	`"text-h4"`	Font size for the tile heading.
Full Width	Optional	`false`	Expands the section to full width.

Container Settings

Default Content