Amount Block: Neutral Blurred

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 -amountNeutral -amount2xl -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" %}