Amount Interactive: Negative Xs

Hidden amount

When an amount is hidden (blurred) the following happens:

  • A button with a hidden text gets added inside the main element.
  • An aria-hidden attribute gets added to the body of the element.
<div class="sds-amount -amountNegative -amountXs -amountBlurred">

    <button type="button" class="sds-amount__blurToggle">
        <span class="sr-only">Toggle amount visibility, currently, the amount is {visibility}</span>
    </button>

    <div class="sds-amount__body" aria-hidden="true">
        <span class="sds-amount__value">{-#.###,##}</span>

        <span class="sds-amount__currency">€</span>

    </div>

</div>
 
{% include "@amount-frame" %}
  • Handle: @amount-interactive--negative-xs
  • Preview:
  • Filesystem Path: components/token-based/content/amount/amount-interactive/amount-interactive.njk
  • References (1): @amount-frame