< Context / Components

Image

Introduction

The image component will generate an image that is accessible and responsive

Body

href

-url

Link on the image

src

-url

Location of image file

alt

-plain text

alternative text applied to image

retina

-number

resolution

fillSpace

-booleen

If the image should fill the full width of it's container. Useful for responsive layouts where column may go full width and an image needs to be wider than it's original size.

Style

image

Styling on the component container.

Example .json

{
  "type":"image",
  "body":{
    "href":"http://www.example.com",
    "src":"https://www.example.com/image.png",
    "alt":"rebelmail",
    "retina":"4"
  },
  "style":{
    "image":{
      "width":"150",
      "height":"50",
      "border": {
        "color": "",
        "width": "",
        "style": "",
        "radius": ""
      },
      "margin": {
        "top": "10",
        "right": "10",
        "bottom": "10",
        "left": "10"
      },
      "padding": {
        "top": "",
        "right": "",
        "bottom": "",
        "left": ""
      }
    }
  }
}