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.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name An example attribute. string 'Template name'
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>