# gds-formatted-number **Class**: `GdsFormattedNumber` **Tag**: `` ## Properties > Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values. | Name | Type | Default | Description | |------|------|---------|-------------| | `value` | `number \| string \| undefined` | `-` | The numerical value to display. | | `locale` | `string \| undefined` | `-` | The locale used for number formatting. | | `currency` | `string \| undefined` | `-` | The currency used when formatting numbers. | | `decimals` | `number \| undefined` | `-` | The number of decimal places to display. | | `tag` | `string` | `-` | Controls the tag of the text. Supports all valid HTML tags like h1, h2, h3, h4, h5, h6, p, span, etc. | | `'font'` | `string \| undefined` | `-` | Style Expression Property that controls the `font` property. Supports all font tokens from the design system. | | `'font-weight'` | `string \| undefined` | `-` | Style Expression Property that controls the `font-weight` property. Supports all typography weight tokens from the design system. | | `'text-transform'` | `string \| undefined` | `-` | Controls the text-transform property of the text. Supports all valid CSS text-transform values. | | `'text-decoration'` | `string \| undefined` | `-` | Controls the text-decoration property of the inner element. Supports all valid CSS text-decoration values. | | `lines` | `number \| undefined` | `-` | Controls the number of lines it should show. | | `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. | | `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. | | `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. | | `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values | | `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. | | `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. | | `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. | | `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. | | `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. | | `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. | | `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. | | `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. | | `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. | | `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. | | `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. | | `padding` | `string \| undefined` | `-` | Style Expression Property that controls the `padding` property. Only accepts space tokens. | | `'padding-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-inline` property. Only accepts space tokens. | | `'padding-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-block` property. Only accepts space tokens. | | `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. | | `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. | | `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. | | `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column | | `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. | | `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. | | `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. | | `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. | | `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. | | `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. | | `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. | | `display` | `string \| undefined` | `-` | Controls the display property. Supports all valid CSS display values. | | `level` | `GdsColorLevel` | `-` | The level of the container is used to resolve the color tokens from the corresponding level. Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information. Default for `gds-div` is level 2. | | `color` | `string \| undefined` | `-` | Style Expression Property that controls the `color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency. ```html ``` | | `background` | `string \| undefined` | `-` | Style Expression Property that controls the `background` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency. ```html ``` | | `border` | `string \| undefined` | `-` | Style Expression Property that controls the `border` property. Accepts a string of the same format as the CSS border property. ```html ``` Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value. | | `'border-color'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency. ```html ``` | | `'border-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-width` property. Only accepts space tokens. | | `'border-style'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-style` property. Supports all valid CSS `border-style` values. | | `'border-radius'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-radius` property. Only accepts space tokens. | | `'box-shadow'` | `string \| undefined` | `-` | Style Expression Property for the `box-shadow` property. Accepts shadow tokens from the design system. `xs`, `s`, `m`, `l`, `xl` | | `opacity` | `string \| undefined` | `-` | Style Expression Property that controls the `opacity` property. Supports all valid CSS `opacity` values. | | `overflow` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow` property. Supports all valid CSS `overflow` values. | | `'box-sizing'` | `string \| undefined` | `-` | Style Expression Property that controls the `box-sizing` property. Supports all valid CSS `box-sizing` values. | | `'z-index'` | `string \| undefined` | `-` | Style Expression Property that controls the `z-index` property. Supports all valid CSS `z-index` values. | | `'text-align'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-align` property. Supports all valid CSS `text-align` values. | | `'text-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-wrap` property. Supports all valid CSS `text-wrap` values. | | `'overflow-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow-wrap` property. Supports all valid CSS `overflow-wrap` values. | | `'white-space'` | `string \| undefined` | `-` | Style Expression Property that controls the `white-space` property. Supports all valid CSS `white-space` values. | | `gap` | `string \| undefined` | `-` | Style Expression Property that controls the `gap` property. Only accepts space tokens. | | `'align-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-items` property. Supports all valid CSS `align-items` values. | | `'align-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-content` property. Supports all valid CSS `align-content` values. | | `'justify-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-content` property. Supports all valid CSS `justify-content` values. | | `'justify-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-items` property. Supports all valid CSS `justify-items` values. | | `'flex-direction'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-direction` property. Supports all valid CSS `flex-direction` values. | | `'flex-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-wrap` property. Supports all valid CSS `flex-wrap` values. | | `'place-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-items` property. Supports all valid CSS `place-items` values. | | `'place-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-content` property. Supports all valid CSS `place-content` values. | | `'aspect-ratio'` | `string \| undefined` | `-` | Style Expression Property that controls the `aspect-ratio` property. Supports all valid CSS `aspect-ratio` values. | | `cursor` | `string \| undefined` | `-` | Style Expression Property that controls the `cursor` property. Supports all valid CSS `cursor` values. | | `'pointer-events'` | `string \| undefined` | `-` | Style Expression Property that controls the `pointer-events` property. Supports all valid CSS `pointer-events` values. | | `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`. This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected. Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |