Tile Master

<sl-tile-master> | SlTileMaster
Since 1.0 experimental

A flexible tile component with configurable slot positions for displaying content in pairs.

Prefix slot
Body slot
Suffix slot
 
<sl-tile-master>
  <div slot="prefix">Prefix slot</div>
  <div slot="body">Body slot</div>
  <div slot="suffix">Suffix slot</div>
</sl-tile-master>

Examples

Inline Layout (Default)

The default inline layout displays all slots in a horizontal row.

Inline
Inline
Body content
Inline
Inline
 
<sl-tile-master slot-position="inline">
  <div slot="prefix">
    <div class="content-container">
      <div class="prefix-content">Inline</div>
      <div class="prefix-content">Inline</div>
    </div>
  </div>
  <div slot="body">
    <div class="body-content">Body content</div>
  </div>
  <div slot="suffix">
    <div class="content-container">
      <div class="suffix-content">Inline</div>
      <div class="suffix-content">Inline</div>
    </div>
  </div>
</sl-tile-master>

<style>
  .content-container {
    display: flex;
  }
</style>

Mixed Layout

Use the mixed layout to display prefix and suffix slots in columns.

Stack
Stack
Body content
Stack
Stack
 
<sl-tile-master slot-position="mixed">
  <div 
  slot="prefix"
  style="background-color: var(--hds-color-bg-accent-purple-subtle)"
  >
    <div class="prefix-content">Stack</div>
    <div class="prefix-content">Stack</div>
  </div>
  <div 
  slot="body"
  style="background-color: var(--hds-color-bg-accent-purple-subtle)"
  >
    <div class="body-content">Body content</div>
  </div>
  
  <div 
  slot="suffix"
  style="background-color: var(--hds-color-bg-accent-purple-subtle)"
  >
    <div class="suffix-content">Stack</div>
    <div class="suffix-content">Stack</div>
  </div>
</sl-tile-master>

Horizontal and vertical alignments

Content and elements that are slotted in can be aligned horizontally left, center, or right using the horizontal-alignment attribute, and vertically top, center, or bottom using the vertical-alignment attribute.

Vertical top alignment

Prefix slot
Body slot
Suffix slot
 
<sl-tile-master vertical-alignment="top">
  <div 
  slot="prefix" 
  style="border: 1px dashed var(--hds-color-lavender-700, #AB88FC);">
      Prefix slot
  </div>
  <div 
  slot="body"
  style="
    height: 80px; 
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Body slot
  </div>
  <div 
  slot="suffix"
  style="
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Suffix slot
  </div>
</sl-tile-master>

Centre alignment

Prefix slot
Body slot
Suffix slot
 
<sl-tile-master vertical-alignment="centre">
  <div 
  slot="prefix" 
  style="
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Prefix slot
  </div>
  <div 
  slot="body"
  style="
    height: 80px; 
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Body slot
  </div>
  <div 
  slot="suffix"
  style="
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Suffix slot
  </div>
</sl-tile-master>

Bottom alignment

Prefix slot
Body slot
Suffix slot
 
<sl-tile-master vertical-alignment="bottom">
  <div 
  slot="prefix" 
  style="
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Prefix slot
  </div>
  <div 
  slot="body"
  style="
    height: 80px; 
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Body slot
  </div>
  <div 
  slot="suffix"
  style="
    border: 1px dashed var(--hds-color-lavender-700, #AB88FC);
  ">
      Suffix slot
  </div>
</sl-tile-master>

Padding and gap

Setting a custom padding

By default, padding and gap are both set to 16px. However, padding on all four sides can be controlled using the --padding CSS custom property, while the gap between slot groups can be adjusted using the --spacing CSS custom property.

The padding
is
3rem
 
<sl-tile-master style="--padding: 3rem;">
    <div slot="prefix">The padding</div>
    <div slot="body">is</div>
    <div slot="suffix">3rem</div>
</sl-tile-master>

Setting a custom gap

The gap
is
90px
 
<sl-tile-master style="--spacing: 90px;">
  <div slot="prefix">The gap</div>
  <div slot="body">is</div>
  <div slot="suffix">90px</div>
</sl-tile-master>

Variant

Base

Base does not have any states but can only contain one action (such as buttons or links). The whole area of the tile container cannot be the click target.

Tile master Base
This is an example of a base tile master with sample content and can only have one action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button 
<sl-tile-master>
  <div slot="body">
    <div class="exampler-body-content">
      <div class="exampler-body-header">
        <span class="body-title">Tile master</span>
        <sl-tag variant="primary">Base</sl-tag>
      </div>
      <div class="exampler-body-paragraph">
        <span>This is an example of a base tile master with sample content and can only have one action.</span>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
      </div>
      <div class="exampler-body-input-field">
        <sl-input placeholder="Type something"></sl-input>
      </div>
      <div class="exampler-body-action">
        <sl-button>Button</sl-button>
        
      </div>
    </div>
  </div>
</sl-tile-master>

<style>
  .exampler-body-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    gap: 16px;
  }

  .exampler-body-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
</style>

Clickable

Clickable tile master can be used as navigational elements that redirect the user to a new page. This variant has the following states and the whole area of the tile container is the click target. They cannot contain separate internal interactive elements due to accessibility concerns.

Default

Default state

Tile master Clickable
This is an example of a clickable tile master with sample content. It cannot contain separate interactive elements inside the tile. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button 
<sl-tile-master clickable>
  <div slot="body">
    <div class="exampler-body-content">
      <div 
      class="exampler-body-header">
        <span class="body-title">Tile master</span>
        <sl-tag variant="primary">Clickable</sl-tag>
      </div>
      <div class="exampler-body-paragraph">
        <span>This is an example of a clickable tile master with sample content. It cannot contain separate interactive elements inside the tile.</span>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
      </div>
      <div class="exampler-body-action">
        <sl-button>Button</sl-button>
        
      </div>
    </div>
  </div>
</sl-tile-master>

<style>
  .exampler-body-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
  }

  .exampler-body-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
</style>

Disabled state

Use the disabled attribute to disable the tile. A not-available cursor shows when hovering inside the tile container.

Tile master Clickable
This is an example of a clickable tile master with sample content. It cannot contain separate interactive elements inside the tile. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button 
<sl-tile-master disabled>
  <div slot="body">
    <div class="exampler-body-content">
      <div 
      class="exampler-body-header">
        <span class="body-title">Tile master</span>
        <sl-tag variant="primary">Clickable</sl-tag>
      </div>
      <div class="exampler-body-paragraph">
        <span>This is an example of a clickable tile master with sample content. It cannot contain separate interactive elements inside the tile.</span>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
      </div>
      <div class="exampler-body-action">
        <sl-button>Button</sl-button>
        
      </div>
    </div>
  </div>
</sl-tile-master>

<style>
  .exampler-body-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
  }

  .exampler-body-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
</style>

Multi select and radio (single) select

The multi select variant allows users to select more than one option from a group of select tiles. Multi select tiles can contain multiple internal interactive elements.

The radio select variant allows users to select only one option from a group of radio tiles. Radio tiles can contain multiple internal interactive elements. The radio select can be seen with or without the use of radio box.

To use these two selects, please include the sl-tile-group tag to ensure proper functionality.

** Working on combining sl-radio-group with tile master. The sl-radio-group have different styling compared to tile master **

Option 1
Body slot
Suffix slot
Option 2
Body slot
Suffix slot
Option 3
Body slot
Suffix slot
 
  <sl-radio-group label="Select an option" name="options" value="x">
    <sl-tile-master>
      <div slot="prefix">
          <sl-radio value="1">Option 1</sl-radio>
      </div>
      <div slot="body">Body slot</div>
      <div slot="suffix">Suffix slot</div>
    </sl-tile-master>

    <sl-tile-master>
      <div slot="prefix">
        <sl-radio value="2">Option 2</sl-radio>
      </div>
      <div slot="body">Body slot</div>
      <div slot="suffix">Suffix slot</div>
    </sl-tile-master>

    <sl-tile-master>
      <div slot="prefix">
        <sl-radio value="3">Option 3</sl-radio>
      </div>
      <div slot="body">Body slot</div>
      <div slot="suffix">Suffix slot</div>
    </sl-tile-master>
  </sl-radio-group>

  <style>
    sl-radio {
    margin-bottom: 0;
    font-size: var(--hds-font-application-label-fontSize, 14px);
    font-style: normal;
    font-weight: var(--hds-font-application-weight-strong, 500);
    line-height: normal;
  }

  </style>

Hover exception for multi select & radio

Multi select and radio tiles have the same states as clickable variant but hover state does not show a hand pointer cursor for the whole tile. It will respect internal interactive elements when hovering more specifically.

[component-metadata:sl-tile-master]

Slots

Name Description
prefix A slot for content to be placed before the body content.
suffix A slot for content to be placed after the body content.
body The default slot, used for the body content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
horizontalAlignment
horizontal-alignment 		The horizontal alignment of the content and elements 'left' | 'centre' | 'right' 'left'
verticalAlignment
vertical-alignment 		The vertical alignment of the content and elements 'top' | 'centre' | 'bottom' 'centre'
slotPosition
slot-position 		Whether the slots should be displayed inline, stacked or inline combo 'inline' | 'mixed' 'inline'
clickable Whether the tile is clickable boolean false
disabled Whether the tile is disabled 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.

Custom Properties

Name Description Default
--spacing The gap between slot groups.
--padding The padding inside the tile.
--display The display style of the tile master.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
prefix The prefix elements or contents.
suffix The suffix elements or contents.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>