Tiles
Tiles
- HTML/CSS:Dev Ready
- Layout:Responsive
A tile is a grouping of related information associated with a record.
Base
Preview
About Tiles
Tiles are setup to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list.
Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-tile |
|---|---|
| Summary | Initializes tile |
| Support | dev-ready |
| Restrict | article |
| Variant | True |
| Selector | .slds-card__tile |
|---|---|
| Summary | Use class if card consumes any form of a tile |
| Restrict | .slds-tile |
| Selector | .slds-tile__detail |
|---|---|
| Summary | |
| Restrict | .slds-tile div |
| Selector | .slds-tile__meta |
|---|---|
| Summary | |
| Restrict | .slds-tile div |