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

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

        {% 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"
    }
  }
}