Salesforce UX
- First Label:
- Description for first label
- Second Label:
- Description for second label
Tiles are set up 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.
Warning
Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.
<div class="demo-only" style="width:30rem">
<article class="slds-tile">
<h3 class="slds-tile__title slds-truncate" title="Salesforce UX">
<a href="#">Salesforce UX</a>
<div class="demo-only" style="width:30rem">
<article class="slds-tile slds-hint-parent">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<h3 class="slds-tile__title slds-truncate" title="Salesforce UX">
<div class="demo-only" style="width:30rem">
<article class="slds-tile slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container" title="description of icon when needed">
<div class="demo-only" style="width:30rem">
<article class="slds-tile slds-media">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar_circle slds-avatar_medium">
Assignee
<div class="demo-only" style="width:320px">
<article class="slds-tile slds-media">
<div class="slds-media__figure">
<div class="slds-checkbox">
by Steve Author
<div class="demo-only" style="width:320px">
<article class="slds-tile">
<h3 class="slds-tile__title slds-truncate" title="Company One beats Company Two to the 200-mile affordable electric car">
<a href="#">Company One beats Company Two to the 200-mile affordable electric car</a>
...an introduction for beginners about climbing ropes and how they can use...
Last Modified: 1/14/16
<div class="demo-only" style="width:320px">
<article class="slds-tile">
<h3 class="slds-tile__title slds-truncate" title="Company One beats Company Two to the 200-mile affordable electric car">
<a href="#">Company One beats Company Two to the 200-mile affordable electric car</a>
<div class="demo-only" style="width:320px">
<ul class="slds-has-dividers_around-space">
<li class="slds-item">
<article class="slds-tile slds-tile_board">
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 |
Selector | .slds-tile_board |
---|---|
Summary | Initializes tile board |
Support | dev-ready |
Restrict | article |
Variant | True |
Selector | .slds-tile_board__icon |
---|---|
Summary | Tile board icon |
Restrict | .slds-tile_board span |