< Context / Components

CTA

Introduction

A call to action button that links to a webpage.

Body

href

-URL

Destination of the link.

text

-text

Text of the link.

Style

cta

cta.hover

Example .json

  {
    "type":"cta",
    "body":{
      "href":"https://www.gorebal.com/",
      "text":"Click me!"
    },
    "style":{
      "cta":{
        "width": "140",
        "height": "40",
        "background": {
          "color": "#1d74be"
        },
        "margin": {
          "top": "30",
          "right": "30",
          "bottom": "100",
          "left": "30"
        },
        "padding": {
          "top": "5",
          "right": "5",
          "bottom": "5",
          "left": "5"
        },
        "border": {
          "color": "#ffffff",
          "width": "2",
          "style": "solid",
          "radius": "10"
        },
        "boxShadow": {
          "horizontalOffset": "",
          "verticalOffset": "",
          "blur": "",
          "spread": "",
          "color": ""
        },
        "font": {
          "color": "#ffffff",
          "decoration": "",
          "family": "",
          "style": "",
          "weight": "",
          "size": "18",
          "align": ""
        },
        "hover": {
          "background": {
            "color": "#ffffff"
          },
          "margin": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "padding": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": ""
          },
          "border": {
            "color": "#1d74be",
            "width": "2",
            "style": "solid",
            "radius": "10"
          },
          "boxShadow": {
            "horizontalOffset": "",
            "verticalOffset": "",
            "blur": "",
            "spread": "",
            "color": ""
          },
          "font": {
            "color": "#1d74be",
            "decoration": "",
            "family": "",
            "style": "",
            "weight": "",
            "size": "",
            "align": ""
          }
        }
      }
    }
  }