{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "Tile", "description": "Initializes tile", "structure": { "name": "root", "restrict": [ "article", "div" ], "description": "Initializes tile", "children": [ { "name": "media", "restrict": [ "div" ], "description": "Media/figure area (icon, avatar, or task checkbox). Only present when the tile uses the media layout.", "renderWhen": "slotFilled", "slot": { "name": "media", "restrict": [ "Icon", "Avatar", "Checkbox" ] }, "children": [ { "name": "mediaIconContainer", "restrict": [ "span" ], "description": "Sprite icon container when the figure holds an icon", "renderWhen": { "prop": "figureType", "eq": "icon" }, "children": [ { "name": "mediaIconSvg", "description": "Icon glyph svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon" } }, "variants": [ { "name": "standardSprite", "description": "Standard sprite glyph tint applied to the media icon svg", "options": [ { "value": "groups", "class": "slds-icon-standard-groups" } ] } ], "children": [ { "name": "mediaIconUse" } ] } ], "attributes": { "static": { "class": "slds-icon_container" } } }, { "name": "mediaAvatar", "restrict": [ "span" ], "description": "Avatar container when the figure holds an avatar image", "renderWhen": { "prop": "figureType", "eq": "avatar" }, "children": [ { "name": "mediaAvatarImage", "restrict": [ "img" ], "description": "Avatar image element" } ], "attributes": { "static": { "class": "slds-avatar slds-avatar_circle slds-avatar_medium" } } }, { "name": "mediaCheckbox", "restrict": [ "div" ], "description": "Checkbox group container when the figure holds a task checkbox", "renderWhen": { "prop": "figureType", "eq": "checkbox" }, "children": [ { "name": "mediaCheckboxInput", "restrict": [ "input" ], "description": "Checkbox input element" }, { "name": "mediaCheckboxLabel", "restrict": [ "label" ], "description": "Checkbox label wrapping the faux box and the descriptive label text", "children": [ { "name": "mediaCheckboxFaux", "restrict": [ "span" ], "description": "Faux checkbox graphic", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "mediaCheckboxLabelText", "restrict": [ "span" ], "description": "Descriptive label text (assistive-text permitted)", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-checkbox__label" } } } ], "attributes": { "static": { "class": "slds-checkbox" } } } ], "attributes": { "static": { "class": "slds-media__figure" } } }, { "name": "body", "restrict": [ "div" ], "description": "Tile body wrapping the title and detail. May be omitted in compact layouts where the title and detail sit directly inside the tile root.", "children": [ { "name": "bodyGrid", "restrict": [ "div" ], "description": "Inner grid wrapping the title and the tile actions on a single row", "renderWhen": { "prop": "hasActions", "eq": "true" }, "children": [ { "name": "title", "restrict": [ "h3" ], "description": "Tile title", "slot": { "name": "title", "required": true }, "children": [ { "name": "titleLink", "restrict": [ "a" ], "description": "Linked tile title text" } ], "attributes": { "static": { "class": "slds-tile__title slds-truncate" } } }, { "name": "actions", "restrict": [ "div" ], "description": "Tile action button area", "renderWhen": "slotFilled", "slot": { "name": "actions" }, "children": [ { "name": "actionButton", "restrict": [ "button" ], "description": "Tile-level overflow action button", "children": [ { "name": "actionButtonIcon", "description": "Action button icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint" } }, "children": [ { "name": "actionButtonUse" } ] }, { "name": "actionButtonAssistiveText", "restrict": [ "span" ], "description": "Assistive text describing the action", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small", "aria-haspopup": "true" } } } ], "attributes": { "static": { "class": "slds-shrink-none" } } } ], "attributes": { "static": { "class": "slds-grid slds-grid_align-spread slds-has-flexi-truncate" } } }, { "name": "detail", "restrict": [ "div" ], "description": "Tile detail content (description list, paragraphs, meta lists, board alert)", "slot": { "name": "default" }, "children": [ { "name": "detailList", "restrict": [ "dl" ], "description": "Horizontal description list of label/value pairs", "children": [ { "name": "detailLabel", "restrict": [ "dt" ], "description": "Description term (label)", "repeats": true, "attributes": { "static": { "class": "slds-item_label slds-text-color_weak slds-truncate" } } }, { "name": "detailValue", "restrict": [ "dd" ], "description": "Description detail (value)", "repeats": true, "attributes": { "static": { "class": "slds-item_detail slds-truncate" } } } ], "attributes": { "static": { "class": "slds-list_horizontal slds-wrap" } } }, { "name": "detailParagraph", "restrict": [ "p" ], "description": "Detail paragraph (assignee, headline lede, board amount, or follow-up text)", "repeats": true, "modifiers": [ { "name": "truncate", "attribute": "class", "value": "slds-truncate", "description": "Truncates the paragraph text when it overflows" }, { "name": "headingMedium", "attribute": "class", "value": "slds-text-heading_medium", "description": "Applies the medium heading typography (board-style amount line)" }, { "name": "hasAlert", "attribute": "class", "value": "slds-has-alert", "description": "Flags a detail paragraph as alerting (paired with the warning icon)" } ] }, { "name": "detailMetaList", "restrict": [ "ul" ], "description": "Inline horizontal meta list (status, category, timestamp, vote actions)", "repeats": true, "children": [ { "name": "detailMetaItem", "restrict": [ "li" ], "description": "Meta-list item", "repeats": true, "children": [ { "name": "detailMetaItemAction", "restrict": [ "button" ], "description": "Optional vote/like icon button rendered inside a meta item", "children": [ { "name": "detailMetaItemActionIcon", "description": "Vote icon svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "detailMetaItemActionUse" } ] }, { "name": "detailMetaItemActionAssistiveText", "restrict": [ "span" ], "description": "Assistive text describing the vote action", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small", "aria-pressed": "false" } } }, { "name": "detailMetaItemCount", "restrict": [ "span" ], "description": "Inline count rendered alongside a vote action", "attributes": { "static": { "class": "slds-align-middle" } } } ], "modifiers": [ { "name": "item", "attribute": "class", "value": "slds-item", "description": "Adds the standard list-item styling used by article-style meta items" }, { "name": "marginRightSmall", "attribute": "class", "value": "slds-m-right_small", "description": "Adds a small right margin separating inline vote actions" } ] } ], "attributes": { "static": { "class": "slds-list_horizontal" } }, "modifiers": [ { "name": "dividersRight", "attribute": "class", "value": "slds-has-dividers_right", "description": "Adds right-side dividers between meta-list items" }, { "name": "marginTopXxSmall", "attribute": "class", "value": "slds-m-top_xx-small", "description": "Adds an extra-extra-small top margin separating stacked meta lists" } ] }, { "name": "detailAlertIconContainer", "restrict": [ "span" ], "description": "Tile board icon", "renderWhen": { "prop": "hasAlert", "eq": "true" }, "children": [ { "name": "detailAlertIconSvg", "description": "Warning glyph svg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon-text-warning slds-icon_x-small" } }, "children": [ { "name": "detailAlertIconUse" } ] }, { "name": "detailAlertIconAssistiveText", "restrict": [ "span" ], "description": "Assistive text describing the warning icon", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-icon_container slds-tile_board__icon" } } } ], "attributes": { "static": { "class": "slds-tile__detail" } } } ], "modifiers": [ { "name": "mediaBody", "attribute": "class", "value": "slds-media__body", "description": "Applies the slds-media body layout when the tile pairs body content with a leading figure" } ] } ], "attributes": { "static": { "class": "slds-tile" } }, "modifiers": [ { "name": "media", "attribute": "class", "value": "slds-media", "description": "Applies the slds-media layout when the tile has a leading figure (icon, avatar, or task checkbox)" }, { "name": "hintParent", "attribute": "class", "value": "slds-hint-parent", "description": "Reveals tile-level actions only on hover/focus" } ], "variants": [ { "name": "style", "description": "Structural rendering style applied to the tile root", "options": [ { "value": "board", "class": "slds-tile_board", "description": "Initializes tile board" } ] } ] }, "states": [ { "name": "hasAlert", "type": "boolean", "description": "Whether the board tile is flagged with a warning alert" }, { "name": "hintParent", "type": "boolean", "description": "Whether the tile reveals its actions only on hover/focus" } ], "accessibility": { "requirements": [ { "id": "semantic-heading", "description": "Title should use an appropriate heading level for the document outline" }, { "id": "action-button-label", "description": "Tile-level action buttons must carry an accessible name (visible label or assistive text)" }, { "id": "decorative-icon-hidden", "description": "Decorative svgs inside the tile must set aria-hidden=true" }, { "id": "task-checkbox-label", "description": "Task-style tile checkboxes must associate the label with the input and provide a descriptive label (assistive-text permitted)" } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-tile" } }, "cssSource": "./tile.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "hasAlert", "class": "slds-has-alert" } ] }