< Context / Components

Search

Introduction

A simple search box, the user can type their search term and submit then get directed to the search results page on a website.

Body

form.submitUrl

-url

Endpoint where the form will submit to.

h2

-text

Title describing the search field.

p

-text

Paragraph describing the search field.

placeholder

-plain text

Placeholder text that will sit in the search filed until the user clicks on it.

submit.text

-text

Text for submit button.

submit.image.width

-number

Width of image for submit button.

submit.image.height

-number

Height of image for submit button.

submit.image.src

-URL

Source of image for submit button.

"body":{
  "form":{
    "submitUrl":"https://example.com/search&s="
  },
  "h2":"",
  "p":"",
  "placeholder":"sample placeholder",
  "submit": {
    "text":"",
    "image": {
      "width":"100",
      "height":"100",
      "src":"https://example.com/example.png"
    }
  }
},

Style

style

Styling on the component container.

h2

Styling on the component title text.

p

Styling on the component paragraph text.

input

Styling on the text input box.

input.placeholder

Styling on the placeholder text inside the input box.

input.focus

Styling on the text input box when focused.

input.hover

Styling on the text input box when hovered.

submit

Styling on submit button.

submit.focus

Styling on submit button when selected.

submit.hover

Styling on submit button when hovered.

Example

"style":{
  "width":"640",
  "height":"",
  "background": {
    "color": ""
  },
  "padding": {
    "top": "",
    "right": "",
    "left": "",
    "bottom": ""
  },
  "margin": {
    "top": "",
    "right": "",
    "left": "",
    "bottom": ""
  },
  "border": {
    "color": "#333",
    "width": "1",
    "style":"solid",
    "radius": ""
  },
  "font": {
    "color": "",
    "decoration": "",
    "family": "",
    "style": "",
    "weight": "",
    "size": "20",
    "height":"",
    "align":""
  },
  "h2":{
    "width":"",
    "height":"",
    "background": {
      "color": ""
    },
    "padding": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "margin": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "border": {
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "boxShadow": {
      "horizontalOffset": "",
      "verticalOffset": "",
      "blur": "",
      "spread": "",
      "color": ""
    },
    "font": {
      "color": "",
      "decoration": "",
      "family": "",
      "style": "",
      "weight": "",
      "size": "",
      "height":"",
      "align":""
    }
  },
  "p":{
    "width":"",
    "height":"",
    "background": {
      "color": ""
    },
    "padding": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "margin": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "border": {
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "boxShadow": {
      "horizontalOffset": "",
      "verticalOffset": "",
      "blur": "",
      "spread": "",
      "color": ""
    },
    "font": {
      "color": "",
      "decoration": "",
      "family": "",
      "style": "",
      "weight": "",
      "size": "",
      "height":"",
      "align":""
    }
  },
  "input":{
    "width":"",
    "height":"70",
    "background": {
      "color": "#fff"
    },
    "padding": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "margin": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "border": {
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "boxShadow": {
      "horizontalOffset": "",
      "verticalOffset": "",
      "blur": "",
      "spread": "",
      "color": ""
    },
    "font": {
      "color": "orange",
      "decoration": "",
      "family": "",
      "style": "",
      "weight": "",
      "size": "",
      "height":"",
      "align":""
    },
    "placeholder":{
      "font": {
        "color": "#ccc",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "",
        "align":""
      }
    },
    "focus":{
      "width":"",
      "height":"",
      "background": {
        "color": ""
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "",
        "height":"",
        "align":""
      }
    },
    "hover":{
      "width":"",
      "height":"",
      "background": {
        "color": ""
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "",
        "height":"",
        "align":""
      }
    }
  },
  "submit":{
    "width":"80",
    "height":"70",
    "background": {
      "color": ""
    },
    "padding": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "margin": {
      "top": "",
      "right": "",
      "left": "",
      "bottom": ""
    },
    "border": {
      "color": "",
      "width": "",
      "style":"",
      "radius": ""
    },
    "boxShadow": {
      "horizontalOffset": "",
      "verticalOffset": "",
      "blur": "",
      "spread": "",
      "color": ""
    },
    "font": {
      "color": "",
      "decoration": "",
      "family": "",
      "style": "",
      "weight": "",
      "size": "",
      "align":"",
      "height":""
    },
    "focus":{
      "width":"",
      "height":"",
      "background": {
        "color": ""
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "",
        "height":"",
        "align":""
      }
    },
    "hover":{
      "width":"",
      "height":"",
      "background": {
        "color": "#f69513"
      },
      "border": {
        "color": "",
        "width": "",
        "style":"",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "",
        "height":"",
        "align":""
      }
    }
  }
}