Tile

<sl-tile> | SlTile
Since 1.0 stable

A tile with optional footer actions.

 
<sl-tile>

  <div class="skeleton-overview">
    <header>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </header>

    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
  </div>

</sl-tile>

<style>
  .skeleton-overview {
    padding: 2rem;
    width: 100%;
    height: 100%;
  }
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .skeleton-overview header sl-skeleton:last-child {
    flex: 0 0 auto;
    width: 70%;
  }
  .skeleton-overview sl-skeleton {
    margin-bottom: 1rem;
  }
  .skeleton-overview sl-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }
  .skeleton-overview sl-skeleton:nth-child(3) {
    width: 95%;
  }
  .skeleton-overview sl-skeleton:nth-child(4) {
    width: 80%;
  }
</style>

Examples

Page hidden 

<sl-tile disabled>

  <div class="skeleton-overview">
    <header>
      <sl-skeleton></sl-skeleton>
      <sl-skeleton></sl-skeleton>
    </header>

    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
    <sl-skeleton></sl-skeleton>
  </div>

</sl-tile>

<style>
  .skeleton-overview {
    padding: 2rem;
    width: 100%;
    height: 100%;
  }
  .skeleton-overview header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .skeleton-overview header sl-skeleton:last-child {
    flex: 0 0 auto;
    width: 70%;
  }
  .skeleton-overview sl-skeleton {
    margin-bottom: 1rem;
  }
  .skeleton-overview sl-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    vertical-align: middle;
  }
  .skeleton-overview sl-skeleton:nth-child(3) {
    width: 95%;
  }
  .skeleton-overview sl-skeleton:nth-child(4) {
    width: 80%;
  }
</style>

Second Example

TODO

[component-metadata:sl-tile]

Slots

Name Description
(default) The default slot for tile content.
footer-actions Footer actions.
overlay-badge An overlay badge displayed on the tile.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The name of the tile string 'Template name'
disabled Whether the tile is disabled boolean false
selected Whether the tile is selected boolean false
showHeader
show-header 		Whether to show the header boolean false
hideFooter
hide-footer 		Whether to show the footer boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-click Emitted when the tile is clicked. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-popup>
  • <sl-tooltip>