Badges

Default (New tag)

  • Nový
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        variant: "circle",
        title: "Nový"
      }
    } %}
    
          
  •           <div class="badge  --circle">
      <span class="badge__title">Nový</span>
      </div>
    
            

New building

  • Novostavba
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        color: "turquoise",
        title: "Novostavba"
      }
    } %}
    
          
  •           <div class="badge --turquoise">
      <span class="badge__title">Novostavba</span>
      </div>
    
            

Free

  • Volné
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        variant: "circle",
        color: "green",
        title: "Volné"
      }
    } %}
    
          
  •           <div class="badge --green --circle">
      <span class="badge__title">Volné</span>
      </div>
    
            

Top

  • Top
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        variant: "circle",
        color: "yellow",
        title: "Top"
      }
    } %}
    
          
  •           <div class="badge --yellow --circle">
      <span class="badge__title">Top</span>
      </div>
    
            

Tip

  • Tip makléře
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        variant: "circle",
        color: "light-blue",
        title: "Tip",
        perex: "makléře"
      }
    } %}
    
          
  •           <div class="badge --light-blue --circle">
      <span class="badge__title">Tip</span>
          <span class="badge__perex">makléře</span>
      </div>
    
            

Reservation

  • rezervace
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        color: "gray",
        title: "rezervace"
      }
    } %}
    
          
  •           <div class="badge --gray">
      <span class="badge__title">rezervace</span>
      </div>
    
            

Notice

  • 10
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        variant: "small",
        color: "red",
        title: "10"
      }
    } %}
    
          
  •           <div class="badge --red --small">
      <span class="badge__title">10</span>
      </div>
    
            

Developer project

  • Developerský projekt
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        color: "dark-blue",
        title: "Developerský projekt"
      }
    } %}
    
          
  •           <div class="badge --dark-blue">
      <span class="badge__title">Developerský projekt</span>
      </div>
    
            

Sold

  • Prodáno
  •         {% include "@Components/badge/badge.twig" with {
      props : {
        color: "black",
        title: "Prodáno"
      }
    } %}
    
          
  •           <div class="badge --black">
      <span class="badge__title">Prodáno</span>
      </div>
    
            

Schema

    {
  "props": {
    "variant": {
      "type": "string",
      "description": "large (default) | small | circle"
    },
    "color": {
      "type": "string",
      "description": "magenta (default) | turquoise | green | yellow | light-blue | gray | red | dark-blue | black"
    },
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    }
  }
}