mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
109 lines
4.0 KiB
YAML
109 lines
4.0 KiB
YAML
name: Tiles
|
|
description: Visual components that display content in a card-like format with media elements, ideal for presenting items
|
|
in grid layouts or lists.
|
|
category: Layout
|
|
slds_classes:
|
|
root: slds-tile
|
|
elements:
|
|
- class: slds-tile__detail
|
|
description: Main content area of the tile
|
|
purpose: Contains title, description, and metadata
|
|
- class: slds-tile__meta
|
|
description: Metadata container
|
|
purpose: Additional information about the tile content
|
|
modifiers:
|
|
- class: slds-tile_board
|
|
description: Board-style tile for kanban layouts
|
|
usage: Tiles used in board or kanban interfaces
|
|
states:
|
|
- class: slds-is-selected
|
|
description: Selected tile state
|
|
trigger: When tile is currently selected
|
|
- class: slds-has-focus
|
|
description: Focus state for interactive tiles
|
|
trigger: When tile has keyboard focus
|
|
variants:
|
|
- name: Base
|
|
description: Standard tile with media and content
|
|
classes:
|
|
- slds-tile
|
|
usage_context: Default tile implementation for content display
|
|
differences: Media object pattern with visual element and content
|
|
lightning_component:
|
|
name: lightning-tile
|
|
url: https://developer.salesforce.com/docs/component-library/bundle/lightning-tile
|
|
mapping_notes: Direct mapping - Lightning component implements SLDS tile blueprint
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab to focus interactive tiles
|
|
- Enter/Space to activate tile actions
|
|
- Arrow keys for grid navigation when appropriate
|
|
screen_reader:
|
|
- Tile content and purpose announced
|
|
- Media elements described appropriately
|
|
- Selection states communicated
|
|
- Associated actions clearly identified
|
|
aria_attributes:
|
|
- aria-labelledby for tile titles
|
|
- aria-describedby for tile metadata
|
|
- role='button' or 'link' for interactive tiles
|
|
- aria-selected for selectable tiles
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- For displaying collections of related content
|
|
- In grid layouts showing multiple items
|
|
- For content previews or summaries
|
|
- When visual hierarchy with media is beneficial
|
|
when_not_to_use:
|
|
- For simple text lists (use list components)
|
|
- When media elements are not relevant
|
|
- For complex interactive content (use cards instead)
|
|
best_practices:
|
|
- Use consistent tile sizing within collections
|
|
- Provide meaningful titles and descriptions
|
|
- Choose appropriate media elements
|
|
- Maintain good visual hierarchy
|
|
- Support keyboard navigation for interactive tiles
|
|
common_mistakes:
|
|
- Inconsistent tile sizes in the same collection
|
|
- Poor media element choices
|
|
- Unclear or missing tile labels
|
|
- Overloading tiles with too much information
|
|
code_examples:
|
|
- title: Basic Tile
|
|
code: "<div class=\"slds-tile\">\n <div class=\"\">\n <span class=\"slds-icon_container slds-icon-standard-account\"\
|
|
>\n <svg class=\"slds-icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/standard-sprite/svg/symbols.svg#account\"\
|
|
></use>\n </svg>\n </span>\n </div>\n <div class=\"slds-tile__detail\">\n <div class=\"\
|
|
\">\n <a href=\"#\" title=\"Acme Corporation\">Acme Corporation</a>\n </div>\n <div class=\"slds-tile__meta\"\
|
|
>\n <span class=\"slds-text-body_small\">Customer • San Francisco</span>\n </div>\n </div>\n \
|
|
\ </div>\n"
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- tile.css
|
|
- media-objects.css
|
|
javascript: []
|
|
icons:
|
|
- standard-sprite.svg
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- media-objects
|
|
- icons
|
|
related_components:
|
|
- name: Cards
|
|
relationship: similar
|
|
description: Similar container concept with more structure
|
|
- name: Media Objects
|
|
relationship: depends-on
|
|
description: Based on media object layout pattern
|
|
- name: Avatar
|
|
relationship: depends-on
|
|
description: Often used as media element in tiles
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/tiles/
|
|
metadata:
|
|
version: 1.0.0
|
|
last_updated: '2025-11-12'
|
|
review_status: complete
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|