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>

Selectable

Data pair tile that are selectable

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

Label slot

Data pair tiles can take use of the label slot

Using icon attribute
 
<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">
    <div slot="label"><sl-icon name="check"></sl-icon>Using icon attribute</div>
  </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.

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
selectable Selectable boolean false
subtle Subtle boolean false
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.

Learn more about customizing CSS parts.