Data Pair Tile

<sl-data-pair-tile> | SlDataPairTile
Since 2.0 stable

A data pair tile displays a label and a value with various size and alignment options.

A data pair tile displays a label and value, often used for displaying financial data, statistics, or key metrics in dashboards. 

<sl-data-pair-tile label="Total portfolio value" value="100000" value-type="currency"></sl-data-pair-tile>

Examples

Sizes

Data pair tiles come in three sizes: small, medium (default), and large.

<div style="display: flex; flex-direction: column; gap: 24px;">
  <sl-data-pair-tile label="Small" value="125000" value-type="currency" size="small"></sl-data-pair-tile>
  <sl-data-pair-tile label="Medium" value="350000" value-type="currency" size="medium"></sl-data-pair-tile>
  <sl-data-pair-tile label="Large" value="1250000" value-type="currency" size="large"></sl-data-pair-tile>
</div>

Alignment

Data pair tiles support left, center, and right alignment (right is default).

<div style="display: flex; flex-direction: column; gap: 24px; border: 1px solid #eee; padding: 20px;">
  <sl-data-pair-tile 
    label="Left aligned" 
    value="350000" 
    value-type="currency" 
    align="left">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Center aligned" 
    value="350000" 
    value-type="currency" 
    align="center">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Right aligned" 
    value="350000" 
    value-type="currency" 
    align="right">
  </sl-data-pair-tile>
</div>

Label Position

Data pair tiles support placing the label either above (default) or below the value.

<div style="display: flex; flex-direction: column; gap: 24px; border: 1px solid #eee; padding: 20px;">
  <sl-data-pair-tile 
    label="Label on top (default)" 
    value="350000" 
    value-type="currency" 
    label-position="top">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Label on bottom" 
    value="350000" 
    value-type="currency" 
    label-position="bottom">
  </sl-data-pair-tile>
</div>

Value Types

Data pair tiles support different value types: decimal, currency, and percentage.

<div style="display: flex; flex-direction: column; gap: 24px;">
  <sl-data-pair-tile 
    label="Decimal" 
    value="1234.5678" 
    value-type="decimal" 
    min-decimal-places="2" 
    max-decimal-places="2">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Currency" 
    value="1234.5678" 
    value-type="currency" 
    min-decimal-places="0" 
    max-decimal-places="0">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Percentage" 
    value="0.1234" 
    value-type="percent" 
    min-decimal-places="1" 
    max-decimal-places="1">
  </sl-data-pair-tile>
</div>

With Icons

Data pair tiles can include optional icons using the standard Shoelace icon system.

<div style="display: flex; flex-direction: column; gap: 24px;">
  <sl-data-pair-tile 
    label="Using icon attribute" 
    value="125000" 
    value-type="currency" 
    size="small"
    align="left"
    icon="check">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Using system library" 
    value="475000" 
    value-type="currency" 
    icon="gear">
  </sl-data-pair-tile>
  
  <sl-data-pair-tile 
    label="Custom SVG icon" 
    value="1250000" 
    value-type="currency" 
    size="large"
    align="right"
    icon="circle-info">
  </sl-data-pair-tile>
</div>

Automatic first-significant figure rounding

The component automatically removes non-significant figures like non-trailing zero’s

<sl-data-pair-tile label="Total portfolio value" value="000000" value-type="currency" size="large"></sl-data-pair-tile>

[component-metadata:sl-data-pair-tile]

Slots

Name Description
label The label slot, if not provided the label property will be used.
value The value slot, if not provided the value property will be used.
icon An optional icon to show before the label. Works best with <sl-icon>.

Learn more about using slots.

Properties

Name Description Reflects Type Default
size The size of the data pair tile 'small' | 'medium' | 'large' 'medium'
align The alignment of the content 'left' | 'center' | 'right' 'left'
labelPosition
label-position 		The position of the label relative to the value 'top' | 'bottom' 'top'
label The label text string ''
value The value to display number 0
valueType
value-type 		The type of value formatting to apply 'decimal' | 'currency' | 'percent' 'decimal'
minDecimalPlaces
min-decimal-places 		The minimum decimal places to display number 0
maxDecimalPlaces
max-decimal-places 		The maximum decimal places to display number 2
icon Name of the icon to show (uses sl-icon) string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.
label-container The container for the label and icon.
label The label element.
value The value element.
icon The icon container.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>