Amount

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.
<!-- Neutral Md -->
<div class="sds-amount">

    <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>


<!-- Neutral Md -->
<div class="sds-amount -amountNeutral -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>


<!-- Neutral 2 Xl -->
<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>


<!-- Neutral Xl -->
<div class="sds-amount -amountNeutral -amountXl -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>


<!-- Neutral Lg -->
<div class="sds-amount -amountNeutral -amountLg -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>


<!-- Neutral Sm -->
<div class="sds-amount -amountNeutral -amountSm -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>


<!-- Neutral Xs -->
<div class="sds-amount -amountNeutral -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>


<!-- Positive 2 Xl -->
<div class="sds-amount -amountPositive -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>


<!-- Positive Xl -->
<div class="sds-amount -amountPositive -amountXl -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>


<!-- Positive Lg -->
<div class="sds-amount -amountPositive -amountLg -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>


<!-- Positive Md -->
<div class="sds-amount -amountPositive -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>


<!-- Positive Sm -->
<div class="sds-amount -amountPositive -amountSm -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>


<!-- Positive Xs -->
<div class="sds-amount -amountPositive -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>


<!-- Negative 2 Xl -->
<div class="sds-amount -amountNegative -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>


<!-- Negative Xl -->
<div class="sds-amount -amountNegative -amountXl -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>


<!-- Negative Lg -->
<div class="sds-amount -amountNegative -amountLg -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>


<!-- Negative Md -->
<div class="sds-amount -amountNegative -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>


<!-- Negative Sm -->
<div class="sds-amount -amountNegative -amountSm -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>


<!-- Negative Xs -->
<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>


<!-- Negative Faded -->
<div class="sds-amount -amountNegative -amountFade -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>


<!-- Neutral Blurred -->
<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" %}