Amount

Ready

Notes
HTML
View
Info

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

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

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

    </div>

</div>


        
            <!-- Neutral Md -->
<div class="sds-amount -amountNeutral">

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

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

    </div>

</div>


        
            <!-- Neutral 2 Xl -->
<div class="sds-amount -amountNeutral -amount2xl">

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

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

    </div>

</div>


        
            <!-- Neutral Xl -->
<div class="sds-amount -amountNeutral -amountXl">

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

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

    </div>

</div>


        
            <!-- Neutral Lg -->
<div class="sds-amount -amountNeutral -amountLg">

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

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

    </div>

</div>


        
            <!-- Neutral Sm -->
<div class="sds-amount -amountNeutral -amountSm">

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

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

    </div>

</div>


        
            <!-- Neutral Xs -->
<div class="sds-amount -amountNeutral -amountXs">

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

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

    </div>

</div>


        
            <!-- Positive 2 Xl -->
<div class="sds-amount -amountPositive -amount2xl">

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

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

    </div>

</div>


        
            <!-- Positive Xl -->
<div class="sds-amount -amountPositive -amountXl">

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

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

    </div>

</div>


        
            <!-- Positive Lg -->
<div class="sds-amount -amountPositive -amountLg">

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

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

    </div>

</div>


        
            <!-- Positive Md -->
<div class="sds-amount -amountPositive">

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

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

    </div>

</div>


        
            <!-- Positive Sm -->
<div class="sds-amount -amountPositive -amountSm">

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

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

    </div>

</div>


        
            <!-- Positive Xs -->
<div class="sds-amount -amountPositive -amountXs">

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

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

    </div>

</div>


        
            <!-- Negative 2 Xl -->
<div class="sds-amount -amountNegative -amount2xl">

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

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

    </div>

</div>


        
            <!-- Negative Xl -->
<div class="sds-amount -amountNegative -amountXl">

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

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

    </div>

</div>


        
            <!-- Negative Lg -->
<div class="sds-amount -amountNegative -amountLg">

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

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

    </div>

</div>


        
            <!-- Negative Md -->
<div class="sds-amount -amountNegative">

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

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

    </div>

</div>


        
            <!-- Negative Sm -->
<div class="sds-amount -amountNegative -amountSm">

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

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

    </div>

</div>


        
            <!-- Negative Xs -->
<div class="sds-amount -amountNegative -amountXs">

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

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

    </div>

</div>


        
            <!-- Negative Faded -->
<div class="sds-amount -amountNegative -amountFade">

    <div class="sds-amount__body">
        <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" %}