Rebelhooks

< Context / Components

REBELHOOKS

Introduction

Display custom content based on a selection

Body

type

Type image will display image based buttons for the user to make a selection. Type text will display image or text based buttons for the user to make a selection.

layout

Type inline will display the image or text based buttons next to each other. Type block will stack the image or text based buttons.

label

-text

Module headline copy

description

-text

Module sub-headline copy

"body":{
  "type":"image",
  "layout":"inline",
  "label":"Headline Text",
  "description":"Supporting text",
}
"body":{
  "type":"text",
  "layout":"block",
  "label":"Headline Text",
  "description":"Supporting text",
}

options

An array to generate the button information, that indicates which content will be displayed once selected

  • text

    -text

    descriptive name for the button (ignored if "type": "image")

  • resultID

    -text

    Unique identifier used to relate the button with the content displayed when button is selected

"body":{
  "options":[
    {
      "text":"selection-a",
      "resultID":"selection-a"
    }
  ]
}

options (continued / type:image)

An array to generate the button information, that indicates which content will be displayed once selected

  • img.src

    -URL

    Absolute URL pointing to image used for the button

  • img.alt

    -text

    Alternate text to be applied to the image element

  • img.style.width

    -number

    Value to be applied as the image width

  • img.style.height

    -number

    Value to be applied as the image height

"body":{
  "type":"image",
  "options":[
    {
    "img":{
      "src":"https://example.com/image.ext",
      "alt":"alt",
        "style":{
          "width":"100",
          "height":"100"
        }
      }
    }
  ]
}

options.style

Styling on the each object (button), contained inside the options array. These can all be left blank, and styles for buttons can be applied to all buttons in the standard style section

options.style.hover

Hover style applied on each object (button), contained inside the options array. These can all be left blank, and styles for buttons can be applied to all buttons in the standard style section

style

style

Styling for component container

style.hookheader

Styling for component headline container

style.hooklabel

Styling for component headline

style.hookdescription

Styling for component description

style.hook

Styling for hooks. These are applied to all hooks. Unique styles can be set within the options array

style.hook.hover

Styling for when a user hovers a hook. These are applied to all hooks. Unique styles can be set within the options array

Hook Content

The content revealed, when a user selects a hook element, is defined using by nesting components. Within the main components array, a component with type hook is defined. It contains a body.resultID object that references options.resultID. This indicates which hook reveals which content.

    "components":[
      {
        "type":"rebelhooks",
        "body":{
          "type":"text",
          "layout":"inline",
          "label":"Example A or Example B?",
          "description":"Make a selection to reveal the form",
          "options":[
            {
              "text":"Example A",
              "resultID":"ex-a",
              "style":{}
            },
            {
              "text":"Example B",
              "resultID":"ex-b",
              "style":{}
            }
          ]
        },
        "style":{},
        "fallback":{},
        "components":[
          {
          "type": "hook",
            "body":{
              "resultID": "ex-a"
            },
            "components":[
              {
                "type":"form",
                "body":{},
                "style":{},
                "fallback":{}
              }
            ]
          },
          {
          "type": "hook",
            "body":{
              "resultID": "ex-b"
            },
            "components":[
              {
                "type":"gallery",
                "body":{},
                "style":{},
                "fallback":{}
              }
            ]
          }
        ]
      }
    ]

At least one standard REBEL component must be nested within the hook component. This will include type: filters, forms, gallery, hooks, hotspots, promo reveal, search, quiz, tabs, custom html. These components are built and styled as described in the documentation.

< Context / Components