User Manual

Budget

A simple component used to display a value prefixed by a unit. The unit and The value both has different font weights to emphasize the focus on the value.

Center positioned

Used to display the budget in the center of its container.

  • a-budget--center
€ 20,00 

    
      

  

<div class="a-budget a-budget--center">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>

Default

U spaart
€ 20,00
U spaart
20 % 

    
      

  

<div class="a-budget ">
  
    <span class="a-budget__text">U spaart</span>
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>



  

<div class="a-budget ">
  
    <span class="a-budget__text">U spaart</span>
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit"></span>
    <span class="a-budget__amount">20</span>
    <span class="a-budget__unit">%</span>
  </div>
</div>

Large

Create a larger version changing the font-size and font-family to make use of it within a title context.

  • a-budget--1x-large
  • a-budget--2x-large
€ 20,00
€ 20,00 

    
      

  

<div class="a-budget a-budget--1x-large">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>



  

<div class="a-budget a-budget--2x-large">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>

Positive

Indicate if a budget is above or below zero by applying states.

  • is-positive
  • is-negative
€ 20,00
€ 20,00 

    
      

  

<div class="a-budget is-positive">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>



  

<div class="a-budget is-negative">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">20,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>

Modifiers

  • a-budget--1x-large

    Increase the font-size a bit so that it has the same styling as a <h3>

  • a-budget--2x-large

    Increaes the font-size and changes the font-family in order to use this as a more title-like component

  • a-budget--small

    Create a smaller version of the budget component where mainly the font-size and line-height of its text items are decreased compared to its original

  • a-budget--center

    Used to position the budget text in the center of its container

States

  • is-positive

    Indicate that a budget is above zero and change the color

  • is-negative

    Indicate that a budget is below zero and change the color