Cta button

Default

  • oblibene
    Do oblíbených
     
  •         {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "extra-class",
    tooltip: "Do oblíbených",
    icon: {
      path: "svg/favorite.svg",
      color: "primary"
      }
    }
  }
%}

      
  •           <span class="cta-button  extra-class">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg>
  </span>
  </div>

  
    <div class="tooltip">Do oblíbených</div>

  </span>

Activ

  • oblibene
    Do oblíbených
     
  •         {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    state: "active",
    tooltip: "Do oblíbených",
    icon: {
      path: "svg/favorite.svg",
      color: "primary"
      }
    }
} %}

      
  •           <span class="cta-button --active">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg>
  </span>
  </div>

  
    <div class="tooltip">Do oblíbených</div>

  </span>

Anchor tag 

  •         {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "",
    tag: "a",
    url: "#",
    tooltip: "Do oblíbených",
    icon: {
      path: "svg/favorite.svg",
      size: "",
      color: "primary"
      }
    }
  }
%}

      
  •             <a class="cta-button" href="#">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg>
  </span>
  </div>

  
    <div class="tooltip">Do oblíbených</div>

  </a>

Button tag 

  •         {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "",
    tag: "button",
    tooltip: "Do oblíbených",
    icon: {
      path: "svg/favorite.svg",
      size: "",
      color: "primary"
      }
    }
  }
%}

      
  •           <button class="cta-button">

  <div class="cta-button__wrapper">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg>
  </span>
  </div>

  
    <div class="tooltip">Do oblíbených</div>

  </button>

Schema 

    {
  "props": {
    "extraClass": {
      "type": "string",
      "description": "Extra class of button"
    },
    "url": {
      "type": "string",
      "description": "Url address (default # if tag is a)"
    },
    "state": {
      "type": "string",
      "description": "active"
    },
    "tag": {
      "type": "string",
      "description": "a | button | span (default)"
    },
    "tooltip": {
      "type": "string",
      "description": "Content of tooltip"
    },
    "icon": {
      "type": "object",
      "props": {
        "src": {
          "type": "string",
          "description": "path to icon"
        },
        "size": {
          "type": "string",
          "description": "lg (default) | sm"
        },
        "color": {
          "type": "string",
          "description": "black (default) | primary | white"
        }
      }
    }
  }
}